/* ===========================================================================
   The shop.

   Three pages — the front, a department, a product — sharing one vocabulary,
   and borrowing the site's rather than inventing its own: the uncropped
   thumbnails of the artworks grid, the tile and picker language of the artwork
   pages, the b-button from blocks.css.

   Nothing here is full-bleed. The shop is a reading-width column like the rest
   of the site, because a wall of merchandise edge to edge is the one thing
   that would make it look like somebody else's storefront.
   =========================================================================== */

.shop {
  max-width: var(--page-width);
  margin: 0 auto 100px;
}

/* Matches the artworks grid's heading — same size, same tracking — so a
   department and a category of paintings announce themselves the same way. */
.shop .page-title {
  text-transform: uppercase;
  font-size: var(--font-size-2);
  letter-spacing: 1px;
  margin: 40px 0 20px;
}

.shop__intro {
  font-family: var(--font-family-2);
  font-size: var(--font-size-7);
  color: var(--color-7);
  max-width: 620px;
  margin-bottom: 50px;
}
.shop__intro a { color: var(--color-2); }

.shop__heading {
  font-size: var(--font-size-4);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-4);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-3);
  margin-bottom: 30px;
}

.shop__empty,
.shop--missing p {
  font-family: var(--font-family-2);
  color: var(--color-7);
  margin: 40px 0 80px;
}

/* --- the bar over a department or a product -------------------------------
   The same back link the artwork pages carry, in the same place, so the way
   out of a product is where a visitor has already learnt it is. */

.shop__bar {
  display: flex;
  align-items: center;
  margin: 30px 0 10px;
}
.shop__back {
  font-family: var(--font-family-2);
  font-size: var(--font-size-4);
  color: var(--color-4);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.shop__back:hover { color: var(--color-2); }
.shop__chev {
  width: 7px;
  height: 7px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  display: inline-block;
}

/* --- departments ----------------------------------------------------------
   Wide, quiet tiles. The picture is cropped here — unlike a painting, a shelf
   of puzzles has no proportions worth keeping — and the name sits under it. */

.shop__departments { margin-top: 70px; }

.shop-departments {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 40px 30px;
  margin: 0;
  padding: 0;
}
.shop-department a {
  text-decoration: none;
  display: block;
}
.shop-department__figure {
  margin: 0 0 12px;
  aspect-ratio: 4 / 3;
  background: var(--color-8);
  border-radius: 4px;
  overflow: hidden;
}
.shop-department__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.shop-department__title {
  display: block;
  font-size: var(--font-size-7);
  color: var(--color-2);
}
.shop-department a:hover .shop-department__title { color: var(--color-5); }

.shop-department__note {
  display: block;
  font-family: var(--font-family-2);
  font-size: var(--font-size-4);
  color: var(--color-4);
  margin-top: 4px;
}

/* --- featured paintings ---------------------------------------------------
   Uncropped and hung on a common baseline, like the artworks grid: these are
   pictures of pictures, and a frame drawn round one is part of what is being
   shown. Roomier than the department tiles above them — a painting given the
   same space as a shelf of puzzles reads as merchandise. */

.shop__paintings { margin-top: 90px; }

.shop-paintings {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 45px 35px;
  margin: 0;
  padding: 0;
}
.shop-paintings a {
  text-decoration: none;
  display: block;
}
.shop-paintings figure {
  margin: 0 0 14px;
  height: 260px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.shop-paintings img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.shop-paintings a:hover img { opacity: 0.85; }

.shop-paintings__title {
  display: block;
  font-size: var(--font-size-7);
  color: var(--color-2);
  line-height: 1.3;
}
.shop-paintings a:hover .shop-paintings__title { color: var(--color-5); }
.shop-paintings__year {
  display: block;
  font-family: var(--font-family-2);
  font-size: var(--font-size-4);
  color: var(--color-4);
}

/* --- the product grid -----------------------------------------------------
   Uncropped, like the artworks grid: the store photographs a puzzle box, a
   necklace and a rolled canvas in whatever shape suits each, and filling a
   common rectangle would cut every one of them. */

.shop-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 45px 30px;
  margin: 0 0 60px;
  padding: 0;
}
.shop-grid--featured { margin-bottom: 80px; }

.shop-card a {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* A fixed height with the picture sitting on its floor, uncropped. The store's
   photographs are every shape there is — a square puzzle box, a tall notecard,
   a wide panorama — so a common rectangle would crop most of them, and letting
   each keep its own height leaves the names wandering up and down the row. This
   is the compromise: nothing is cut, and every name is on the same line. */
.shop-card__figure {
  margin: 0 0 12px;
  position: relative;
  height: 240px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.shop-card__figure img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.shop-card a:hover .shop-card__figure img { opacity: 0.85; }

.shop-card__badge {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-family-2);
  font-size: var(--font-size-3);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 8px;
  border-radius: 3px;
  background: var(--color-8);
  color: var(--color-4);
}
.shop-card__badge--sale { color: var(--color-5); }

.shop-card__title {
  display: block;
  font-size: var(--font-size-8);
  color: var(--color-2);
  line-height: 1.35;
}
.shop-card a:hover .shop-card__title { color: var(--color-5); }

.shop-card__price {
  display: block;
  font-family: var(--font-family-2);
  font-size: var(--font-size-4);
  color: var(--color-4);
  margin-top: 4px;
}
.shop-card__price s {
  color: var(--color-3);
  margin-right: 6px;
}

/* --- sorting and paging --------------------------------------------------- */

.shop__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 30px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-3);
  margin-bottom: 35px;
}
.shop__count,
.shop__sort {
  font-family: var(--font-family-2);
  font-size: var(--font-size-4);
  color: var(--color-4);
}
.shop__sort {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
.shop__sort a {
  color: var(--color-4);
  text-decoration: none;
}
.shop__sort a:hover { color: var(--color-2); }

.shop__pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  font-family: var(--font-family-2);
  font-size: var(--font-size-4);
}
.shop__pager a { color: var(--color-2); }
.shop__pager .is-off,
.shop__pagernum { color: var(--color-4); }

/* ===========================================================================
   One product
   =========================================================================== */

.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  margin-top: 20px;
}

.product__figure {
  margin: 0;
  background: var(--color-8);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Room for a portrait photograph without letting one dominate the page. */
  min-height: 380px;
}
.product__figure img {
  max-width: 100%;
  max-height: 70vh;
  display: block;
}

.product__thumbs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
}
.product__thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  background: var(--color-8);
  border: 1px solid transparent;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.product__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.product__thumb:hover,
.product__thumb.is-selected {
  opacity: 1;
  border-color: var(--color-3);
}

/* Smaller than a page title elsewhere on the site. Product names out of Shopify
   are sentences — "The Road Home Fine Art Puzzles 250 pc. & 1,000 pc." — and at
   heading size they take three lines and push the price off the first screen. */
.product__title {
  font-size: var(--font-size-5);
  line-height: 1.2;
  margin-bottom: 14px;
}
.product__price {
  font-family: var(--font-family-2);
  font-size: var(--font-size-2);
  color: var(--color-2);
  margin-bottom: 30px;
}
.product__price s {
  color: var(--color-4);
  margin-right: 8px;
  font-size: var(--font-size-7);
}

