/* Open Sans, self-hosted (#11): the variable font's Latin subset covers every weight the
   site uses (300-700). SIL OFL 1.1, see /lib/open-sans/OFL.txt. The root font size stays
   the browser's 16px at every width, as on the old site, so the rem sizes below match it. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("../lib/open-sans/open-sans-latin-wght-normal.woff2") format("woff2-variations"),
       url("../lib/open-sans/open-sans-latin-wght-normal.woff2") format("woff2");
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* Contact form honeypot (#10): off-screen rather than display:none, which some bots skip. */
.contact-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Bootstrap 4's grid, which the old site was built on (#11): containers stop at 1140px
   (Bootstrap 5 adds a 1320px step at 1400px) and gutters are 30px, 15px a side, rather
   than 1.5rem. .container-xxl is left alone (it is fluid below 1400px). */
@media (min-width: 1400px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1140px;
  }
}

.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl,
.container-xxl, .row {
  --bs-gutter-x: 30px;
}

/* Bootstrap's gutter utilities set the same variable on a .row and must still win, so the
   plain ones are restated after the rule above. The responsive ones (g-md-3, gx-lg-0 etc.)
   are NOT restated, so the .row rule above silently beats them: do not use them in views,
   or restate them here first. A test (ViewConventionsTests) fails if a view uses one. */
.g-0, .gx-0 { --bs-gutter-x: 0; }
.g-1, .gx-1 { --bs-gutter-x: 0.25rem; }
.g-2, .gx-2 { --bs-gutter-x: 0.5rem; }
.g-3, .gx-3 { --bs-gutter-x: 1rem; }
.g-4, .gx-4 { --bs-gutter-x: 1.5rem; }
.g-5, .gx-5 { --bs-gutter-x: 3rem; }

/* Ported from the old React site's app.css (#11): typography, colours, the nav, the blue
   title bar with its right-aligned breadcrumb, tag badges, the footer. Rules for markup
   the site no longer has (the old Explore list/detail/buttons, the map caption) were not
   ported; hiding Mapbox's attribution was dropped (Mapbox requires it). */
body {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.4;
  font-weight: 300;
  margin-top: 0;
}

h1 {
  font-size: 1.5rem;
  margin-bottom: 0;
}

h2 {
  font-weight: 500;
  font-size: 1.2rem;
}

h3 {
  font-weight: 500;
  font-size: 1rem;
}

/* Link and nav colours through Bootstrap's variables rather than `color`, so its :hover,
   .active and open-dropdown (.show) states still change them. */
:root {
  --bs-link-color: #0077c0;
  --bs-link-color-rgb: 0, 119, 192;
  --bs-link-hover-color: #005a92;
  --bs-link-hover-color-rgb: 0, 90, 146;
}

/* Bootstrap 4's link look where the old site had it: no underline until hover or keyboard
   focus. Elsewhere links keep Bootstrap 5's underline. */
.breadcrumb a, .awards h2 a, .not-found a, .footer a {
  text-decoration: none;
}

.breadcrumb a:hover, .breadcrumb a:focus-visible,
.awards h2 a:hover, .awards h2 a:focus-visible,
.not-found a:hover, .not-found a:focus-visible,
.footer a:hover, .footer a:focus-visible {
  text-decoration: underline;
}

/* The old site's nav: grey links, darker on hover, near-black for the current section and
   the open menu. */
.navbar {
  --bs-navbar-color: #555555;
  --bs-navbar-hover-color: rgba(0, 0, 0, 0.7);
  --bs-navbar-active-color: rgba(0, 0, 0, 0.9);
}

/* Hovered/focused items take the site blue (4.53:1 on the hover grey); the current
   category is white on the site blue (4.77:1). */
.dropdown-menu {
  --bs-dropdown-link-hover-color: #0077c0;
  --bs-dropdown-link-active-bg: #0077c0;
}

/* Primary buttons in the site blue rather than Bootstrap's: white text is 4.77:1 on
   #0077c0, 7.3:1 on the hover #005a92 and 8.9:1 on the pressed #004d7d. */
:root {
  --bs-primary: #0077c0;
  --bs-primary-rgb: 0, 119, 192;
}

.btn-primary {
  --bs-btn-bg: #0077c0;
  --bs-btn-border-color: #0077c0;
  --bs-btn-hover-bg: #005a92;
  --bs-btn-hover-border-color: #005a92;
  --bs-btn-focus-shadow-rgb: 0, 119, 192;
  --bs-btn-active-bg: #004d7d;
  --bs-btn-active-border-color: #004d7d;
  --bs-btn-disabled-bg: #0077c0;
  --bs-btn-disabled-border-color: #0077c0;
}

.badge {
  background-color: #0077c0;
  color: white;
}

.small {
  font-size: 0.7rem;
}

/* Inline SVG icons (<icon name="..." />, IconTagHelper): sized and aligned like the old
   site's Font Awesome icons, one text line high, in the text's colour. */
.icon {
  display: inline-block;
  height: 1em;
  width: auto;
  overflow: visible;
  vertical-align: -0.125em;
}

/* Fixed width (the old site's 14px), centring the glyph, so the text after a column of
   icons lines up. */
.icon-fw {
  width: 14px;
}

.navbar-nav .nav-link {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.8rem;
}

/* The current section is underlined as well as near-black: the colour alone is only
   2.4:1 against the other links' #555, and close to the hover colour (WCAG 1.4.1). Not on
   hover. */
.navbar-nav .nav-link.active {
  text-decoration: underline 2px;
  text-underline-offset: 0.4em;
}

.dropdown-item {
  font-size: 0.9rem;
}

/* Full-bleed like the old site, whose bar sat in a fluid container: the background runs
   to the window edges, painted in one piece by a filled border image outset sideways
   (outsets add no scrollable overflow, and one paint leaves no seam at the container
   edge), while the bar loses its own side padding so its inner .container lines the
   title and breadcrumb up with the page's content. */