/* --- options -------------------------------------------------------------- */

.product__field { margin-bottom: 25px; }
.product__label {
  display: block;
  font-family: var(--font-family-2);
  font-size: var(--font-size-3);
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-4);
  margin-bottom: 10px;
}
.product__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.product__choice {
  font-family: var(--font-family-2);
  font-size: var(--font-size-4);
  padding: 9px 16px;
  border: 1px solid var(--color-3);
  border-radius: 3px;
  background: none;
  color: var(--color-2);
  cursor: pointer;
}
.product__choice:hover { border-color: var(--color-7); }
.product__choice.is-selected {
  border-color: var(--color-2);
  background: var(--color-2);
  color: var(--color-1);
}
/* Still choosable — a combination that was never made should be visible, not
   hidden, so the shape of what is on offer stays readable. */
.product__choice.is-unavailable {
  color: var(--color-4);
  border-style: dashed;
  text-decoration: line-through;
}
.product__choice.is-unavailable.is-selected {
  background: none;
  color: var(--color-4);
}
.product__choice:focus-visible {
  outline: 2px solid var(--color-5);
  outline-offset: 2px;
}

/* The long-list alternative to the buttons above. Native, so it opens as the
   platform's own menu — which on a phone is a far better thing to scroll
   thirteen shipping options in than a column of buttons. */
.product__select {
  width: 100%;
  max-width: 420px;
  padding: 10px 12px;
  font-family: var(--font-family-2);
  font-size: var(--font-size-4);
  color: var(--color-2);
  background: var(--color-8);
  border: 1px solid var(--color-3);
  border-radius: 3px;
}
.product__select:hover { border-color: var(--color-7); }
.product__select:focus-visible {
  outline: 2px solid var(--color-5);
  outline-offset: 2px;
}
/* The menu itself is drawn by the operating system, and a light option list
   under a dark control is unreadable on Windows. */
.product__select option {
  color: var(--color-2);
  background: var(--color-1);
}

.product__stock {
  font-family: var(--font-family-2);
  font-size: var(--font-size-4);
  color: var(--color-5);
  margin-bottom: 20px;
}
.product[data-product] [hidden] { display: none; }

/* --- quantity and buying --------------------------------------------------
   The same stepper as the artwork pages, at the same size, so the two buying
   panels are the same control in two places rather than two controls. */

.product__qty {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-family-2);
  font-size: var(--font-size-4);
  color: var(--color-4);
  margin-bottom: 25px;
}
.product__step {
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-3);
  border-radius: 3px;
  background: none;
  color: var(--color-2);
  cursor: pointer;
  font-size: var(--font-size-8);
  line-height: 1;
}
.product__step:hover { border-color: var(--color-7); }
.product__qty input {
  width: 54px;
  padding: 6px 8px;
  text-align: center;
  background: none;
  border: 1px solid var(--color-3);
  border-radius: 3px;
  color: var(--color-2);
  font-size: var(--font-size-4);
}

/* The artwork pages' Add to cart button, to the pixel — same border, same type,
   same hover. It is the same button doing the same thing, and the two panels
   are met one after the other often enough that a difference would show. */
.product__buy {
  display: block;
  max-width: 320px;
  text-align: center;
  padding: 14px 20px;
  border: 1px solid var(--color-4);
  border-radius: 3px;
  color: var(--color-2);
  text-decoration: none;
  font-family: var(--font-family-2);
  font-size: var(--font-size-8);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.product__buy:hover {
  background: var(--color-8);
  border-color: var(--color-5);
}
.product__buy.is-off {
  color: var(--color-4);
  border-style: dashed;
  cursor: default;
  pointer-events: none;
}

.product__soldout,
.product__ship,
.product__artwork {
  font-family: var(--font-family-2);
  font-size: var(--font-size-4);
  color: var(--color-4);
  margin-top: 14px;
}
.product__soldout a,
.product__artwork a { color: var(--color-2); }
.product__artwork { margin-top: 30px; }

.product__intl {
  font-family: var(--font-family-2);
  font-size: var(--font-size-4);
  color: var(--color-4);
  margin-top: 6px;
}
.product__intl summary {
  cursor: pointer;
  list-style: none;
}
.product__intl summary::-webkit-details-marker { display: none; }
.product__intl summary:before {
  content: '+ ';
  color: var(--color-4);
}
.product__intl[open] summary:before { content: '– '; }
.product__intl p { margin-top: 8px; }
.product__intl a { color: var(--color-2); }

.product__description {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--color-3);
  font-family: var(--font-family-2);
  font-size: var(--font-size-8);
  line-height: 1.6;
  color: var(--color-7);
}
.product__description p { margin-bottom: 1em; }
.product__description strong { color: var(--color-2); }
.product__description ul,
.product__description ol { padding-left: 1.2em; }

/* --- narrow ---------------------------------------------------------------
   One column below the point where two would each be too tight to read. The
   picture stays first: it is what a visitor came to look at. */

@media (max-width: 800px) {
  .product {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .product__figure { min-height: 0; }
  .product__title { font-size: var(--font-size-2); }
  .product__buy { max-width: none; }
}

@media (max-width: 600px) {
  .shop-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 35px 20px; }
  .shop-card__figure { height: 170px; }
  .shop-departments { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 30px 20px; }
  .shop-paintings { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 35px 20px; }
  .shop-paintings figure { height: 150px; }
  .shop__controls { margin-bottom: 25px; }
}

/* ------------------------------------------------ the shop front's sections */

.shop__section { margin-top: 64px; }
.shop__section:first-of-type { margin-top: 40px; }
.shop__sectionhead { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.shop__lede { margin: 0; color: var(--color-7); font-family: var(--font-family-2); font-size: var(--font-size-4); max-width: 520px; }
.shop--index .shop-paintings { grid-template-columns: repeat(4, 1fr); margin-top: 24px; }
.shop__links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 32px; }
.shop__textlink { color: var(--color-2); text-decoration: none; font-family: var(--font-family-2); }
.shop__textlink:hover { color: var(--color-5); }
.shop__footlinks {
  display: flex; gap: 32px; flex-wrap: wrap;
  margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--color-3);
  font-family: var(--font-family-2);
}
.shop__footlinks a { color: var(--color-2); text-decoration: none; }
.shop__footlinks a:hover { color: var(--color-5); }
@media (max-width: 700px) {
  .shop--index .shop-paintings { grid-template-columns: repeat(2, 1fr); }
  .shop__section { margin-top: 44px; }
}

.shop--index .shop-departments { grid-template-columns: repeat(5, 1fr); }
.shop-department__subs { list-style: none; margin: 8px 0 0; padding: 0; font-family: var(--font-family-2); font-size: var(--font-size-4); line-height: 1.9; }
.shop-department__subs a { color: var(--color-7); text-decoration: none; }
.shop-department__subs a:hover { color: var(--color-5); }
.shop-more { list-style: none; margin: 0; padding: 0; columns: 4 200px; column-gap: 32px; font-family: var(--font-family-2); line-height: 2; }
.shop-more a { color: var(--color-2); text-decoration: none; }
.shop-more a:hover { color: var(--color-5); }
@media (max-width: 900px) { .shop--index .shop-departments { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .shop--index .shop-departments { grid-template-columns: repeat(2, 1fr); } }

/* ===========================================================================
   The shop front, as a front page: a masthead, a lead and a rail, then the
   store's sections ruled off one under another. Dense on purpose — many
   things at a glance, at more than one size.
   =========================================================================== */

.sf {
  --sf-rule: var(--color-3);
  /* The open menu's tab and panel: a shade lighter than the rules, between
     them and the artwork page's search outline. */
  --sf-outline: color-mix(in srgb, var(--color-3) 55%, var(--color-4));
}
.sf a { color: inherit; text-decoration: none; }

/* --- masthead */
.sf-mast { text-align: center; border-bottom: 4px double var(--sf-rule); padding-bottom: 10px; margin-bottom: 28px; }
.sf-mast__line {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--sf-rule);
  font-family: var(--font-family-2); font-size: 12px; letter-spacing: 0.04em; color: var(--color-7);
}
.sf-mast__line a:hover { color: var(--color-5); }
.sf-mast__title {
  margin: 4px 0 12px; font-family: var(--font-family-1); font-weight: 400;
  font-size: clamp(40px, 6vw, 72px); line-height: 1; letter-spacing: 0.01em; color: var(--color-2);
  text-transform: none;
}
.sf-mast__nav {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 22px;
  padding-top: 10px; border-top: 1px solid var(--sf-rule);
  font-family: var(--font-family-2); font-size: 13px;
}
.sf-mast__nav a:hover { color: var(--color-5); }

/* --- rows, kickers, rules */
.sf-row { padding: 22px 0 26px; border-bottom: 1px solid var(--sf-rule); }
.sf-kicker {
  margin: 0 0 14px; font-family: var(--font-family-2); font-weight: 600; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-5);
}
.sf-kicker a:hover { text-decoration: underline; }
.sf-more { font-family: var(--font-family-2); font-size: 13px; color: var(--color-7); white-space: nowrap; }
.sf-more:hover { color: var(--color-5); }

/* --- lead: the slideshow, and the rail beside it */
.sf-row--lead { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0; padding-top: 0; }
.sf-lead { position: relative; padding-right: 24px; border-right: 1px solid var(--sf-rule); }
.sf-lead__slide { display: block; position: absolute; inset: 0 24px auto 0; opacity: 0; transition: opacity var(--fade, 1.2s) ease-in-out; pointer-events: none; }
.sf-lead__slide:first-child { position: relative; inset: auto; }
.sf-lead__slide.is-active { opacity: 1; pointer-events: auto; }
.sf-lead__slide img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.sf-lead__captions { position: relative; min-height: 3.2em; margin-top: 12px; }
.sf-lead__caption {
  position: absolute; left: 0; top: 0; opacity: 0; transition: opacity var(--fade, 1.2s);
  font-family: var(--font-family-1); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.15; color: var(--color-2);
  pointer-events: none;
}
.sf-lead__caption.is-active { opacity: 1; pointer-events: auto; }
.sf-lead__caption:hover { color: var(--color-5); }
.sf-lead .slideshow-controls { bottom: auto; top: 14px; right: 38px; }
.sf-rail { padding-left: 24px; display: flex; flex-direction: column; }
.sf-rail .sf-item--line + .sf-item--line { border-top: 1px solid var(--sf-rule); }
.sf-rail .sf-more { margin-top: auto; padding-top: 12px; }

/* --- products at three sizes */
.sf-item { display: block; }
.sf-item__img { display: block; background: var(--color-8); }
.sf-item__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-item__title { display: block; color: var(--color-2); line-height: 1.3; }
.sf-item__price { display: block; margin-top: 3px; font-family: var(--font-family-2); font-size: 12px; color: var(--color-7); }
.sf-item:hover .sf-item__title { color: var(--color-5); }

.sf-item--card .sf-item__img { aspect-ratio: 1; margin-bottom: 8px; }
.sf-item--card .sf-item__title {
  font-family: var(--font-family-2); font-size: 13px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sf-item--lead { grid-row: span 2; grid-column: span 2; }
.sf-item--lead .sf-item__img { aspect-ratio: 1; margin-bottom: 10px; }
.sf-item--lead .sf-item__title { font-family: var(--font-family-1); font-size: 22px; }
.sf-item--line { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 10px 0; }
.sf-item--line .sf-item__img { width: 64px; height: 64px; }
.sf-item--line .sf-item__title {
  font-family: var(--font-family-1); font-size: 16px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- the store's lists: columns ruled apart */
.sf-cols { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.sf-cols--2 { --n: 2; } .sf-cols--3 { --n: 3; } .sf-cols--4 { --n: 4; }
.sf-cols > * { padding: 0 20px; border-left: 1px solid var(--sf-rule); }
.sf-cols > :first-child { padding-left: 0; border-left: 0; }
.sf-cols > :last-child { padding-right: 0; }
.sf-story { display: block; }
.sf-story__img { display: block; margin-bottom: 10px; }
.sf-story__img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sf-story__head { display: block; font-family: var(--font-family-1); font-size: 24px; line-height: 1.15; color: var(--color-2); }
.sf-story__dek { display: block; margin-top: 6px; font-family: var(--font-family-2); font-size: 13px; line-height: 1.5; color: var(--color-7); }
.sf-story:hover .sf-story__head { color: var(--color-5); }
.sf-cols--small .sf-story__img img { aspect-ratio: 16 / 9; }
.sf-cols--small .sf-story__head { font-size: 18px; }

/* --- a group per menu section, and a section per collection */
.sf-group { margin-top: 36px; }
.sf-group__title {
  margin: 0; padding: 8px 0; border-top: 4px double var(--sf-rule); border-bottom: 1px solid var(--sf-rule);
  font-family: var(--font-family-1); font-weight: 400; font-size: 30px; color: var(--color-2);
}
.sf-pages { display: flex; gap: 22px; flex-wrap: wrap; margin: 10px 0 0; font-family: var(--font-family-2); font-size: 13px; color: var(--color-7); }
.sf-pages a:hover { color: var(--color-5); }
.sf-section__title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin: 0 0 14px; font-family: var(--font-family-1); font-weight: 400; font-size: 22px; color: var(--color-2);
}
.sf-section__title a:first-child:hover { color: var(--color-5); }
.sf-section__parent {
  display: block; font-family: var(--font-family-2); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-7);
}
.sf-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 16px; }
.sf-section--big .sf-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* --- reviews */
.sf-reviews { border-bottom: 0; }
.sf-review { margin: 0; }
.sf-review__quote { margin: 0; font-family: var(--font-family-1); font-size: 18px; line-height: 1.45; color: var(--color-2); }
.sf-review__name { display: block; margin-top: 8px; font-family: var(--font-family-2); font-style: normal; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-7); }