.titleBar {
  background-color: #0077c0;
  padding-left: 0;
  padding-right: 0;
  border-image: linear-gradient(#0077c0 0 0) fill 0 / / 0 100vmax;
}

/* No side padding: the breadcrumb ends at the content edge, as the title starts at it. */
.breadcrumb {
  justify-content: flex-end;
  padding: 0.5rem 0;
  margin-top: 0;
  margin-bottom: 0;
  background-color: transparent;
}

.breadcrumb-item a {
  color: white;
}

/* The old #82cfff is 2.8:1 on the bar; this pale blue is 4.57:1 (WCAG AA 4.5:1). */
.breadcrumb-item.active {
  color: #f5fbff;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: white;
}

/* The old site's footer: small grey text and links, headings in bold capitals. Two
   columns from 576px, four from 992px (the grid classes in _Layout). #6c757d rather than
   the old #777, which is 4.48:1 on white, just under WCAG AA; this is 4.69:1. */
.footer, .footer a {
  font-size: 0.85rem;
  color: #6c757d;
}

.footer-head {
  margin: 0;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  text-transform: uppercase;
}

/* ---- Photo frame ---------------------------------------------------------------------
   The old site's ShadowImage (`img-fluid shadow p-3 bg-white rounded`): the photo inset in
   a white, rounded frame with a soft drop shadow, on gallery tiles, the image detail, home
   tiles, awards, the About portrait and the Explore detail. Values are the old site's
   computed ones (Bootstrap's p-3, .shadow and .rounded). On an <img> the padding sits
   inside its border-box width, so an img-fluid photo never overflows its column. */
.photo-frame {
  padding: 1rem;
  background-color: #fff;
  border-radius: 0.25rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
/* ---- End photo frame ---------------------------------------------------------------- */

/* ---- Print configurator ("Buy a print", #22) -----------------------------------------
   Under the framed photo on an image's detail page: material tiles on the left, size rows
   with prices on the right, stacked below 992px. Design #20 ("Gallery placard") with
   variant B's edition badge and large price. Every control is at least 44px tall; focus
   rings match the site's buttons. The tiles are links and the radios a plain form, so it
   all works without JavaScript. */
.configurator {
  margin: 1.5rem 0 2rem;
}

.configurator-heading {
  font-size: 1.5rem;
  font-weight: 300;
  margin-bottom: 0.75rem;
}

.configurator-panel {
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  padding: 1.25rem;
}

/* Variant B's badge: site blue on white, bordered. */
.configurator-edition {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid #0077c0;
  border-radius: 0.25rem;
  color: #0077c0;
  font-weight: 600;
}

.configurator-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #555555;
  margin-bottom: 0.5rem;
}

/* A 2x2 grid at every width, so on a phone the sizes are not pushed below four tall
   tiles. */
.configurator-materials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.configurator-material {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  min-height: 44px;
  padding: 0.6rem;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  color: #212529;
  text-decoration: none;
}

.configurator-material:hover {
  border-color: #0077c0;
  color: #212529;
}

.configurator-material.selected {
  border: 2px solid #0077c0;
  padding: calc(0.6rem - 1px);
}

.configurator-material:focus-visible, .configurator-quote-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.configurator-material-name {
  display: block;
  font-size: 1rem;
  font-weight: 600;
}

.configurator-material-text {
  display: block;
  color: #555555;
}

/* Small CSS impressions of each surface, decorative only (aria-hidden). */
.configurator-swatch {
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid #dee2e6;
  border-radius: 0.2rem;
}

/* Phones: a smaller swatch, and below 400px no descriptor, so each tile stays compact
   (still at least 44px tall). */
@media (max-width: 575.98px) {
  .configurator-material {
    gap: 0.5rem;
  }

  .configurator-swatch {
    width: 1.75rem;
    height: 1.75rem;
  }
}

@media (max-width: 399.98px) {
  .configurator-material-text {
    display: none;
  }
}

.swatch-metal {
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 3px),
              linear-gradient(135deg, #8e9399 0%, #e9ecef 45%, #a3a8ae 60%, #d5d9dd 100%);
}

.swatch-acrylic {
  background: linear-gradient(135deg, #ffffff 0%, #eef3f7 48%, #cfd8df 50%, #f7fafc 100%);
}

.swatch-canvas {
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 3px),
              repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 3px),
              #f3efe6;
}

.swatch-fine-art-paper {
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #f6f4ef 70%, #ece9e2 100%);
}

@media (min-width: 992px) {
  .configurator-sizes {
    border-left: 1px solid #dee2e6;
  }
}

.configurator-form fieldset {
  margin: 0;
}

/* The whole row is the radio's label, so all of it is the touch target. */
.configurator-size {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.5rem 0;
  border-bottom: 1px solid #dee2e6;
  font-size: 1rem;
  cursor: pointer;
}

.configurator-size .form-check-input {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0;
}

.configurator-size .form-check-input:checked {
  background-color: #0077c0;
  border-color: #0077c0;
}

.configurator-size:has(input:checked) {
  font-weight: 600;
}

.configurator-open {
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid #6c757d;
  border-radius: 0.2rem;
  color: #555555;
  font-size: 0.75rem;
  font-weight: 400;
  white-space: nowrap;
}

.configurator-size-price {
  margin-left: auto;
}

.configurator-price {
  margin: 1rem 0 0.25rem;
}

.configurator-price-amount {
  display: block;
  font-size: 2.25rem;
  font-weight: 300;
  line-height: 1.2;
}

.configurator-price-print, .configurator-shipping {
  color: #555555;
}

.configurator-shipping {
  margin-bottom: 0.5rem;
}

.configurator-quote {
  margin: 0;
}

/* A link in looks, a submit in fact: it sends the selection to the quote form. The
   padding makes a 44px target; the equal negative margin keeps it from spreading the
   line it sits in. */
.configurator-quote-button {
  padding: 0.75rem 0;
  margin: -0.75rem 0;
  border: 0;
  background: none;
  color: #0077c0;
  text-decoration: underline;
}