@media (max-width: 900px) {
  .sf-row--lead { grid-template-columns: 1fr; }
  .sf-lead { padding-right: 0; border-right: 0; }
  .sf-lead__slide { right: 0; }
  .sf-rail { padding-left: 0; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sf-rule); }
  .sf-grid, .sf-section--big .sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-cols { grid-template-columns: 1fr; }
  .sf-cols > * { padding: 16px 0; border-left: 0; border-top: 1px solid var(--sf-rule); }
  .sf-cols > :first-child { border-top: 0; padding-top: 0; }
}
@media (max-width: 600px) {
  .sf-grid, .sf-section--big .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-item--lead { grid-row: auto; }
}

/* --- the masthead's sections, as pictures: one strip per menu group */
.sf-strip { display: flex; gap: 28px; padding-top: 14px; border-top: 1px solid var(--sf-rule); overflow-x: auto; scrollbar-width: none; text-align: left; }
.sf-strip::-webkit-scrollbar { display: none; }
.sf-strip__group { flex: none; }
.sf-strip__group + .sf-strip__group { padding-left: 28px; border-left: 1px solid var(--sf-rule); }
.sf-strip__label {
  display: block; margin-bottom: 8px; font-family: var(--font-family-2); font-weight: 600; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-5);
}
.sf-strip__row { display: flex; gap: 12px; }
.sf-strip__item { flex: none; width: 92px; }
.sf-strip__img { display: block; width: 92px; height: 92px; background: var(--color-8); border-radius: 3px; overflow: hidden; }
.sf-strip__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-strip__name { display: block; margin-top: 6px; font-family: var(--font-family-2); font-size: 12px; line-height: 1.3; color: var(--color-2); }
.sf-strip__item:hover .sf-strip__name { color: var(--color-5); }
@media (min-width: 1200px) { .sf-strip { justify-content: center; } }

/* The lead on its own, the whole width: no rail beside it. */
.sf-row--lead { grid-template-columns: 1fr; }
.sf-lead { padding-right: 0; border-right: 0; }
.sf-lead__slide { right: 0; }
.sf-lead__slide img { aspect-ratio: 21 / 9; }
.sf-lead .slideshow-controls { right: 14px; }
/* Both groups in full, one under the other on a narrower screen, so nothing is cut off at the start. */
.sf-strip { flex-wrap: wrap; justify-content: center; row-gap: 18px; overflow: visible; }
.sf-strip__row { flex-wrap: wrap; justify-content: flex-start; }
@media (max-width: 700px) {
  .sf-strip { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; }
  .sf-strip__row { flex-wrap: nowrap; }
}
.sf-strip__group + .sf-strip__group { padding-left: 0; border-left: 0; }

/* The section pictures at the page's ordinary card size: each group a grid
   across the full width, left-aligned like everything below it. */
.sf-strip { display: block; overflow: visible; }
.sf-strip__group { width: 100%; }
.sf-strip__group + .sf-strip__group { margin-top: 24px; }
.sf-strip__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 16px; }
.sf-strip__item { width: auto; }
.sf-strip__img { width: 100%; height: auto; aspect-ratio: 1; }
.sf-strip__name { font-size: 14px; }
@media (max-width: 700px) {
  .sf-strip__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
  .sf-strip__name { font-size: 12px; }
}

/* Nothing on the shop front is cropped: every picture keeps its own
   proportions. In the grids they stand on a shared baseline, so the names
   under them line up; the slideshow fits each painting whole inside its
   frame. */
.sf img { object-fit: contain !important; }
.sf-strip__img, .sf-item__img, .sf-story__img { background: none; border-radius: 0; height: auto !important; aspect-ratio: auto !important; }
.sf-strip__img img, .sf-item__img img, .sf-story__img img { width: 100%; height: auto !important; aspect-ratio: auto !important; }
.sf-strip__row, .sf-grid, .sf-cols { align-items: end; }
.sf-item--line .sf-item__img { width: 64px; }
.sf-lead__slide img { aspect-ratio: 21 / 9 !important; height: auto; background: var(--color-1); }
.sf-item--lead { align-self: start; }
/* Under the page title rather than around a headline of its own. */
.sf-mast { text-align: left; border-bottom: 0; padding-bottom: 0; }
.sf-mast__line { display: none; }
.sf-strip { border-top: 0; padding-top: 0; }
/* The slideshow fills its frame, as it did: the one picture on the page that
   is cropped, because it is a banner rather than a product. */
.sf .sf-lead__slide img { object-fit: cover !important; background: none; }
.sf-mast { margin-top: 28px; }
/* The page title, and the shipping note at the other end of its line. */
.sf-titlebar { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
.sf-titlebar .page-title { margin-bottom: 0; }
.sf-ship { margin: 0 0 18px; font-family: var(--font-family-2); font-size: 13px; color: var(--color-2); }
.sf-ship span { color: var(--color-7); margin-left: 6px; }
.sf-ship a { color: var(--color-7); text-decoration: underline; }
.sf-ship a:hover { color: var(--color-5); }
@media (max-width: 700px) { .sf-ship span { display: block; margin: 2px 0 0; } }

/* The shop banner's caption is the call to action, as on the store's own
   slideshow: in the middle of the picture, large, over a soft shade. */
.page-banner--shop .page-banner__captions {
  left: 0; right: 0; top: 50%; bottom: auto; height: auto;
  transform: translateY(-50%); text-align: center; pointer-events: none;
}
.page-banner--shop .page-banner__captions span {
  left: 50%; bottom: auto; top: 50%; transform: translate(-50%, -50%);
  white-space: normal; width: max-content; max-width: 90%;
  font-size: clamp(28px, 4vw, 52px); line-height: 1.15;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.75), 0 0 4px rgba(0, 0, 0, 0.5);
}
.page-banner--shop .page-banner__captions a { border-bottom: 1px solid rgba(255, 255, 255, 0.6); }
.page-banner--shop .page-banner__captions a::after { content: " \2192"; }
.page-banner--shop::after { display: none; }
/* The shipping line, on its own, centred above the title. */
.sf-ship { text-align: center; margin: 0 0 14px; padding: 10px 0; border-bottom: 1px solid var(--sf-rule); font-size: 13px; letter-spacing: 0.04em; color: var(--color-2); }

/* The caption as the store's slideshow button: a thin white box with the
   words spaced inside it. */
.page-banner--shop .page-banner__captions span {
  font-family: var(--font-family-2); font-size: clamp(17px, 1.7vw, 24px); letter-spacing: 0.06em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
.page-banner--shop .page-banner__captions a {
  display: inline-block; padding: 0.7em 1.6em;
  border: 1px solid rgba(255, 255, 255, 0.9); border-bottom: 1px solid rgba(255, 255, 255, 0.9);
  color: #fff; transition: background 0.2s, color 0.2s;
}
.page-banner--shop .page-banner__captions a::after { content: none; }
.page-banner--shop .page-banner__captions a:hover { background: #fff; color: var(--color-1); text-shadow: none; }


/* A darker ground behind the words, and no cross-fade: the old button goes
   and the new one is there, rather than the two overlapping as the slide
   changes. */
.page-banner--shop .page-banner__captions a { background: rgba(11, 21, 30, 0.45); }
.page-banner--shop .page-banner__captions a:hover { background: #fff; }
.page-banner--shop .page-banner__captions span,
.page-banner--shop .page-banner__captions span.is-active { transition: none; }

/* Every picture in a row centred in a frame of the same size, so pictures of
   different shapes sit on a common middle line, uncropped, and the names
   under them still line up. */
.sf-strip__row, .sf-grid, .sf-cols { align-items: start; }
.sf-strip__img, .sf-item--card .sf-item__img, .sf-item--lead .sf-item__img {
  display: flex !important; align-items: center; justify-content: center; aspect-ratio: 1 !important;
}
.sf-story__img { display: flex !important; align-items: center; justify-content: center; aspect-ratio: 4 / 3 !important; }
.sf-cols--small .sf-story__img { aspect-ratio: 16 / 9 !important; }
.sf-strip__img img, .sf-item--card .sf-item__img img, .sf-item--lead .sf-item__img img, .sf-story__img img {
  width: auto !important; height: auto !important; max-width: 100%; max-height: 100%;
}

/* The frame holds its size whatever the picture: the picture is placed in
   it, centred both ways and never larger than it. */
.sf-strip__img, .sf-item--card .sf-item__img, .sf-item--lead .sf-item__img, .sf-story__img { position: relative; }
.sf-strip__img img, .sf-item--card .sf-item__img img, .sf-item--lead .sf-item__img img, .sf-story__img img {
  position: absolute; inset: 0; margin: auto;
}

/* And the words under each picture centred beneath it. */
.sf-strip__name, .sf-item--card .sf-item__text, .sf-item--lead .sf-item__text,
.sf-story__head, .sf-story__dek { text-align: center; }

/* Columns of equal width, the rule between them drawn in the gap rather than
   as padding, which made the middle column narrower than the outer two. */
.sf-cols { column-gap: 40px; }
.sf-cols > *, .sf-cols > :first-child, .sf-cols > :last-child { padding: 0; border-left: 0; position: relative; }
.sf-cols > * + *::before { content: ""; position: absolute; top: 0; bottom: 0; left: -20px; border-left: 1px solid var(--sf-rule); }
@media (max-width: 900px) { .sf-cols > * + *::before { display: none; } }

/* View all, under its section, centred. */
.sf-viewall { margin: 22px 0 0; text-align: center; }
.sf-section__title { justify-content: flex-start; }

/* ---------------------------------------------- the sections, as squares
   Each section an outlined square card: its picture centred in the upper
   part, its name inside the square underneath. One row per group, sliding
   sideways when there are more than fit. */
.sf-strip__row {
  display: flex !important; flex-wrap: nowrap !important; gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
  scrollbar-width: thin; padding-bottom: 8px; align-items: stretch !important;
}
.sf-strip__item {
  flex: 0 0 230px; width: 230px; aspect-ratio: 1; scroll-snap-align: start;
  display: flex; flex-direction: column; padding: 14px;
  border: 1px solid var(--color-3); border-radius: 3px; box-sizing: border-box;
}
.sf-strip__item:hover { border-color: var(--color-5); }
.sf-strip__img { flex: 1 1 auto; width: 100%; aspect-ratio: auto !important; min-height: 0; }
.sf-strip__name {
  flex: none; margin-top: 12px; text-align: center !important;
  font-family: var(--font-family-2); font-size: 14px; line-height: 1.3;
}
@media (max-width: 700px) {
  .sf-strip__item { flex-basis: 170px; width: 170px; padding: 10px; }
  .sf-strip__name { font-size: 12px; margin-top: 8px; }
}

/* --- made to order in koa */
.sf-koa__intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.sf-koa__lede { margin: 0; max-width: 460px; font-family: var(--font-family-1); font-size: 22px; line-height: 1.35; color: var(--color-2); }
.sf-koa__styles { display: flex; gap: 14px; }
.sf-koa__styles a { display: block; width: 92px; text-align: center; font-family: var(--font-family-2); font-size: 12px; color: var(--color-7); }
.sf-koa__styles a:hover { color: var(--color-5); }
.sf-koa__styleimg { position: relative; display: block; height: 72px; margin-bottom: 6px; }
.sf-koa__styleimg img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; }
.sf-koa__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 26px; }
.sf-koa__item { display: block; text-align: center; }
.sf-koa__img { position: relative; display: block; aspect-ratio: 1; }
.sf-koa__img img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; }
.sf-koa__title { display: block; margin-top: 10px; font-family: var(--font-family-1); font-size: 19px; color: var(--color-2); }
.sf-koa__note { display: block; margin-top: 3px; font-family: var(--font-family-2); font-size: 12px; color: var(--color-7); }
.sf-koa__item:hover .sf-koa__title { color: var(--color-5); }
@media (max-width: 900px) { .sf-koa__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- featured: the slideshow's paintings in their frames, side by side */
.sf-featured { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 28px; margin: 6px 0 40px; }
.sf-featured__item { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sf-featured__img { position: relative; display: block; width: 100%; aspect-ratio: 1; }
.sf-featured__img img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; }
.sf-featured__button {
  display: inline-block; padding: 0.6em 1.2em; border: 1px solid var(--color-3);
  font-family: var(--font-family-2); font-size: 14px; letter-spacing: 0.04em; text-align: center; color: var(--color-2);
}
.sf-featured__item:hover .sf-featured__button { border-color: var(--color-5); color: var(--color-5); }
@media (max-width: 900px) { .sf-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; } }
.sf-featured__img { aspect-ratio: 4 / 3; }

/* --- featured, as a slideshow: one framed painting at a time, large and
   centred, its button under it. slideshow.js moves is-active along. */
.sf-featured { display: block; position: relative; margin: 10px 0 44px; }
.sf-featured__stage { position: relative; height: min(64vh, 640px); }
.sf-featured__slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--fade, 1.2s) ease-in-out; pointer-events: none; }
.sf-featured__slide.is-active { opacity: 1; pointer-events: auto; }
.sf-featured__slide img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; }
.sf-featured__captions { position: relative; height: 3em; margin-top: 22px; }
.sf-featured__captions .sf-featured__button {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap;
  visibility: hidden; font-size: 16px;
}
.sf-featured__captions .sf-featured__button.is-active { visibility: visible; }
.sf-featured__button:hover { border-color: var(--color-5); color: var(--color-5); }
.sf-featured .slideshow-controls { bottom: auto; top: 0; right: 0; }
.sf-featured .slideshow-controls__btn { color: var(--color-2); border-color: var(--color-3); box-shadow: none; }
@media (max-width: 700px) { .sf-featured__stage { height: 44vh; } }