.configurator-quote-button:hover {
  color: #005a92;
}

.materials-about {
  margin-top: 1rem;
}

/* Padded to a 44px target; display stays list-item so the disclosure triangle shows. */
.materials-about summary {
  padding: 0.75rem 0;
  color: #0077c0;
  font-weight: 600;
  cursor: pointer;
}

.materials-explainer dt {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 0.75rem;
}

.materials-explainer dd {
  margin: 0;
}

.materials-explainer p {
  margin-bottom: 0.25rem;
}

.materials-explainer-spec {
  color: #555555;
  font-style: italic;
}
/* ---- End print configurator --------------------------------------------------------- */

/* ---- Shop (/shop, #21) ------------------------------------------------------------------
   Design #20's "Editorial": a framed hero with its caption and button, a Featured grid of
   framed cards (name and from-price inside the frame), a dark navy Limited editions band
   running edge to edge, and Shop by category tiles that jump to each category's section.
   White on the navy #0b2545 is 15.6:1; the pale blue price on it, 13:1. */
.shop-section {
  margin-top: 2.5rem;
}

.shop-heading {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 500;
}

.shop-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background-color: #222;
}

/* The hero's photo is its own frame: keep the frame's white padding. */
.shop-photo.photo-frame {
  background-color: #fff;
}

.shop-hero-caption {
  margin-bottom: 1.25rem;
  font-size: 1.35rem;
  font-weight: 400;
}

.shop-hero-open {
  margin: -0.75rem 0 1.25rem;
  color: #555;
}

.shop-hero-button {
  padding: 0.6rem 1.5rem;
}

.shop-card {
  display: block;
  height: 100%;
  color: #212529;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
}

.shop-card:hover, .shop-card:focus-visible {
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.25);
}

.shop-card:focus-visible, .shop-category-tile:focus-visible, .shop-limited-item:focus-visible {
  outline: 3px solid #0077c0;
  outline-offset: 3px;
}

.shop-limited-item:focus-visible {
  outline-color: #fff;
}

.shop-card-name {
  display: block;
  margin-top: 0.6rem;
  font-weight: 600;
}

.shop-card-price {
  display: block;
  color: #555;
}

/* Edge to edge from inside the container, painted like .titleBar (a filled border image
   outset sideways, which adds no scrollable overflow). */
.shop-limited {
  margin-top: 2.5rem;
  padding: 2rem 0;
  color: #fff;
  background-color: #0b2545;
  border-image: linear-gradient(#0b2545 0 0) fill 0 / / 0 100vmax;
}

.shop-limited-heading {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 300;
}

.shop-limited-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  color: #fff;
  text-decoration: none;
}

.shop-limited-photo {
  flex: 0 0 60%;
  width: 60%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  padding: 0.4rem;
  background-color: #fff;
}

.shop-limited-text span {
  display: block;
}

.shop-limited-name {
  font-weight: 600;
}

.shop-limited-price {
  margin-top: 0.5rem;
  color: #cfe9ff;
}

.shop-limited-item:hover .shop-limited-name {
  text-decoration: underline;
}

.shop-category-tile {
  position: relative;
  display: block;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  container-type: inline-size;
}

.shop-category-tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background-color: #222;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.shop-category-tile:hover img, .shop-category-tile:focus-visible img {
  transform: scale(1.03);
  filter: brightness(0.85);
}

/* Bottom left, as in the design; the gradient keeps white text readable on bright photos. */
.shop-category-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2rem 1rem 0.75rem;
  font-size: min(1.8rem, 9vw); /* fallback where cqi is unsupported */
  font-size: min(1.8rem, 9cqi);
  font-weight: 500;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* The tiles jump here; leave a little air above the heading. */
.shop-category {
  scroll-margin-top: 1rem;
}

.shop-category-gallery {
  margin-left: 0.75rem;
  font-size: 0.85rem;
  font-weight: 400;
}