/* --- a row of framed paintings, each with a button under it */
.sf-row4 { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 28px; }
.sf-row4__item { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.sf-row4__img { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; }
.sf-row4__img img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; }
.sf-row4__button {
  display: inline-block; padding: 0.6em 1.2em; border: 1px solid var(--color-3);
  font-family: var(--font-family-2); font-size: 14px; letter-spacing: 0.04em; text-align: center; color: var(--color-2);
}
.sf-row4__item:hover .sf-row4__button { border-color: var(--color-5); color: var(--color-5); }
/* Just the words under the painting, no box round them. */
.sf-row4__button { border: 0; padding: 0; }
/* What the picture is, between the painting and its button. */
.sf-row4__what { display: block; margin-top: 3px; font-size: 12px; color: var(--color-7); }
@media (max-width: 900px) { .sf-row4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; } }
.sf-featured__frame { margin: 14px 0 0; text-align: center; font-family: var(--font-family-2); font-size: 13px; color: var(--color-7); }
.sf-featured__frame a { color: var(--color-2); text-decoration: underline; margin-left: 4px; }
.sf-featured__frame a:hover { color: var(--color-5); }
/* A smaller stage: the framed painting at about two-thirds the width. */
.sf-featured__stage { height: min(46vh, 440px); max-width: 760px; margin: 0 auto; }
@media (max-width: 700px) { .sf-featured__stage { height: 34vh; } }
.sf-feature-grid { margin: 10px 0 40px; } .sf-feature-grid .sf-featured__frame { margin-top: 22px; }
/* The best-selling section, half again as large as the cards beside it,
   which sit along the same bottom edge. */
.sf-strip__row { align-items: flex-end !important; }
.sf-strip__item--big { flex-basis: 340px; width: 340px; }
.sf-strip__item--big .sf-strip__name { font-size: 17px; }
@media (max-width: 700px) { .sf-strip__item--big { flex-basis: 240px; width: 240px; } }
/* Close under the header: the page's own top spacing is for a title, and this line comes before it. */
.sf-ship { margin-top: -22px; padding-top: 4px; }

/* More air between the sections: each one's rule well clear of what is above
   and below it. */
.sf-row { padding: 40px 0 48px; }
.sf-feature-grid { margin-bottom: 0; padding-bottom: 48px; border-bottom: 1px solid var(--sf-rule); }
.sf-mast { margin-top: 0; padding-top: 10px; }
.sf-mast > .sf-feature-grid:first-child { margin-top: 0; }
.sf-strip__group + .sf-strip__group { margin-top: 40px; }
.sf-strip { padding-top: 40px; }

/* Shop Gifts: one row, every picture whole and all the same height, each as
   wide as its own shape asks, together exactly the row's width. shop.js gives
   each card its picture's proportions as --r once it has loaded; until then
   they share the row equally. */
.sf-strip__row--lead {
  display: flex !important; flex-wrap: nowrap !important; gap: 20px; overflow: visible;
  padding-bottom: 0; align-items: flex-start !important;
}
.sf-strip__row--lead .sf-strip__item,
.sf-strip__row--lead .sf-strip__item--big {
  flex: var(--r, 1) 1 0; width: auto; min-width: 0; aspect-ratio: auto;
  border: 0; padding: 0; border-radius: 0; display: flex; flex-direction: column;
}
.sf-strip__row--lead .sf-strip__img { flex: none; width: 100%; height: auto !important; aspect-ratio: var(--r, 1) !important; }
.sf .sf-strip__row--lead .sf-strip__img img {
  width: 100% !important; height: 100% !important; max-width: none; max-height: none; object-fit: contain !important;
}
.sf-strip__row--lead .sf-strip__name { margin-top: 12px; font-size: 15px; letter-spacing: 0.02em; }
.sf-strip__row--lead .sf-strip__item--big .sf-strip__name { font-size: 15px; }
.sf-strip__row--lead .sf-strip__item:hover .sf-strip__name { color: var(--color-5); }
/* Too narrow for six in a row: two to a row, each picture whole in a frame
   of the same height. */
@media (max-width: 700px) {
  .sf-strip__row--lead { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .sf-strip__row--lead .sf-strip__img { aspect-ratio: auto !important; height: 160px !important; }
}
.sf-kicker { margin-bottom: 20px; }

/* --- quick navigation: the store's two menus, each opening a panel of its
   sections, every one with its picture. The open button is a tab: its outline
   runs on round the panel, with no line between the two. */
.sf-quick {
  position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px;
  margin: 0 0 24px;
  font-family: var(--font-family-2);
}
.sf-quick__drop { position: static; }
.sf-quick__link {
  position: relative; z-index: 21; display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box; height: 38px; padding: 0 16px;
  background: none; border: 1px solid transparent; border-radius: 3px; cursor: pointer;
  font: inherit; font-size: 15px; letter-spacing: 0.04em; color: var(--color-2);
}
/* A click leaves no mark: the browser's focus ring only for the keyboard. */
.sf-quick__link:focus:not(:focus-visible) { outline: none; }
/* Open, the button becomes a tab: it reaches down across the gap to the
   panel and one pixel over its top rule, hiding it there (taller by that
   much, the extra height kept out of the layout by the negative margin) and loses its bottom edge, so the two read as one shape
   while the other buttons stay whole above the panel. */
.sf-quick__drop:hover .sf-quick__link, .sf-quick__drop:has(:focus-visible) .sf-quick__link {
  color: var(--color-5); background: var(--color-1); border-color: var(--sf-outline);
  height: 43px; padding-bottom: 5px; margin-bottom: -5px;
  border-bottom-color: var(--color-1); border-radius: 3px 3px 0 0;
}
.sf-quick__caret {
  display: inline-block; width: 6px; height: 6px; margin: 0 0 4px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg);
}
/* The panel spans the whole bar, just below the buttons; its ::before fills
   the gap, so the pointer can cross it without the
   panel closing. */
.sf-quick__menu {
  display: none; position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  gap: 0 48px; align-items: flex-start;
  padding: 12px 24px 20px; background: var(--color-1);
  border: 1px solid var(--sf-outline); border-radius: 3px;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.35);
}
.sf-quick__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 5px; }
.sf-quick__drop:hover .sf-quick__menu, .sf-quick__drop:has(:focus-visible) .sf-quick__menu { display: flex; }
/* One open at a time: a menu kept open by a click gives way to the one the
   pointer is over. */
.sf-quick:has(.sf-quick__drop:hover) .sf-quick__drop:not(:hover) .sf-quick__menu { display: none; }
.sf-quick:has(.sf-quick__drop:hover) .sf-quick__drop:not(:hover) .sf-quick__link {
  color: var(--color-2); background: none; height: 38px; padding-bottom: 0; margin-bottom: 0;
  border-color: transparent; border-radius: 3px;
}
.sf-quick__singles { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-content: start; }
/* With no column beside them, three across. */
.sf-quick__singles:only-child { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-quick__col { flex: 0 0 260px; display: flex; flex-direction: column; padding-left: 48px; border-left: 1px solid var(--sf-rule); }
.sf-quick__col:first-child { padding-left: 0; border-left: 0; }
.sf-quick__head {
  padding: 10px 0 12px; font-weight: 600; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-5);
}
/* A rule between one option and the next. */
.sf-quick__menu a {
  display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--sf-rule);
  font-size: 14px; line-height: 1.3; color: var(--color-2);
}
.sf-quick__menu a:hover { color: var(--color-5); }
/* No rule under an option with nothing below it: the last row of the grid,
   the last in a column. */
.sf-quick__singles a:nth-last-child(-n+2), .sf-quick__col a:last-child { border-bottom: 0; }
.sf-quick__singles:only-child a:nth-last-child(-n+3) { border-bottom: 0; }
.sf-quick__img { position: relative; flex: none; width: 72px; height: 72px; }
.sf-quick__img img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; }
/* In Shop Artwork, the Giclée prints the larger part of the panel, the
   other sections smaller beside them. */
.sf-quick__singles:not(:only-child) { flex: 1 1 0; }
/* Shop Gifts, the panel with no column: product photos, often tall, given
   a larger box so they read at a glance. */
.sf-quick__singles:only-child .sf-quick__img { width: 100%; height: 190px; }
.sf-quick__singles:only-child a { flex-direction: column; justify-content: flex-start; gap: 16px; text-align: center; }
/* A few products side by side in the one picture's place. */
.sf-quick__img--set { display: flex; gap: 6px; }
.sf-quick__img--set > span { position: relative; flex: 1 1 0; }
.sf-quick__col {
  flex: 1 1 0; align-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-content: start;
}
.sf-quick__col .sf-quick__head { grid-column: 1 / -1; }
.sf-quick__col a:last-child, .sf-quick__col a:nth-last-child(2) { border-bottom: 0; }
/* The same height as the buttons beside it. */
.sf-quick .sf-quick__search { margin-left: auto; width: 150px; height: 38px; }
.sf-ship { margin-bottom: 22px; }
@media (max-width: 700px) {
  .sf-quick__drop:hover .sf-quick__menu, .sf-quick__drop:has(:focus-visible) .sf-quick__menu { flex-direction: column; max-height: 70vh; overflow-y: auto; }
  .sf-quick__singles, .sf-quick__singles:only-child { grid-template-columns: 1fr; width: 100%; }
  .sf-quick__singles a:nth-last-child(-n+3), .sf-quick__singles:only-child a:nth-last-child(-n+3) { border-bottom: 1px solid var(--sf-rule); }
  .sf-quick__singles a:last-child, .sf-quick__singles:only-child a:last-child { border-bottom: 0; }
  .sf-quick__col { flex-basis: auto; width: 100%; padding-left: 0; border-left: 0; }
  .sf-quick__singles:not(:only-child) { flex-basis: auto; }
  .sf-quick__col { grid-template-columns: 1fr; }
  .sf-quick__col a:nth-last-child(2) { border-bottom: 1px solid var(--sf-rule); }
}

/* --- a row that slides: faded at an edge with more beyond it, and an arrow
   there to move it on. shop.js sets is-start / is-end as it moves. */
.sf-strip__slide { position: relative; }
.sf-strip__slide .sf-strip__row {
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent 100%);
}
.sf-strip__slide .sf-strip__row::-webkit-scrollbar { display: none; }
.sf-strip__slide:not(.is-start) .sf-strip__row { --fade-l: 90px; }
.sf-strip__slide:not(.is-end) .sf-strip__row { --fade-r: 90px; }
.sf-strip__arrow {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; cursor: pointer;
  background: var(--color-1); border: 1px solid var(--color-3); border-radius: 50%; color: var(--color-2);
}
.sf-strip__arrow:hover { border-color: var(--color-5); color: var(--color-5); }
.sf-strip__arrow[hidden] { display: none; }
.sf-strip__arrow--prev { left: 0; }
.sf-strip__arrow--next { right: 0; }
.sf-strip__arrow span {
  width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateX(-2px) rotate(-45deg);
}
.sf-strip__arrow--prev span { transform: translateX(2px) rotate(135deg); }
.sf-strip__slide.is-start .sf-strip__arrow--prev,
.sf-strip__slide.is-end .sf-strip__arrow--next { display: none; }

/* --- the picture book, on its own */
.sf-book { border-bottom: 1px solid var(--sf-rule); }
.sf-book__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.sf-book__img { display: block; }
.sf .sf-book__img img { display: block; width: 100%; max-width: 520px; height: auto; margin-left: auto; }
.sf-book__text { max-width: 520px; }
.sf-book__title { margin: 0 0 8px; font-family: var(--font-family-1); font-weight: 400; font-size: 34px; line-height: 1.15; color: var(--color-2); }
.sf-book__by { margin: 0 0 22px; font-family: var(--font-family-2); font-style: italic; font-size: 15px; color: var(--color-7); }
.sf-book__by a { color: var(--color-2); text-decoration: underline; }
.sf-book__by a:hover { color: var(--color-5); }
.sf-book__dek { margin: 0 0 22px; font-family: var(--font-family-1); font-size: 19px; line-height: 1.5; color: var(--color-2); }
.sf-book__price { margin: 0 0 18px; font-family: var(--font-family-2); font-size: 15px; letter-spacing: 0.04em; color: var(--color-7); }
.sf-book__button {
  display: inline-block; padding: 11px 22px; border: 1px solid var(--color-3); border-radius: 3px;
  font-family: var(--font-family-2); font-size: 14px; letter-spacing: 0.06em; color: var(--color-2);
}
.sf-book__button:hover { border-color: var(--color-5); color: var(--color-5); }
/* The book's other pictures in a row under it, whole and one height. */
.sf-book__more { display: flex; gap: 10px; margin-top: 36px; }
.sf-book__more a { flex: var(--r, 1) 1 0; min-width: 0; }
.sf .sf-book__more img { display: block; width: 100%; height: auto; border-radius: 3px; }
@media (max-width: 700px) {
  .sf-book__inner { grid-template-columns: 1fr; gap: 24px; }
  .sf .sf-book__img img { margin: 0 auto; }
  .sf-book__title { font-size: 28px; }
  .sf-book__more { gap: 8px; margin-top: 24px; }
}

/* --- the shop's sections on a composed page (the home page): the shop's own
   spacing and rules, not a block's padding on top of them. */
#composed .b.b-shop-section { padding: 0; max-width: var(--page-width); text-align: left; }
#composed .b-shop-section .sf-feature-grid { margin-top: 48px; }
#composed .b-shop-section + .b-shop-section .sf-strip { padding-top: 40px; padding-bottom: 48px; }

/* The About menu: three links, so a narrow panel under its own button rather
   than one across the bar. */
.sf-quick__drop--small { position: relative; }
.sf-quick__drop--small .sf-quick__menu { right: auto; min-width: 240px; padding: 6px 18px; }
.sf-quick__list { display: flex; flex-direction: column; width: 100%; }
.sf-quick__list a { padding: 12px 0; font-size: 15px; }
.sf-quick__list a + a { border-top: 1px solid var(--sf-rule); }
.sf-quick__list a { border-bottom: 0; }