.shop-empty {
  padding: 2rem 0;
  font-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .shop-card, .shop-category-tile img {
    transition: none;
  }

  .shop-category-tile:hover img, .shop-category-tile:focus-visible img {
    transform: none;
  }
}
/* ---- End shop ------------------------------------------------------------------------ */

/* ---- Lookbook (/lookbook, #72) -----------------------------------------------------------
   Design #20's "Full-bleed slideshow" on a tablet or laptop at a booth: the print fills
   the screen, a translucent strip along the bottom carries the text and a large QR code on
   white (quiet zone included) for phones to scan. Without script the slides stack, one
   screen each; .lookbook-js (site.js) stacks them in place and shows one at a time. */
.kiosk {
  background-color: #000;
}

.lookbook {
  position: relative;
  color: #fff;
  background-color: #000;
}

.lookbook-slide {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.lookbook-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lookbook-js .lookbook-slides {
  position: relative;
  height: 100vh;
  height: 100svh;
}

.lookbook-js .lookbook-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s;
}

.lookbook-js .lookbook-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.lookbook-mark {
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  z-index: 2;
  padding: 0.3rem 0.6rem;
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: 0.375rem;
}

.lookbook-mark img {
  display: block;
  width: 80px;
  height: auto;
}

.lookbook-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem 3rem 2.5rem;
  background-color: rgba(4, 16, 32, 0.78);
}

.lookbook-title {
  margin: 0 0 0.25rem;
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 400;
}

.lookbook-location, .lookbook-price {
  margin: 0 0 0.4rem;
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
}

.lookbook-pill {
  display: inline-block;
  margin: 0.5rem 0 0;
  padding: 0.3rem 0.8rem;
  color: #111;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  font-weight: 600;
  background-color: #fff;
  border-radius: 0.375rem;
}

.lookbook-order {
  flex: none;
  text-align: right;
}

.lookbook-qr {
  display: inline-block;
  width: clamp(150px, 17vw, 240px);
  padding: 0.5rem;
  background-color: #fff;
  border-radius: 0.5rem;
}

.lookbook-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.lookbook-scan {
  margin: 0.75rem 0 0.25rem;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
}

.lookbook-url {
  margin: 0;
  color: #9fd3ff;
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  overflow-wrap: anywhere;
}

.lookbook-dots {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  z-index: 3;
  display: flex;
  gap: 0.25rem;
  transform: translateX(-50%);
}

.lookbook-dots[hidden] {
  display: none;
}

/* A 32px target around a 12px dot. */
.lookbook-dot {
  position: relative;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
}

.lookbook-dot::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.65);
}

.lookbook-dot[aria-current="true"]::before {
  background-color: #2b9bea;
}

.lookbook-dot:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -4px;
  border-radius: 50%;
}

.lookbook-status {
  position: absolute;
  top: 1.25rem;
  right: 11rem;
  z-index: 2;
  margin: 0;
  padding: 0.3rem 0.8rem;
  color: #fff;
  background-color: rgba(4, 16, 32, 0.78);
  border-radius: 0.375rem;
}

.lookbook-toggle {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  z-index: 3;
  min-width: 9rem;
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  color: #fff;
  font: inherit;
  background-color: rgba(4, 16, 32, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 0.375rem;
}

.lookbook-toggle:hover {
  background-color: rgba(4, 16, 32, 0.95);
}

.lookbook-toggle:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.lookbook-toggle[hidden] {
  display: none;
}

.lookbook-open {
  margin: 0 0 0.4rem;
  color: #d6e6f5;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
}

.lookbook-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
  color: #212529;
  text-align: center;
  background-color: #fff;
}

.lookbook-empty h1 {
  margin: 1.5rem 0 0.5rem;
}

/* Portrait phones and narrow windows: the QR code goes under the text. */
@media (max-width: 767.98px) {
  .lookbook-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1rem 2.75rem;
  }

  .lookbook-order {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lookbook-js .lookbook-slide {
    transition: none;
  }
}
/* ---- End lookbook ---------------------------------------------------------------------- */