/* A section with only a few products: cards of the usual size, centred. */
.sf-section--few .sf-grid { grid-template-columns: repeat(var(--n), minmax(0, 280px)) !important; justify-content: center; }
.sf-section--few .sf-item { grid-column: auto !important; grid-row: auto !important; }
@media (max-width: 700px) {
  .sf-section--few .sf-grid { grid-template-columns: repeat(min(var(--n), 2), minmax(0, 1fr)) !important; }
}

/* --- visit the gallery: the essentials beside four of the Visit page's
   photographs, in a grid of two by two, the first of them large */
.sf-visit__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.sf-visit__title { margin: 0 0 8px; font-family: var(--font-family-1); font-weight: 400; font-size: 30px; line-height: 1.2; color: var(--color-2); }
.sf-visit__when { margin: 0 0 20px; font-family: var(--font-family-2); font-style: italic; font-size: 15px; color: var(--color-6); }
.sf-visit__dek { margin: 0 0 20px; font-family: var(--font-family-1); font-size: 18px; line-height: 1.5; color: var(--color-2); }
.sf-visit__details { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 24px; font-family: var(--font-family-2); font-size: 14px; }
.sf-visit__details dt { color: var(--color-7); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; padding-top: 3px; }
.sf-visit__details dd { margin: 0; color: var(--color-2); }
.sf-visit__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 0; }
.sf-visit__more { font-family: var(--font-family-2); font-size: 14px; color: var(--color-7); }
.sf-visit__more:hover { color: var(--color-5); }
.sf-visit__photos { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 10px; aspect-ratio: 4 / 3; }
.sf-visit__photos a { display: block; overflow: hidden; border-radius: 3px; min-height: 0; }
.sf-visit__photos a:first-child { grid-row: 1 / span 3; }
.sf .sf-visit__photos img { display: block; width: 100%; height: 100%; object-fit: cover !important; }
@media (max-width: 900px) {
  .sf-visit__inner { grid-template-columns: 1fr; gap: 28px; }
  .sf-visit__photos { order: -1; }
}

/* The menu bar on a phone: the search across the top, then the three menus
   side by side in one row, each a third, so none wraps on its own beside the
   search; and every panel, About's too, the bar's full width under them. */
@media (max-width: 700px) {
  .sf-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
  .sf-quick .sf-quick__search { order: -1; grid-column: 1 / -1; width: 100%; margin: 0; }
  .sf-quick__drop, .sf-quick__drop--small { position: static; }
  .sf-quick__link { width: 100%; justify-content: center; gap: 6px; padding: 0 8px; font-size: 14px; letter-spacing: 0.02em; white-space: nowrap; }
  .sf-quick__drop--small .sf-quick__menu { right: 0; min-width: 0; }
}

/* With no outline at rest, the buttons' words line up with the page's left
   edge: the bar reaches out by a button's padding either side, the search
   drawn back in on the right, and the panels span the bar as before. */
@media (min-width: 701px) {
  .sf-quick { margin-left: -16px; margin-right: -16px; }
  /* Its words and magnifier end at the page's right edge: the bar's 16px
     reach, less the search's own 12px padding. */
  .sf-quick .sf-quick__search { width: auto; margin-right: 4px; }
}
/* The search: no outline, even under the pointer, which turns it orange; and no
   mark left by a click. */
.sf-quick .sf-quick__search { border-color: transparent; color: var(--color-2); font-size: 15px; letter-spacing: 0.04em; }
@media (max-width: 700px) { .sf-quick .sf-quick__search { font-size: 14px; letter-spacing: 0.02em; } }
/* On the same line as the menus' words, which are not nudged down as the
   artwork page's search is to sit level with its own menus. */
.sf-quick .sf-quick__search .artworks-search__words { transform: none; }
@media (min-width: 701px) {
  /* And the magnifier brought up to the word, rather than the word down to it. */
  .sf-quick .sf-quick__search .menu__magnifier { transform: translateY(-2px); }
}
.sf-quick .sf-quick__search:hover { border-color: transparent; color: var(--color-5); }
.sf-quick .sf-quick__search:focus:not(:focus-visible) { outline: none; }

/* More room between the shop front's sections: half again what it was. */
.sf-row { padding: 64px 0 72px; }
.sf-feature-grid { padding-bottom: 72px; }
.sf-strip { padding-top: 64px; }
.sf-strip__group + .sf-strip__group { margin-top: 64px; }
@media (max-width: 700px) {
  .sf-row { padding: 44px 0 52px; }
  .sf-feature-grid { padding-bottom: 52px; }
  .sf-strip { padding-top: 44px; }
  .sf-strip__group + .sf-strip__group { margin-top: 44px; }
}

/* The menu bar on a phone, now its buttons have no outline: one row like the
   wide page's, the menus from the left edge, the search at the right as its
   magnifier alone (its word kept for screen readers). Panels open the bar's
   full width under it. */
@media (max-width: 700px) {
  .sf-quick { display: flex; flex-wrap: nowrap; gap: 0; margin-left: -10px; margin-right: -10px; }
  .sf-quick__link { width: auto; padding: 0 10px; font-size: 14px; }
  .sf-quick .sf-quick__search { order: 0; grid-column: auto; width: auto; margin: 0 0 0 auto; padding: 0 10px; height: 38px; }
  .sf-quick .sf-quick__search .artworks-search__words {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .sf-quick .sf-quick__search .menu__magnifier { width: 12px; height: 12px; }
}

/* Shop Gifts' panel as a ruled grid: no gap between the columns, so each
   row's rule runs the panel's whole width, edge to edge, and a rule between
   the columns too. */
@media (min-width: 701px) {
  .sf-quick__menu:has(> .sf-quick__singles:only-child) { padding: 0; }
  .sf-quick__singles:only-child { column-gap: 0; width: 100%; }
  .sf-quick__singles:only-child a { padding: 28px 32px 24px; }
  .sf-quick__singles:only-child a:not(:nth-child(3n+1)) { border-left: 1px solid var(--sf-rule); }
}

/* On a touch screen a tap is a hover that never ends, so the menus there open
   and close by tapping instead: shop.js sets .is-open, and hover opens
   nothing. */
@media (hover: none) {
  .sf-quick__drop:hover .sf-quick__menu { display: none; }
  .sf-quick__drop:hover .sf-quick__link {
    color: var(--color-2); background: none; height: 38px; padding-bottom: 0; margin-bottom: 0;
    border-color: transparent; border-radius: 3px;
  }
  .sf-quick .sf-quick__drop.is-open .sf-quick__menu { display: flex; }
  .sf-quick .sf-quick__drop.is-open .sf-quick__link {
    color: var(--color-5); background: var(--color-1); border-color: var(--sf-outline);
    height: 43px; padding-bottom: 5px; margin-bottom: -5px;
    border-bottom-color: var(--color-1); border-radius: 3px 3px 0 0;
  }
}
@media (hover: none) and (max-width: 700px) {
  .sf-quick .sf-quick__drop.is-open .sf-quick__menu { flex-direction: column; max-height: 70vh; overflow-y: auto; }
}

/* The first section under the menu bar starts close under it: the room above
   a section is for the rule between it and the one before, and here there is
   none. */
.sf-mast > .sf-row:first-child { padding-top: 16px; }