/*
Theme Name: Pat Bisson Studio
Theme URI: https://www.patbissonstudio.com/
Author: Pat Bisson Studio
Description: A minimal WooCommerce theme sharing the portfolio site's design system.
Version: 1.8.1
Requires at least: 6.6
Requires PHP: 8.1
Text Domain: pat-bisson-studio
*/

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--pbs-paper);
  color: var(--pbs-ink);
  font-family: var(--pbs-body-font);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.pbs-site-header {
  position: sticky;
  /*
   * Above .pbs-mobile-nav (40) so the bar, and the toggle inside it, stay on
   * top of the menu it opens. The filter sheet sits above both.
   */
  z-index: 50;
  top: 0;
  border-bottom: 1px solid var(--pbs-header-line);
  background: rgb(255 255 255 / 94%);
  backdrop-filter: blur(24px);
}
.pbs-header-inner {
  position: relative;
  /*
   * Above .pbs-mobile-nav (40). Both live inside .pbs-site-header, so this is
   * what keeps the bar and its toggle on top of the panel they sit over.
   */
  z-index: 50;
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px var(--pbs-page-gutter);
}
.pbs-brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 12px; }
.pbs-brand img { width: 52px; height: 52px; object-fit: contain; }
.pbs-brand span { font: 300 23px/1.7 var(--pbs-heading); letter-spacing: .015em; }
.pbs-nav { position: absolute; left: 50%; display: flex; align-items: center; justify-content: center; transform: translateX(-50%); }
.pbs-nav ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.pbs-nav li + li { border-left: 1px solid var(--pbs-ink); }
.pbs-nav a {
  display: block;
  padding: 2px clamp(13px, 2vw, 27px);
  color: var(--pbs-nav);
  font-size: 14px;
  letter-spacing: .035em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .2s ease;
}
.pbs-nav a:hover { color: var(--pbs-nav-hover); }
.pbs-nav a[aria-current="page"], .pbs-nav .current-menu-item > a { color: var(--pbs-nav-current); }
.pbs-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 18px; font: 400 12px/1.4 var(--pbs-accent-font); letter-spacing: .08em; text-transform: uppercase; }
.pbs-language-switcher { display: inline-flex; align-items: center; gap: 8px; color: var(--pbs-nav-current); font: 400 10px/1.4 var(--pbs-accent-font); letter-spacing: .1em; }
.pbs-language-switcher > span { color: var(--pbs-nav-separator); }
.pbs-language-switcher a { padding-bottom: 2px; border-bottom: 1px solid transparent; }
.pbs-language-switcher a[aria-current="page"] { border-bottom-color: var(--pbs-ink); color: var(--pbs-ink); }
.pbs-cart-count { color: var(--pbs-muted); }

/* Hamburger -----------------------------------------------------------------
 * Only exists below 1000px, and only the matching icon is painted: both SVGs
 * ship in the markup so the toggle never has to be re-rendered to swap them.
 */
.pbs-nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 8px;
  color: var(--pbs-ink);
  cursor: pointer;
}
.pbs-nav-toggle__icon--close { display: none; }

/* Full screen mobile menu ----------------------------------------------------
 * Mirrors the portfolio site: a fixed black panel covering the viewport, with
 * the header bar floating above it. Hidden by default so it is out of the
 * accessibility tree until the toggle opens it.
 */
.pbs-mobile-nav { display: none; }

/* Shared by the mobile menu and the filter sheet. Both are full viewport
   overlays, and both scroll internally, so locking the page behind them does
   not trap their own content. */
body.pbs-no-scroll { overflow: hidden; }

.pbs-main { min-height: 60vh; }
.pbs-container { width: min(100% - 44px, var(--pbs-content-width)); margin-inline: auto; }
.pbs-page { padding-block: clamp(48px, 7vw, 92px); }
.pbs-eyebrow { margin: 0 0 14px; color: var(--pbs-eyebrow); font: 400 10px/1.5 var(--pbs-accent-font); letter-spacing: .19em; text-transform: uppercase; }
.pbs-title { margin: 0; font: 300 clamp(34px, 5vw, 58px)/1.12 var(--pbs-heading); }
.pbs-intro { max-width: 700px; margin: 18px 0 0; color: var(--pbs-body); font-size: 15px; line-height: 1.9; }
.pbs-section-heading { margin: 0 0 28px; font: 300 clamp(24px, 3vw, 36px)/1.25 var(--pbs-heading); }
.pbs-site-footer { border-top: 1px solid var(--pbs-night-line); background: var(--pbs-night); color: white; }
.pbs-footer-columns { display: grid; width: min(100%, 1220px); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 5vw, 80px); margin-inline: auto; padding: clamp(46px, 6vw, 80px) clamp(22px, 4vw, 62px); }
.pbs-footer-label { margin: 0 0 14px; color: var(--pbs-night-muted); font: 400 10px/1.5 var(--pbs-accent-font); letter-spacing: .19em; text-transform: uppercase; }
.pbs-footer-heading { margin: 0 0 8px; font: 400 22px/1.35 var(--pbs-heading); }
.pbs-footer-copy { max-width: 300px; margin: 0; color: var(--pbs-night-copy); font-size: 12px; line-height: 1.75; }
.pbs-footer-socials { display: grid; max-width: 320px; }
.pbs-footer-socials a { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--pbs-night-line); padding: 7px 0; color: #fff; font-size: 12px; transition: color .2s ease; }
.pbs-footer-socials a:hover { color: var(--pbs-night-muted); }
.pbs-footer-bottom { border-top: 1px solid var(--pbs-night-line); }
/* Three columns with equal outer tracks, so the middle item sits on the page's
   centre line whatever the widths of the legal links and the back-to-top link. */
.pbs-footer-bottom-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px; padding: 20px clamp(22px, 4vw, 62px); color: var(--pbs-night-muted); font: 400 10px/1.6 var(--pbs-accent-font); letter-spacing: .05em; }
.pbs-footer-bottom-inner > :last-child { justify-self: end; }
.pbs-footer-bottom-inner a { display: inline-flex; align-items: center; gap: 4px; transition: color .2s ease; }
.pbs-footer-bottom-inner a:hover { color: #fff; }
.pbs-footer-legal { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: 13px; row-gap: 4px; }
.pbs-footer-sep { color: var(--pbs-night-faint); }

.pbs-home-intro { padding-bottom: 34px; }
.pbs-home-products { padding-block: 30px clamp(56px, 8vw, 104px); }
.woocommerce .woocommerce-result-count, .woocommerce .woocommerce-ordering { margin: 0; }
.woocommerce .woocommerce-ordering select, .woocommerce div.product form.cart .variations select { min-height: 42px; border: 1px solid var(--pbs-line); border-radius: 0; background: white; padding: 8px 32px 8px 12px; }
.woocommerce ul.products { display: grid; margin: 0; padding: 0; list-style: none; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none; }
/*
 * The loop is a CSS grid, so the cells are sized by `grid-template-columns` and
 * every product should fill its track.
 *
 * WooCommerce sizes them itself with `.woocommerce ul.products.columns-3
 * li.product { width: 30.75% }`, which is one class more specific than a plain
 * `.woocommerce ul.products li.product { width: auto }` and therefore wins. A
 * percentage width inside a grid track resolves against the track, not the
 * container, so each card rendered at 30.75% of an already-sized column and the
 * grid collapsed to narrow tiles with large gaps.
 *
 * `[class*="columns-"]` matches the same attribute WooCommerce's own
 * smallscreen stylesheet uses to reach every column count, which puts this
 * selector at equal specificity. The theme stylesheet loads after WooCommerce's,
 * so equal specificity settles it in the theme's favour.
 */
.woocommerce ul.products[class*="columns-"] li.product { float: none; width: auto; margin: 0; }
/*
 * WooCommerce ships its own button colours, and the `.alt` variants of its selectors
 * carry enough specificity (`#respond input#submit.alt`) to beat a plain
 * `.woocommerce button.button`. Mirroring the `.alt` class here keeps the ink
 * button styling without resorting to `!important`.
 */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .button.alt,
.woocommerce a.button,
.woocommerce a.button.alt,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce input.button,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce #respond input#submit.alt,
.pbs-button {
  min-height: 44px;
  border: 1px solid var(--pbs-ink);
  border-radius: 0;
  background: var(--pbs-ink);
  padding: 12px 18px;
  color: white;
  font: 400 10px/1.3 var(--pbs-accent-font);
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.woocommerce ul.products li.product .button { margin-top: 12px; }
.woocommerce .button:hover,
.woocommerce .button.alt:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce #respond input#submit.alt:hover,
.pbs-button:hover { border-color: var(--pbs-ink); background: white; color: var(--pbs-ink); }
.woocommerce span.onsale { min-width: auto; min-height: auto; border-radius: 0; background: var(--pbs-ink); padding: 7px 11px; font: 400 10px/1.2 var(--pbs-accent-font); letter-spacing: .1em; }
.woocommerce div.product div.images, .woocommerce div.product div.summary { float: none; width: auto; margin: 0; }
.woocommerce div.product .product_title { margin: 0 0 12px; }
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.woocommerce div.product form.cart div.quantity { float: none; }
.woocommerce .quantity .qty { border: 1px solid var(--pbs-line); border-radius: 0; }
.woocommerce div.product .product_meta { color: #666; font-size: 12px; }
.woocommerce table.shop_table { border-color: var(--pbs-line); border-radius: 0; }
.woocommerce table.shop_table th { font: 400 11px/1.4 var(--pbs-accent-font); letter-spacing: .08em; text-transform: uppercase; }
.woocommerce table.shop_table td { border-color: var(--pbs-line); }
/* Form fields ----------------------------------------------------------------
   Text fields, native selects and WooCommerce's searchable selects (selectWoo,
   used for country and province) share one box: square, 46px, line grey, ink on
   focus. selectWoo ships its own rounded 28px box with a dark border, so each of
   its parts is reset here. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .input-text {
  min-height: 46px;
  border: 1px solid var(--pbs-line);
  border-radius: 0;
  background: var(--pbs-paper);
  padding: 11px 14px;
  color: var(--pbs-ink);
  font-size: 15px;
  /* 22px line + 2 x 11px padding + 2 x 1px border = 46px, the selects' height. */
  line-height: 22px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.woocommerce form .form-row select {
  appearance: none;
  background: var(--pbs-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23080808' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  padding-right: 40px;
}
.woocommerce form .form-row input.input-text:hover,
.woocommerce form .form-row textarea:hover,
.woocommerce form .form-row select:hover,
.select2-container--default .select2-selection--single:hover { border-color: var(--pbs-muted); }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--pbs-ink);
  outline: none;
  box-shadow: 0 0 0 1px var(--pbs-ink);
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select,
.woocommerce form .form-row.woocommerce-invalid .select2-container--default .select2-selection--single { border-color: var(--pbs-alert); }
.woocommerce form .form-row textarea { min-height: 120px; }

.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single {
  display: flex;
  height: 46px;
  align-items: center;
  border: 1px solid var(--pbs-line);
  border-radius: 0;
  background: var(--pbs-paper);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0 40px 0 14px;
  color: var(--pbs-ink);
  font-size: 15px;
  line-height: 44px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--pbs-muted); }
.select2-container--default .select2-selection--single .select2-selection__arrow {
  top: 0;
  right: 14px;
  width: 12px;
  height: 44px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23080808' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center;
  transition: transform .18s ease;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow { transform: rotate(180deg); }
.select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
.select2-dropdown {
  border: 1px solid var(--pbs-ink);
  border-radius: 0;
  background: var(--pbs-paper);
  box-shadow: 0 14px 30px rgb(8 8 8 / 10%);
  font-size: 14px;
}
.select2-container--open .select2-dropdown--below { margin-top: 2px; border-top: 1px solid var(--pbs-ink); }
.select2-container--open .select2-dropdown--above { margin-top: -2px; border-bottom: 1px solid var(--pbs-ink); }
.select2-search--dropdown { padding: 10px; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  min-height: 40px;
  border: 1px solid var(--pbs-line);
  border-radius: 0;
  padding: 8px 12px;
  font-size: 14px;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--pbs-ink); outline: none; }
.select2-container--default .select2-results > .select2-results__options { max-height: 260px; }
.select2-results__option { padding: 9px 14px; color: var(--pbs-body); }
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] { background: var(--pbs-soft); color: var(--pbs-ink); }
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--pbs-ink); color: var(--pbs-paper); }
.woocommerce-message, .woocommerce-info { border-top-color: var(--pbs-ink); background: var(--pbs-soft); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--pbs-ink); }
.woocommerce nav.woocommerce-pagination ul { border: 0; }
.woocommerce nav.woocommerce-pagination ul li { border: 0; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { min-width: 38px; color: var(--pbs-ink); }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--pbs-ink); color: white; }
.woocommerce .cross-sells, .woocommerce .related, .woocommerce .upsells { margin-top: 64px; }
.content-area { padding-block: clamp(28px, 4vw, 56px); }

/* Below the breakpoint the desktop nav is replaced by the full screen menu, the
   same 1000px the portfolio site switches at so both headers change shape
   together. The store keeps two links the portfolio header does not have
   (account, cart), so the desktop nav tightens just above the breakpoint to
   keep clear of them. */
@media (min-width: 1001px) and (max-width: 1200px) {
  .pbs-nav a { padding-inline: 12px; font-size: 12px; }
}
/* A second step for the narrowest desktop widths, where the longer French labels
   (Espace client, À propos) would otherwise reach the wordmark. */
@media (min-width: 1001px) and (max-width: 1100px) {
  .pbs-nav a { padding-inline: 9px; font-size: 11px; }
}
@media (min-width: 1001px) and (max-width: 1200px) {
  .pbs-header-actions { gap: 12px; font-size: 10px; }
  .pbs-language-switcher { font-size: 9px; }
}

@media (max-width: 1000px) {
  .pbs-header-inner { min-height: 67px; padding-inline: 18px; }
  .pbs-brand img { width: 46px; height: 46px; }
  .pbs-brand span { font-size: 20px; }

  .pbs-nav { display: none; }

  /*
   * Account and cart move into the mobile menu, which leaves the same three
   * things the portfolio bar holds: wordmark, language, toggle.
   */
  .pbs-header-actions > a { display: none; }
  .pbs-header-actions { gap: 16px; }
  .pbs-nav-toggle { display: inline-flex; }

  .pbs-mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 40;
    flex-direction: column;
    gap: 24px;
    padding: 112px 40px 48px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--pbs-night);
  }
  .pbs-mobile-nav ul { display: flex; flex-direction: column; gap: 24px; margin: 0; padding: 0; list-style: none; }
  .pbs-mobile-nav a {
    display: block;
    color: #fff;
    font: 300 30px/36px var(--pbs-heading);
  }
  /*
   * Set after the rule above so the smaller label wins on equal specificity.
   * Held back from the nav links so the six primary entries keep the same
   * rhythm the portfolio menu has.
   */
  .pbs-mobile-nav .pbs-mobile-nav__utility {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 28px;
    margin-top: 8px;
    border-top: 1px solid var(--pbs-night-line);
    padding-top: 24px;
  }
  .pbs-mobile-nav .pbs-mobile-nav__utility a {
    color: rgb(255 255 255 / 80%);
    font: 400 10px/1.4 var(--pbs-accent-font);
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .pbs-mobile-nav .pbs-mobile-nav__utility .pbs-cart-count { color: rgb(255 255 255 / 45%); }

  /* Open: the bar goes black to become the panel's own header. */
  .pbs-site-header.is-open {
    border-bottom-color: transparent;
    background: var(--pbs-night);
    /*
     * A backdrop-filter on an ancestor becomes the containing block for
     * position: fixed descendants, which would pin the panel to the header
     * instead of the viewport. It has to go.
     */
    backdrop-filter: none;
  }
  .pbs-site-header.is-open .pbs-mobile-nav { display: flex; }
  .pbs-site-header.is-open .pbs-brand img { filter: brightness(0) invert(1); }
  .pbs-site-header.is-open .pbs-brand span { color: #fff; }
  .pbs-site-header.is-open .pbs-nav-toggle { color: #fff; }
  .pbs-site-header.is-open .pbs-nav-toggle__icon--menu { display: none; }
  .pbs-site-header.is-open .pbs-nav-toggle__icon--close { display: inline; }
  .pbs-site-header.is-open .pbs-language-switcher { color: rgb(255 255 255 / 80%); }
  .pbs-site-header.is-open .pbs-language-switcher > span { color: rgb(255 255 255 / 35%); }
  .pbs-site-header.is-open .pbs-language-switcher a[aria-current="page"] { border-bottom-color: #fff; color: #fff; }
}

@media (max-width: 650px) {
  .pbs-header-actions { gap: 12px; font-size: 10px; }
  .pbs-container { width: min(100% - 36px, var(--pbs-content-width)); }
  .pbs-footer-columns { grid-template-columns: 1fr; gap: 30px; padding: 42px 20px; }
  .pbs-footer-bottom-inner { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 10px; padding: 17px 20px; }
  .pbs-footer-bottom-inner > :last-child { justify-self: start; }
}

/* ==========================================================================
   Storefront: front page
   ========================================================================== */

.pbs-store-hero {
  background: var(--pbs-soft);
  /*
   * No padding at all: the photograph sits hard against the top and left edges.
   * The bottom edge belongs to the progress bar.
   */
  padding-block: 0;
}

/* Hero ----------------------------------------------------------------------
 * Full-bleed banner. One product per slide: the photograph on the left of the
 * centre line, that product's details on the right of it, and one progress segment
 * per slide spanning the whole viewport along the bottom edge.
 * -------------------------------------------------------------------------- */

.pbs-hero-carousel { position: relative; min-width: 0; }

/*
 * The slides are absolutely positioned, so the stage carries the height itself.
 * Without this the carousel would collapse to nothing.
 */
.pbs-hero-carousel__stage {
  position: relative;
  height: clamp(340px, 48vw, 640px);
  /*
   * The slide-in animation starts each slide 10px to the right, past the
   * viewport edge. Clipped here, as the portfolio hero is, so the page never
   * grows wider mid-transition and flashes a scrollbar.
   */
  overflow: hidden;
  overflow: clip;
}

.pbs-hero-slide {
  position: absolute;
  inset: 0;
  /*
   * The band is edge to edge, so each slide centres its content on the same
   * measure the rest of the page uses. The padding has to live on the slide: an
   * absolutely positioned child fills its ancestor's padding box, so padding on
   * the stage itself would be ignored.
   */
  padding-inline: max(22px, calc((100% - var(--pbs-content-width)) / 2));
  display: grid;
  /*
   * `auto` sizes the media column from its own aspect ratio, so the photograph
   * fills its box instead of floating in letterboxed space and the details column
   * takes the remainder. stretch (not center) so the media can resolve
   * height: 100% against a definite row.
   */
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(20px, 2.6vw, 44px);
  margin: 0;
}
.pbs-hero-slide[hidden] { display: none; }
.pbs-hero-slide.is-active { animation: pbs-hero-slide-in .45s ease both; }

.pbs-hero-slide__media {
  height: 100%;
  /*
   * Square, so at a full-bleed width the image lands as the left half of the
   * banner with the details on the right half. A taller ratio would leave the
   * picture short of the centre line.
   */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  /* Transparent, so a contained photograph sits on the band the way the
     portfolio hero's artwork does, rather than inside a white letterbox. */
  background: transparent;
}
.pbs-hero-slide__image {
  display: block;
  width: 100%;
  height: 100%;
  /* contain rather than cover: product photography must never be cropped. */
  object-fit: contain;
  object-position: center;
}

.pbs-hero-slide__info {
  align-self: center;
  display: grid;
  justify-items: start;
  gap: 9px;
  min-width: 0;
}
.pbs-hero-slide__name {
  color: var(--pbs-ink);
  font: 300 clamp(20px, 2.1vw, 28px)/1.2 var(--pbs-heading);
  letter-spacing: -.01em;
}
.pbs-hero-slide__price {
  color: var(--pbs-body);
  font: 400 15px/1.5 var(--pbs-body-font);
}
.pbs-hero-slide__summary {
  max-width: 44ch;
  margin: 2px 0 0;
  color: var(--pbs-body);
  font-size: 13.5px;
  line-height: 1.75;
}
.pbs-hero-slide__price del { margin-right: 8px; color: var(--pbs-muted); font-weight: 300; opacity: .75; }
.pbs-hero-slide__price ins { text-decoration: none; color: var(--pbs-ink); }
.pbs-hero-slide__price .woocommerce-Price-amount { font: inherit; }

.pbs-hero-slide__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  min-height: 44px;
  padding: 12px 18px;
  /* Outlined, as the portfolio hero's call to action is; it fills on hover. */
  border: 1px solid var(--pbs-ink);
  background: var(--pbs-paper);
  color: var(--pbs-ink);
  font: 400 10px/1.4 var(--pbs-accent-font);
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.pbs-hero-slide__cta:hover { background: var(--pbs-ink); color: var(--pbs-paper); }

.pbs-hero-progress {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  height: 4px;
  /*
   * No margin above: the photograph runs the full height of the band and meets the
   * bar directly. Any space here showed the grey section behind it as a gap under
   * the image.
   */
  margin-top: 0;
}
.pbs-hero-progress__segment {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: #dedede;
  cursor: pointer;
}
.pbs-hero-progress__segment:focus-visible { outline: 2px solid var(--pbs-ink); outline-offset: 2px; }
.pbs-hero-progress__fill {
  position: absolute;
  inset: 0;
  background: var(--pbs-ink);
  transform: scaleX(0);
  transform-origin: left;
}
.pbs-hero-progress__fill[data-state='complete'] { transform: scaleX(1); }
.pbs-hero-progress__fill[data-state='active'] { animation: pbs-hero-fill var(--pbs-hero-duration, 6500ms) linear forwards; }

@keyframes pbs-hero-slide-in {
  from { opacity: .45; transform: translateX(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes pbs-hero-fill {
  to { transform: scaleX(1); }
}

/* Rail ----------------------------------------------------------------------
 * Every front page section is one horizontal row of fixed-width items. The track
 * scrolls natively, so it works with a trackpad, a touch drag and the arrow keys
 * without any transform maths that would fight the sticky header.
 * -------------------------------------------------------------------------- */

.pbs-rail { --pbs-rail-item: clamp(198px, 23%, 282px); }

.pbs-rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(20px, 2.6vw, 32px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pbs-ink);
}
.pbs-rail__head .pbs-section-heading { margin: 0; }
/* The hero has no heading, so its controls sit on the right rather than leading. */
.pbs-rail__head:not(:has(.pbs-section-heading)) { justify-content: flex-end; }
.pbs-rail__actions { display: flex; flex: 0 0 auto; align-items: center; gap: clamp(14px, 1.6vw, 22px); }
.pbs-rail__nav { display: flex; gap: 8px; }
/* The controls are removed from the layout when the rail cannot scroll. */
.pbs-rail__nav[hidden] { display: none; }

.pbs-rail__btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--pbs-line);
  background: var(--pbs-paper);
  color: var(--pbs-ink);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, opacity .2s ease;
}
.pbs-rail__btn:hover:not(:disabled) { border-color: var(--pbs-ink); background: var(--pbs-ink); color: var(--pbs-paper); }
.pbs-rail__btn:disabled { opacity: .3; cursor: default; }

.pbs-rail__track {
  display: flex;
  gap: clamp(14px, 1.8vw, 26px);
  margin: 0;
  /* Room for the card lift and the badge, which are both outside the tile box. */
  padding: 2px 0 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pbs-rail__track::-webkit-scrollbar { display: none; }
.pbs-rail__track:focus-visible { outline: 2px solid var(--pbs-ink); outline-offset: 4px; }

/*
 * Every direct child is a fixed-width tile, whatever it is. Targeting the child
 * rather than a class matters: product tiles come from content-product.php and
 * carry the WooCommerce loop classes, not a rail class of ours.
 */
.pbs-rail__track > * {
  flex: 0 0 var(--pbs-rail-item);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  scroll-snap-align: start;
}
/*
 * The loop grid rules are scoped to `ul.products`, which the rail track
 * deliberately is not, so only the float and width resets are needed here.
 * Track children stretch to a common height, which is what lets
 * `.pbs-product-card__details { flex: 1 }` line the prices up along a row.
 */
.pbs-rail__track > li.product { float: none; width: auto; }

.pbs-section-link {
  flex: 0 0 auto;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--pbs-line);
  color: var(--pbs-muted);
  font: 400 10px/1.4 var(--pbs-accent-font);
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .2s ease, border-color .2s ease;
}
.pbs-section-link:hover { color: var(--pbs-ink); border-bottom-color: var(--pbs-ink); }

.pbs-sale-section,
.pbs-categories-section {
  background: var(--pbs-paper);
  padding-block: clamp(44px, 6vw, 84px);
}

.pbs-category-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--pbs-line);
  background: var(--pbs-paper);
  transition: border-color .25s ease, transform .25s ease;
}
.pbs-category-card:hover { border-color: var(--pbs-ink); transform: translateY(-2px); }
.pbs-category-card__image-wrapper {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--pbs-soft);
}
.pbs-category-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.pbs-category-card:hover .pbs-category-card__image { transform: scale(1.05); }
.pbs-category-card__content {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px 15px;
}
.pbs-category-card__title {
  margin: 0;
  color: var(--pbs-ink);
  font: 400 14px/1.4 var(--pbs-heading);
}
.pbs-category-card__count {
  flex: 0 0 auto;
  color: var(--pbs-muted);
  font: 400 10px/1.4 var(--pbs-accent-font);
  letter-spacing: .08em;
}

/* ==========================================================================
   Storefront: shared primitives
   ========================================================================== */

.pbs-container { --pbs-gutter: 0px; }

.screen-reader-text {
  position: absolute !important;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  word-wrap: normal !important;
  clip-path: inset(50%);
}

.pbs-section-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--pbs-muted);
  font: 400 10px/1.5 var(--pbs-accent-font);
  letter-spacing: .19em;
  text-transform: uppercase;
}

.pbs-section-title {
  display: block;
  font: 300 clamp(24px, 2.8vw, 34px)/1.2 var(--pbs-heading);
}

/* Breadcrumb ---------------------------------------------------------------- */
.woocommerce-breadcrumb {
  margin: 0;
  color: var(--pbs-muted);
  font: 400 10px/1.6 var(--pbs-accent-font);
  letter-spacing: .16em;
  text-transform: uppercase;
  word-spacing: .06em;
}
.woocommerce-breadcrumb .woocommerce-breadcrumb__separator {
  margin: 0 .6em;
  color: #c4c4c4;
}
.woocommerce-breadcrumb a { transition: color .2s ease; }
.woocommerce-breadcrumb a:hover { color: var(--pbs-ink); }

/* ==========================================================================
   Storefront: shop archive
   ========================================================================== */

.pbs-shop-header {
  border-bottom: 1px solid var(--pbs-line);
  background: var(--pbs-soft);
  padding-block: clamp(24px, 3vw, 38px) clamp(26px, 3.4vw, 44px);
}
.pbs-shop-header .woocommerce-breadcrumb { margin-bottom: clamp(16px, 2.4vw, 26px); }
.pbs-shop-header .woocommerce-products-header__title,
.pbs-shop-header .pbs-shop-header__title {
  margin: 0;
  max-width: 22ch;
  font: 300 clamp(32px, 5.2vw, 58px)/1.04 var(--pbs-heading);
  letter-spacing: -.015em;
}
.pbs-shop-header .term-description,
.pbs-shop-header .woocommerce-taxonomy-description,
.pbs-shop-header .woocommerce-product-description {
  max-width: 64ch;
  margin: 18px 0 0;
  color: var(--pbs-body);
  font-size: 15px;
  line-height: 1.9;
}
.pbs-shop-header .term-description p,
.pbs-shop-header p { margin: 0 0 .8em; }
.pbs-shop-header .term-description p:last-child { margin-bottom: 0; }

.pbs-shop-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  background: var(--pbs-paper);
  padding-block: clamp(30px, 4.5vw, 56px) clamp(56px, 8vw, 104px);
}
.pbs-shop-sidebar { align-self: start; }
.pbs-shop-sidebar__inner { display: flex; flex-direction: column; }

.pbs-shop-sidebar__head {
  display: flex;
  align-items: end;
  gap: 14px;
  /* Matches the toolbar row (40px control + 14px padding + 1px rule) so both line up.
   `min-height` is the border-box height here, so it has to include padding. */
  min-height: 55px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pbs-ink);
}
.pbs-shop-sidebar__title {
  margin: 0;
  font: 400 11px/1.4 var(--pbs-accent-font);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.pbs-shop-sidebar__clear {
  margin-left: auto;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--pbs-line);
  color: var(--pbs-muted);
  font: 400 10px/1.4 var(--pbs-accent-font);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s ease, border-color .2s ease;
}
.pbs-shop-sidebar__clear:hover { color: var(--pbs-ink); border-bottom-color: var(--pbs-ink); }
.pbs-shop-sidebar__close {
  display: none;
  align-items: center;
  justify-content: center;
  margin: -6px -8px -6px auto;
  padding: 6px 8px;
  border: 0;
  background: none;
  color: var(--pbs-ink);
  cursor: pointer;
}

/* Filter widgets ------------------------------------------------------------ */

.pbs-widget { padding-block: 22px; border-bottom: 1px solid var(--pbs-line); }
.pbs-widget:last-child { padding-bottom: 0; border-bottom: 0; }
.pbs-widget__title {
  margin: 0 0 14px;
  color: var(--pbs-muted);
  font: 400 10px/1.4 var(--pbs-accent-font);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.pbs-toggle-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Category accordions ------------------------------------------------------
 * Divider lines separate the high-level categories only. An expanded branch
 * relies on indentation instead, otherwise a nested list reads as a stack of
 * ruled rows. Every row is the same height whether or not it has an arrow.
 * -------------------------------------------------------------------------- */
.pbs-cat-list,
.pbs-cat-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pbs-widget--categories > .pbs-cat-list > li { border-top: 1px solid var(--pbs-line); }
.pbs-widget--categories > .pbs-cat-list > li:last-child { border-bottom: 1px solid var(--pbs-line); }

.pbs-cat-acc__summary {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  list-style: none;
}
.pbs-cat-acc__summary--leaf { cursor: default; }
.pbs-cat-acc__summary::-webkit-details-marker { display: none; }
.pbs-cat-acc__summary::marker { content: ''; }
.pbs-cat-acc__chevron {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: -5px;
  color: var(--pbs-muted);
  transition: transform .22s ease, color .18s ease;
}
.pbs-cat-acc[open] > .pbs-cat-acc__summary .pbs-cat-acc__chevron { transform: rotate(90deg); }
.pbs-cat-acc__summary:hover .pbs-cat-acc__chevron { color: var(--pbs-ink); }

.pbs-cat-acc__link {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  color: var(--pbs-body);
  font-size: 13.5px;
  line-height: 1.45;
  transition: color .18s ease;
}
.pbs-cat-acc__link:hover { color: var(--pbs-ink); }

.pbs-cat-list .pbs-cat-list {
  margin: 1px 0 9px;
  padding-left: 15px;
  border-left: 1px solid var(--pbs-line);
}
.pbs-cat-list .pbs-cat-list .pbs-cat-list { padding-left: 13px; }
.pbs-cat-list .pbs-cat-list .pbs-cat-acc__link { min-height: 32px; font-size: 12.5px; }
.pbs-cat-list .pbs-cat-list .pbs-cat-list .pbs-cat-acc__link { min-height: 30px; font-size: 12px; }

.pbs-cat-list .cat-count,
.pbs-toggle-row__count {
  flex: 0 0 auto;
  min-width: 24px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--pbs-faint);
  color: var(--pbs-muted);
  font: 400 10px/1.7 var(--pbs-accent-font);
  text-align: center;
}
.pbs-cat-list .current-cat > .pbs-cat-acc__summary > .pbs-cat-acc__link,
.pbs-cat-list .is-ancestor > .pbs-cat-acc__summary > .pbs-cat-acc__link {
  color: var(--pbs-ink);
}
.pbs-cat-list .current-cat > .pbs-cat-acc__summary > .pbs-cat-acc__link { font-weight: 500; }
.pbs-cat-list .current-cat .cat-count {
  background: var(--pbs-ink);
  color: var(--pbs-paper);
}

.pbs-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  color: var(--pbs-body);
  font-size: 13.5px;
  transition: color .18s ease;
}
.pbs-toggle-list li { margin: 0; list-style: none; }
.pbs-toggle-row:hover { color: var(--pbs-ink); }
.pbs-toggle-row__box {
  position: relative;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border: 1px solid var(--pbs-line);
  background: var(--pbs-paper);
  transition: background-color .18s ease, border-color .18s ease;
}
.pbs-toggle-row__box::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--pbs-paper);
  transform: scale(0);
  transition: transform .18s cubic-bezier(.2, .8, .3, 1);
}
.pbs-toggle-row.is-active { color: var(--pbs-ink); font-weight: 500; }
.pbs-toggle-row.is-active .pbs-toggle-row__box { border-color: var(--pbs-ink); background: var(--pbs-ink); }
.pbs-toggle-row.is-active .pbs-toggle-row__box::after { transform: scale(1); }
.pbs-toggle-row__count { margin-left: auto; }
.pbs-toggle-row.is-active .pbs-toggle-row__count {
  background: var(--pbs-ink);
  color: var(--pbs-paper);
}

/* Price range ---------------------------------------------------------------
 * Two native range inputs stacked over one track. WooCommerce ships a jQuery UI
 * slider, but depending on it for this meant fighting `height: auto` and z-index
 * quirks; two inputs need no dependency and behave identically.
 * -------------------------------------------------------------------------- */
.pbs-range {
  position: relative;
  height: 26px;
  margin-top: 8px;
}
.pbs-range__track {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  margin-top: -1px;
  background: var(--pbs-line);
}
.pbs-range__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--pbs-ink);
}
.pbs-range__input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 26px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}
.pbs-range__input::-webkit-slider-runnable-track {
  height: 26px;
  border: 0;
  background: none;
}
.pbs-range__input::-moz-range-track {
  height: 26px;
  border: 0;
  background: none;
}
.pbs-range__input::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  margin-top: 5.5px;
  border: 2px solid var(--pbs-paper);
  border-radius: 50%;
  background: var(--pbs-ink);
  box-shadow: 0 0 0 1px var(--pbs-ink);
  cursor: grab;
  pointer-events: auto;
  -webkit-appearance: none;
}
.pbs-range__input::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: 2px solid var(--pbs-paper);
  border-radius: 50%;
  background: var(--pbs-ink);
  box-shadow: 0 0 0 1px var(--pbs-ink);
  cursor: grab;
  pointer-events: auto;
}
.pbs-range__input:active::-webkit-slider-thumb { cursor: grabbing; }
.pbs-range__input:focus { outline: none; }
.pbs-range__input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--pbs-ink); outline-offset: 3px; }
.pbs-range__input:focus-visible::-moz-range-thumb { outline: 2px solid var(--pbs-ink); outline-offset: 3px; }

.pbs-price-range__labels {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  color: var(--pbs-body);
  font: 400 12px/1.5 var(--pbs-body-font);
  white-space: nowrap;
}
.pbs-price-range__labels .woocommerce-Price-amount { font: inherit; }
.pbs-price-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.pbs-price-field { flex: 1 1 0; min-width: 0; }
.pbs-price-field input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--pbs-line);
  background: var(--pbs-paper);
  color: var(--pbs-ink);
  font: 400 12px/1.4 var(--pbs-body-font);
  appearance: textfield;
}
.pbs-price-field input::-webkit-outer-spin-button,
.pbs-price-field input::-webkit-inner-spin-button { margin: 0; appearance: none; }
.pbs-price-field input:focus-visible { border-color: var(--pbs-ink); outline: none; }
.pbs-price-sep { color: var(--pbs-muted); font-size: 12px; }
.pbs-price-apply {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--pbs-ink);
  background: transparent;
  color: var(--pbs-ink);
  cursor: pointer;
  font: 400 9px/1.3 var(--pbs-accent-font);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.pbs-price-apply:hover { background: var(--pbs-ink); color: var(--pbs-paper); }
.pbs-price-single { margin: 0; color: var(--pbs-body); font-size: 14px; }

/* Toolbar and active filters ------------------------------------------------ */
.pbs-shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pbs-line);
}
.pbs-shop-toolbar .woocommerce-notices-wrapper { flex: 1 0 100%; order: -1; }
/* Notices are usually empty; without this the empty wrapper still claims a flex row. */
.pbs-shop-toolbar .woocommerce-notices-wrapper:empty,
.pbs-shop-toolbar .woocommerce-notices-wrapper:not(:has(*)) { display: none; }
.pbs-shop-toolbar .woocommerce-result-count {
  margin: 0;
  color: var(--pbs-muted);
  font: 400 10px/1.5 var(--pbs-accent-font);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.pbs-shop-toolbar .woocommerce-ordering { margin: 0 0 0 auto; }
.pbs-shop-toolbar .woocommerce-ordering select {
  min-height: 40px;
  padding: 9px 38px 9px 13px;
  border: 1px solid var(--pbs-line);
  border-radius: 0;
  background-color: var(--pbs-paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1.25 5 5.25l4-4' stroke='%23080808' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  color: var(--pbs-ink);
  font: 400 12px/1.4 var(--pbs-body-font);
  cursor: pointer;
  appearance: none;
}
.pbs-shop-toolbar .woocommerce-ordering select:hover { border-color: var(--pbs-ink); }

.pbs-filter-toggle {
  display: none;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 10px 14px;
  border: 1px solid var(--pbs-ink);
  background: var(--pbs-paper);
  color: var(--pbs-ink);
  cursor: pointer;
  font: 400 10px/1.3 var(--pbs-accent-font);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pbs-filter-toggle__icon {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 1.5px;
  background: currentColor;
}
.pbs-filter-toggle__icon::before,
.pbs-filter-toggle__icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 14px;
  height: 1.5px;
  background: currentColor;
}
.pbs-filter-toggle__icon::before { top: -4.5px; }
.pbs-filter-toggle__icon::after { top: 4.5px; }
.pbs-filter-toggle__count {
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--pbs-ink);
  color: var(--pbs-paper);
  font-size: 9px;
  letter-spacing: 0;
}

.pbs-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
}
.pbs-active-filters__label {
  margin-right: 2px;
  color: var(--pbs-muted);
  font: 400 10px/1.5 var(--pbs-accent-font);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.pbs-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px 5px 11px;
  border: 1px solid var(--pbs-line);
  border-radius: 999px;
  color: var(--pbs-body);
  font-size: 12px;
  line-height: 1.4;
  transition: color .2s ease, border-color .2s ease;
}
.pbs-chip:hover { border-color: var(--pbs-ink); color: var(--pbs-ink); }
.pbs-chip svg { opacity: .55; }
.pbs-chip:hover svg { opacity: 1; }
.pbs-active-filters__clear {
  margin-left: 2px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--pbs-line);
  color: var(--pbs-muted);
  font: 400 10px/1.4 var(--pbs-accent-font);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s ease, border-color .2s ease;
}
.pbs-active-filters__clear:hover { color: var(--pbs-ink); border-bottom-color: var(--pbs-ink); }

.pbs-filter-backdrop { display: none; }

/* ==========================================================================
   Storefront: catalog grid
   ========================================================================== */

.woocommerce ul.products {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 44px) clamp(14px, 1.8vw, 26px);
  margin-top: clamp(24px, 3vw, 38px);
}
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.pbs-product-card { margin: 0; padding: 0; list-style: none; }
.pbs-product-card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pbs-product-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--pbs-soft);
}
.pbs-product-card__image-link { display: block; height: 100%; }
/*
 * WooCommerce forces `height: auto` on `.woocommerce ul.products li.product a img`,
 * which is more specific than a bare `.pbs-product-card__image` and would collapse
 * the tile to the natural aspect ratio of the photo.
 *
 * The rail track is a `ul` but deliberately not `ul.products`, so it needs its own
 * arm of this rule: without it the tile keeps WooCommerce's `height: auto` and a
 * square photo leaves the bottom of the 4:5 media box empty.
 */
.woocommerce ul.products li.product .pbs-product-card__image,
.pbs-rail__track > li.product .pbs-product-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
}
.pbs-product-card__image--alt { opacity: 0; }
.pbs-product-card:hover .pbs-product-card__image { transform: scale(1.04); }
.pbs-product-card:hover .pbs-product-card__image--alt { opacity: 1; }
.pbs-product-card__image--placeholder { opacity: .55; }

.pbs-product-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  padding: 7px 11px;
  background: var(--pbs-ink);
  color: var(--pbs-paper);
  font: 400 9px/1.4 var(--pbs-accent-font);
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* Sale reads as an outlined label so the catalogue stays black and white. */
.pbs-product-badge--sale { box-shadow: inset 0 0 0 1px var(--pbs-ink); background: var(--pbs-paper); color: var(--pbs-ink); }
.pbs-product-badge--out { background: var(--pbs-muted); }

.pbs-product-card__cue {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgb(255 255 255 / 92%);
  backdrop-filter: blur(6px);
  color: var(--pbs-ink);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.pbs-product-card:hover .pbs-product-card__cue,
.pbs-product-card:focus-within .pbs-product-card__cue {
  opacity: 1;
  transform: none;
}

.pbs-product-card__details {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 14px;
  flex: 1;
}
.pbs-product-card__title {
  margin: 0;
  padding: 0;
  color: var(--pbs-ink);
  font: 400 14px/1.45 var(--pbs-heading);
  letter-spacing: 0;
  text-transform: none;
}
.pbs-product-card__title a { color: inherit; transition: color .2s ease; }
/* Stretches the title link over the whole card so the entire tile is clickable. */
.pbs-product-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.pbs-product-card:hover .pbs-product-card__title a { color: var(--pbs-muted); }

.pbs-product-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}
.pbs-product-card__price {
  color: var(--pbs-ink);
  font: 500 13.5px/1.5 var(--pbs-body-font);
}
.pbs-product-card__price .woocommerce-Price-amount { font: inherit; }
.pbs-product-card__price del { margin-right: 7px; color: var(--pbs-muted); font-weight: 300; opacity: .75; }
.pbs-product-card__price ins { text-decoration: none; }
.pbs-product-card__status {
  margin: 0;
  color: var(--pbs-muted);
  font: 400 9px/1.4 var(--pbs-accent-font);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Pagination ---------------------------------------------------------------- */
.pbs-shop-content .woocommerce-pagination {
  margin-top: clamp(40px, 5vw, 68px);
  padding-top: 22px;
  border-top: 1px solid var(--pbs-line);
}
.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
}
.woocommerce nav.woocommerce-pagination ul li { margin: 0; border: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid transparent;
  color: var(--pbs-body);
  font: 400 11px/1 var(--pbs-accent-font);
  letter-spacing: .06em;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: var(--pbs-ink);
  color: var(--pbs-ink);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  border-color: var(--pbs-ink);
  background: var(--pbs-ink);
  color: var(--pbs-paper);
}
.woocommerce nav.woocommerce-pagination ul li .dots {
  color: #b4b4b4;
  font-family: var(--pbs-body-font);
}

.pbs-shop-content .woocommerce-info,
.pbs-shop-content .woocommerce-message,
.pbs-shop-content .woocommerce-error {
  margin: 24px 0 0;
  border-top-color: var(--pbs-ink);
  background: var(--pbs-soft);
}

/* ==========================================================================
   Storefront: single product
   ========================================================================== */

.pbs-product { padding-bottom: clamp(48px, 8vw, 104px); }
.pbs-product .woocommerce-breadcrumb { padding-block: 16px 0; }
body.pbs-commerce .product.pbs-product-single { display: block; }

.pbs-product__main {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(320px, .94fr);
  align-items: start;
  gap: clamp(28px, 5vw, 76px);
  padding-block: clamp(24px, 3.4vw, 48px) 0;
}

/* Gallery ------------------------------------------------------------------- */
body.pbs-commerce .product.pbs-product-single div.images { margin: 0; padding: 0; }
body.pbs-commerce .product.pbs-product-single .woocommerce-product-gallery { position: relative; width: 100%; }
body.pbs-commerce .product.pbs-product-single .woocommerce-product-gallery__wrapper { margin: 0; }
body.pbs-commerce .product.pbs-product-single .woocommerce-product-gallery__wrapper > * { margin: 0; }
body.pbs-commerce .product.pbs-product-single .woocommerce-product-gallery img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  background: var(--pbs-soft);
  object-fit: cover;
  aspect-ratio: 4 / 5;
}
body.pbs-commerce .product.pbs-product-single .woocommerce-product-gallery__image--placeholder img { opacity: .6; }
body.pbs-commerce .product.pbs-product-single .woocommerce-product-gallery .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
body.pbs-commerce .product.pbs-product-single .woocommerce-product-gallery .flex-control-thumbs li {
  float: none !important;
  width: auto !important;
  margin: 0;
  padding: 0;
}
body.pbs-commerce .product.pbs-product-single .woocommerce-product-gallery .flex-control-thumbs img {
  aspect-ratio: 1;
  opacity: .5;
  border: 1px solid transparent;
  transition: opacity .2s ease, border-color .2s ease;
}
body.pbs-commerce .product.pbs-product-single .woocommerce-product-gallery .flex-control-thumbs img.flex-active,
body.pbs-commerce .product.pbs-product-single .woocommerce-product-gallery .flex-control-thumbs img:hover {
  opacity: 1;
  border-color: var(--pbs-ink);
}
body.pbs-commerce .product.pbs-product-single .woocommerce-product-gallery .flex-viewport {
  padding-bottom: 0 !important;
}
body.pbs-commerce .product.pbs-product-single .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
  top: 14px;
  right: 14px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background-color: rgb(255 255 255 / 92%);
  color: var(--pbs-ink);
  opacity: 0;
  transition: opacity .2s ease;
}
body.pbs-commerce .product.pbs-product-single .woocommerce-product-gallery:hover .woocommerce-product-gallery__trigger { opacity: 1; }
body.pbs-commerce .product.pbs-product-single span.onsale {
  top: 14px;
  left: 14px;
  min-width: auto;
  min-height: auto;
  margin: 0;
  padding: 7px 12px;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--pbs-ink);
  background: var(--pbs-paper);
  color: var(--pbs-ink);
  font: 400 9px/1.4 var(--pbs-accent-font);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Summary ------------------------------------------------------------------- */
body.pbs-commerce .product.pbs-product-single .summary { display: flex; flex-direction: column; }
body.pbs-commerce .product.pbs-product-single .product_title {
  margin: 0 0 12px;
  font: 300 clamp(28px, 3.2vw, 42px)/1.08 var(--pbs-heading);
  letter-spacing: -.012em;
}
body.pbs-commerce .product.pbs-product-single .summary > .price,
body.pbs-commerce .product.pbs-product-single .summary p.price,
body.pbs-commerce .product.pbs-product-single .summary div.price {
  margin: 0 0 20px;
  color: var(--pbs-ink);
  font: 400 clamp(20px, 2.1vw, 25px)/1.2 var(--pbs-body-font);
  letter-spacing: -.01em;
}
body.pbs-commerce .product.pbs-product-single .summary .price .woocommerce-Price-amount { font: inherit; }
body.pbs-commerce .product.pbs-product-single .summary .price del {
  margin-right: 9px;
  color: var(--pbs-muted);
  font-weight: 300;
  opacity: .75;
}
body.pbs-commerce .product.pbs-product-single .summary .price ins { text-decoration: none; }

body.pbs-commerce .product.pbs-product-single .stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin: 0 0 18px;
  padding: 5px 11px 5px 9px;
  border: 1px solid var(--pbs-line);
  color: var(--pbs-muted);
  font: 400 9.5px/1.4 var(--pbs-accent-font);
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.pbs-commerce .product.pbs-product-single .stock::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pbs-success);
}
body.pbs-commerce .product.pbs-product-single .stock.out-of-stock { color: var(--pbs-ink); }
body.pbs-commerce .product.pbs-product-single .stock.out-of-stock::before { background: var(--pbs-muted); }
body.pbs-commerce .product.pbs-product-single .woocommerce-product-details__short-description {
  max-width: 52ch;
  color: var(--pbs-body);
  font-size: 14.5px;
  line-height: 1.9;
}
body.pbs-commerce .product.pbs-product-single .woocommerce-product-details__short-description p { margin: 0 0 1em; }
body.pbs-commerce .product.pbs-product-single .woocommerce-product-details__short-description > *:last-child { margin-bottom: 0; }

body.pbs-commerce .product.pbs-product-single form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
  margin: 26px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--pbs-line);
}
body.pbs-commerce .product.pbs-product-single form.cart .quantity {
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
  margin: 0;
}
body.pbs-commerce .product.pbs-product-single .quantity .qty {
  width: 96px;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--pbs-line);
  background: var(--pbs-paper);
  color: var(--pbs-ink);
  font: 400 14px/1 var(--pbs-body-font);
  text-align: center;
  appearance: textfield;
}
body.pbs-commerce .product.pbs-product-single .quantity .qty::-webkit-outer-spin-button,
body.pbs-commerce .product.pbs-product-single .quantity .qty::-webkit-inner-spin-button { margin: 0; appearance: none; }
body.pbs-commerce .product.pbs-product-single form.cart .pbs-qty-stepper {
  display: grid;
  place-items: center;
  width: 44px;
  border: 1px solid var(--pbs-line);
  border-right: 0;
  background: var(--pbs-paper);
  color: var(--pbs-ink);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: background .2s ease, color .2s ease;
}
body.pbs-commerce .product.pbs-product-single form.cart .pbs-qty-stepper--plus { order: 3; border-right: 1px solid var(--pbs-line); border-left: 0; }
body.pbs-commerce .product.pbs-product-single form.cart .pbs-qty-stepper:hover { background: var(--pbs-ink); color: var(--pbs-paper); }
body.pbs-commerce .product.pbs-product-single form.cart .pbs-qty-stepper:focus-visible { outline: 2px solid var(--pbs-ink); outline-offset: -2px; }
body.pbs-commerce .product.pbs-product-single form.cart .quantity .qty { order: 2; }
body.pbs-commerce .product.pbs-product-single button.single_add_to_cart_button {
  flex: 1 1 220px;
  min-height: 52px;
}
body.pbs-commerce .product.pbs-product-single form.cart .variations { width: 100%; }
body.pbs-commerce .product.pbs-product-single form.cart .variations td { padding: 6px 0; border: 0; }
body.pbs-commerce .product.pbs-product-single form.cart .variations label { color: var(--pbs-muted); font: 400 10px/1.4 var(--pbs-accent-font); letter-spacing: .13em; text-transform: uppercase; }
body.pbs-commerce .product.pbs-product-single form.cart .reset_variations { font-size: 11px; }

.pbs-product-meta {
  display: grid;
  gap: 10px;
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--pbs-line);
}
.pbs-product-meta__row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  margin: 0;
}
.pbs-product-meta dt {
  color: var(--pbs-muted);
  font: 400 10px/1.5 var(--pbs-accent-font);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.pbs-product-meta dd { margin: 0; color: var(--pbs-body); font-size: 12.5px; line-height: 1.6; }
.pbs-product-meta dd a { border-bottom: 1px solid var(--pbs-line); transition: color .2s ease, border-color .2s ease; }
.pbs-product-meta dd a:hover { color: var(--pbs-ink); border-bottom-color: var(--pbs-ink); }

.pbs-product-description {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--pbs-line);
}
.pbs-product-description__title {
  margin: 0 0 12px;
  color: var(--pbs-muted);
  font: 400 10px/1.5 var(--pbs-accent-font);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.pbs-product-description__body {
  max-width: 54ch;
  color: var(--pbs-body);
  font-size: 14px;
  line-height: 1.9;
}
.pbs-product-description__body > :first-child { margin-top: 0; }
.pbs-product-description__body > :last-child { margin-bottom: 0; }
.pbs-product-description__body p { margin: 0 0 1em; }
.pbs-product-description__body ul,
.pbs-product-description__body ol { margin: 0 0 1em; padding-left: 1.1em; }
.pbs-product-description__body li { margin-bottom: .35em; }
.pbs-product-description__body img { max-width: 100%; height: auto; }
.pbs-product-description__body a { border-bottom: 1px solid var(--pbs-line); }
.pbs-product-description__body a:hover { border-bottom-color: var(--pbs-ink); }

/* Tabs ----------------------------------------------------------------------
 * WooCommerce reaches `ul.tabs li` with a matching class count but three element
 * selectors, and it forces the active link to `color: inherit`. Every rule below
 * therefore repeats `ul` to win the tie, and the colours live on the list item so
 * the inherited value is correct.
 * -------------------------------------------------------------------------- */
body.pbs-commerce .product.pbs-product-single .woocommerce-tabs { margin-top: clamp(40px, 6vw, 76px); }
body.pbs-commerce .product.pbs-product-single .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 2.6vw, 34px);
  margin: 0 0 clamp(22px, 3vw, 34px);
  padding: 0;
  border-bottom: 1px solid var(--pbs-line);
}
body.pbs-commerce .product.pbs-product-single .woocommerce-tabs ul.tabs li {
  position: relative;
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--pbs-muted);
}
body.pbs-commerce .product.pbs-product-single .woocommerce-tabs ul.tabs li.active { color: var(--pbs-ink); }
body.pbs-commerce .product.pbs-product-single .woocommerce-tabs ul.tabs li::before,
body.pbs-commerce .product.pbs-product-single .woocommerce-tabs ul.tabs li::after { content: none; display: none; }
body.pbs-commerce .product.pbs-product-single .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  margin-bottom: -1px;
  padding: 0 0 13px;
  border-bottom: 1px solid transparent;
  font: 400 10px/1.4 var(--pbs-accent-font);
  letter-spacing: .15em;
  text-transform: uppercase;
  transition: border-color .2s ease;
}
body.pbs-commerce .product.pbs-product-single .woocommerce-tabs ul.tabs li:hover { color: var(--pbs-ink); }
body.pbs-commerce .product.pbs-product-single .woocommerce-tabs ul.tabs li.active a { border-bottom-color: var(--pbs-ink); }
body.pbs-commerce .product.pbs-product-single .woocommerce-tabs .panel {
  max-width: 76ch;
  padding: 0;
  border: 0;
  color: var(--pbs-body);
  font-size: 14.5px;
  line-height: 1.9;
}
body.pbs-commerce .product.pbs-product-single .woocommerce-tabs .panel h2,
body.pbs-commerce .product.pbs-product-single .woocommerce-tabs .panel h3 {
  margin: 0 0 .7em;
  color: var(--pbs-ink);
  font: 300 22px/1.3 var(--pbs-heading);
}
body.pbs-commerce .product.pbs-product-single .woocommerce-tabs .panel p { margin: 0 0 1em; }
body.pbs-commerce .product.pbs-product-single .woocommerce-tabs .panel img { max-width: 100%; height: auto; }
body.pbs-commerce .product.pbs-product-single .woocommerce-Reviews .comment-list { margin: 0 0 32px; padding: 0; list-style: none; }
body.pbs-commerce .product.pbs-product-single .woocommerce-Reviews .comment_container {
  display: grid;
  gap: 4px;
  padding: 20px 0;
  border-bottom: 1px solid var(--pbs-line);
}
body.pbs-commerce .product.pbs-product-single .woocommerce-Reviews .meta { color: var(--pbs-muted); font-size: 12px; }

/* Related products ---------------------------------------------------------- */
body.pbs-commerce .product.pbs-product-single .related,
body.pbs-commerce .product.pbs-product-single .upsells {
  margin-top: clamp(48px, 7vw, 92px);
  padding-top: clamp(28px, 4vw, 46px);
  border-top: 1px solid var(--pbs-line);
}
body.pbs-commerce .product.pbs-product-single .related > h2,
body.pbs-commerce .product.pbs-product-single .upsells > h2 {
  margin: 0 0 clamp(22px, 3vw, 34px);
  font: inherit;
}
body.pbs-commerce .product.pbs-product-single .related ul.products,
body.pbs-commerce .product.pbs-product-single .upsells ul.products { margin-top: 0; }
body.pbs-commerce .product.pbs-product-single .related ul.products.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body.pbs-commerce .product.pbs-product-single .related ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Previous / next ----------------------------------------------------------- */
.pbs-product-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(40px, 5.5vw, 72px);
  border: 1px solid var(--pbs-line);
  background: var(--pbs-line);
}
.pbs-product-pager__item {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 96px;
  padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.6vw, 28px);
  background: var(--pbs-paper);
  transition: background .2s ease;
}
a.pbs-product-pager__item:hover { background: var(--pbs-soft); }
.pbs-product-pager__item--empty { background: var(--pbs-faint); }
.pbs-product-pager__item--next { align-items: flex-end; text-align: right; }
.pbs-product-pager__label {
  color: var(--pbs-muted);
  font: 400 9px/1.4 var(--pbs-accent-font);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.pbs-product-pager__title {
  color: var(--pbs-ink);
  font: 400 clamp(15px, 1.7vw, 18px)/1.4 var(--pbs-heading);
}

/* ==========================================================================
   Storefront: cart, checkout and account
   ==========================================================================
   The three pages WordPress serves through page.php. They are forms with a
   summary or a navigation beside them, so they run the full width of the
   container instead of the 700px prose column the other pages use. */

/* The heading band, shaped like the shop archive's so the pages read as one place. */
.pbs-pagehead {
  border-bottom: 1px solid var(--pbs-line);
  background: var(--pbs-soft);
  padding-block: clamp(22px, 2.8vw, 34px) clamp(24px, 3.2vw, 40px);
}
.pbs-pagehead .woocommerce-breadcrumb { margin-bottom: clamp(14px, 2vw, 22px); }
.pbs-pagehead__title {
  margin: 0;
  font: 300 clamp(30px, 4.4vw, 50px)/1.06 var(--pbs-heading);
  letter-spacing: -.014em;
}

.pbs-flow { padding-block: clamp(30px, 4.2vw, 54px) clamp(56px, 8vw, 104px); }
.pbs-flow__body > * { margin-block: 0 clamp(20px, 2.6vw, 32px); }
.pbs-flow__body > *:last-child { margin-bottom: 0; }

/* Notices -------------------------------------------------------------------
   WooCommerce prints these above the page body, so they are given the same
   treatment in all three pages rather than per page. */
.pbs-flow .woocommerce-message,
.pbs-flow .woocommerce-info,
.pbs-flow .woocommerce-error,
.pbs-flow .woocommerce-notices-wrapper:empty { display: none; }
.pbs-flow .woocommerce-message,
.pbs-flow .woocommerce-info,
.pbs-flow .woocommerce-error {
  display: block;
  margin-bottom: clamp(20px, 2.6vw, 30px);
  border: 0;
  border-left: 2px solid var(--pbs-ink);
  background: var(--pbs-soft);
  padding: clamp(14px, 1.8vw, 18px) clamp(16px, 2vw, 22px);
  color: var(--pbs-body);
  font-size: 14px;
  list-style: none;
}
.pbs-flow .woocommerce-message:empty,
.pbs-flow .woocommerce-info:empty,
.pbs-flow .woocommerce-error:empty { display: none; }
.pbs-flow .woocommerce-message li,
.pbs-flow .woocommerce-info li { margin: 0 0 6px; }
.pbs-flow .woocommerce-message li:last-child,
.pbs-flow .woocommerce-info li:last-child { margin-bottom: 0; }
.pbs-flow .woocommerce-message::before,
.pbs-flow .woocommerce-info::before,
.pbs-flow .woocommerce-error::before { display: none; }
/*
 * A notice with a button is a row: the message on the left, the button on the
 * right, both centred on the same line. WooCommerce prints the button before the
 * message in some notices and after it in others, so order puts it last either
 * way, and the button centres its own label inside the 44px it is given.
 */
.pbs-flow .woocommerce-message:has(> .button),
.pbs-flow .woocommerce-info:has(> .button) {
  display: flex;
  align-items: center;
  gap: 12px 20px;
}
.pbs-flow .woocommerce-message .button,
.pbs-flow .woocommerce-info .button,
.pbs-flow .woocommerce-error .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  order: 2;
  float: none;
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  border: 1px solid var(--pbs-ink);
  background: transparent;
  padding: 8px 14px;
  color: var(--pbs-ink);
  font: 400 10px/1.3 var(--pbs-accent-font);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pbs-flow .woocommerce-message .button:hover,
.pbs-flow .woocommerce-info .button:hover,
.pbs-flow .woocommerce-error .button:hover { background: var(--pbs-ink); color: white; }

/* Commerce form controls -----------------------------------------------------
   Square edges on every control the shop draws. The theme squares off everything
   else, and WooCommerce rounds its own block form controls by 4px, so left alone
   the text fields, the dropdowns, the checkbox and the cart's quantity buttons were
   the only soft edges left on these pages.

   Each selector here carries a class more than the WooCommerce rule it has to beat,
   because that is what it takes. The text inputs are the awkward ones: WooCommerce
   reaches them through an attribute selector,
   `.wc-block-components-form .wc-block-components-text-input input[type="text"]`,
   which is three classes deep and outranks the theme's plain descendant version.
   A tie would be settled by stylesheet order instead, so none of these rely on that.

   Radio buttons keep their circle. They are a different component
   (`wc-block-components-radio-control`) and are not named in any of these
   selectors, so that stays a decision rather than an oversight. */

body.pbs-commerce .wc-block-components-form .wc-block-components-text-input input[type],
body.pbs-commerce .wc-block-components-text-input input[type],
body.pbs-commerce .wc-block-components-text-input textarea { border-radius: 0; }
body.pbs-commerce .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] { border-radius: 0; }
body.pbs-commerce .wc-blocks-components-select .wc-blocks-components-select__container { border-radius: 0; }
body.pbs-commerce .wc-block-components-quantity-selector > .wc-block-components-quantity-selector__button { border-radius: 0; }

/* Cart ----------------------------------------------------------------------
   The cart block is a grid the page controls: `wc-block-cart__main` is the line
   items and `wc-block-cart__sidebar` the totals. The sidebar is given its own
   track so it holds one product name per line rather than one word, and it stays
   in view while a long cart scrolls. */

body.pbs-flow-cart .wp-block-woocommerce-cart { max-width: none; margin: 0; }
body.pbs-flow-cart .wp-block-woocommerce-cart .wc-block-cart__main { min-width: 0; }
body.pbs-flow-cart .wp-block-woocommerce-cart .wc-block-cart__sidebar {
  position: sticky;
  top: 100px;
  align-self: start;
  min-width: 0;
}

/*
 * WooCommerce measures the block against itself with an inline-size container
 * query and splits it 65/35 above 700px. Those two percentages leave no room for a
 * gap, and adding one wraps the summary onto its own line, so the tracks are set
 * here as a grid instead: the line items take the room they are given and the
 * summary holds one. Kept inside the same 700px query so the block's own stacking
 * below that width is left exactly as it is.
 */
@container (min-width: 700px) {
  body.pbs-flow-cart .wp-block-woocommerce-cart .wc-block-components-sidebar-layout,
  body.pbs-flow-checkout .wc-block-checkout .wc-block-components-sidebar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(290px, 33%, 400px);
    gap: clamp(28px, 3.6vw, 56px);
    margin-bottom: 0;
  }
  body.pbs-flow-cart .wp-block-woocommerce-cart .wc-block-components-main,
  body.pbs-flow-checkout .wc-block-checkout .wc-block-components-main { width: auto; padding-right: 0; }
  body.pbs-flow-cart .wp-block-woocommerce-cart .wc-block-components-sidebar,
  body.pbs-flow-checkout .wc-block-checkout .wc-block-components-sidebar { width: auto; padding-left: 0; }
}
/*
 * Fixed layout with the two outer tracks declared on the header cells. Left on
 * `auto`, the table hands every spare pixel to the product column and squeezes
 * the thumbnail to a sliver, because a cell's width is only a suggestion while the
 * text beside it has no width at all.
 */
body.pbs-flow-cart .wc-block-cart-items { border-collapse: collapse; table-layout: fixed; }
body.pbs-flow-cart .wc-block-cart-items .wc-block-cart-items__header-image { width: 132px; }
body.pbs-flow-cart .wc-block-cart-items .wc-block-cart-items__header-total { width: 150px; }
body.pbs-flow-cart .wc-block-cart-items th {
  border-bottom: 1px solid var(--pbs-line);
  background: transparent;
  padding: 0 0 12px;
  color: var(--pbs-muted);
  font: 400 10px/1.4 var(--pbs-accent-font);
  letter-spacing: .16em;
  text-transform: uppercase;
}
body.pbs-flow-cart .wc-block-cart-items th:last-child { padding-right: 0; text-align: right; }
body.pbs-flow-cart .wc-block-cart-items td {
  border: 0;
  border-bottom: 1px solid var(--pbs-faint);
  padding: clamp(20px, 2.6vw, 30px) 0;
  vertical-align: top;
}
body.pbs-flow-cart .wc-block-cart-items td:last-child { padding-right: 0; }
body.pbs-flow-cart .wc-block-cart-item__image { padding-right: 24px; vertical-align: top; }
body.pbs-flow-cart .wc-block-cart-item__image img { width: 108px; height: 108px; object-fit: cover; }
body.pbs-flow-cart .wc-block-cart-item__product { width: auto; }
body.pbs-flow-cart .wc-block-components-product-name {
  font: 400 clamp(15px, 1.5vw, 17px)/1.4 var(--pbs-heading);
}
body.pbs-flow-cart .wc-block-components-product-name:hover { text-decoration: underline; }
/*
 * WooCommerce lays the unit price and the struck-through original out on one line,
 * so a long pair of amounts runs into the product title. Wrapping keeps both
 * readable at any column width.
 */
body.pbs-flow-cart .wc-block-cart-item__prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  color: var(--pbs-muted);
  font-size: 13px;
}
body.pbs-flow-cart .wc-block-cart-item__prices del { color: var(--pbs-muted); font-weight: 300; opacity: .8; }
body.pbs-flow-cart .wc-block-cart-item__prices ins { color: var(--pbs-ink); font-weight: 400; text-decoration: none; }
body.pbs-flow-cart .wc-block-components-product-metadata { margin-top: 6px; }
body.pbs-flow-cart .wc-block-components-product-metadata__description p {
  max-width: 52ch;
  margin: 0;
  color: var(--pbs-muted);
  font-size: 12.5px;
  line-height: 1.65;
}
/*
 * The strike-through original is set in a smaller, lighter face and separated from
 * the sale price, so the two amounts read as a pair rather than as one broken
 * number.
 */
body.pbs-flow-cart .wc-block-cart-item__prices .price { gap: 6px; }
body.pbs-flow-cart .wc-block-cart-item__prices .wc-block-components-product-price__regular { font-size: 12px; }
body.pbs-flow-cart .wc-block-cart-item__prices .wc-block-components-product-price__regular + .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.pbs-flow-cart .wc-block-cart-item__quantity {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}
body.pbs-flow-cart .wc-block-components-quantity-selector {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--pbs-line);
  border-radius: 0;
  background: white;
}
body.pbs-flow-cart .wc-block-components-quantity-selector__button {
  width: 40px;
  border: 0;
  background: transparent;
  color: var(--pbs-ink);
  font: 400 17px/1 var(--pbs-body-font);
  cursor: pointer;
  transition: background .18s ease;
}
body.pbs-flow-cart .wc-block-components-quantity-selector__button:hover:not(:disabled) { background: var(--pbs-soft); }
body.pbs-flow-cart .wc-block-components-quantity-selector__button:disabled { color: #c9c9c9; cursor: default; }
body.pbs-flow-cart .wc-block-components-quantity-selector__input {
  width: 52px;
  min-height: 40px;
  border: 0;
  border-inline: 1px solid var(--pbs-line);
  border-radius: 0;
  background: white;
  padding: 0;
  color: var(--pbs-ink);
  font: 400 14px/1 var(--pbs-body-font);
  text-align: center;
  appearance: textfield;
}
body.pbs-flow-cart .wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
body.pbs-flow-cart .wc-block-components-quantity-selector__input::-webkit-inner-spin-button { margin: 0; appearance: none; }
body.pbs-flow-cart .wc-block-cart-item__remove-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--pbs-muted);
  transition: color .18s ease;
}
body.pbs-flow-cart .wc-block-cart-item__remove-link:hover { color: var(--pbs-alert); }
body.pbs-flow-cart .wc-block-cart-item__total {
  text-align: right;
  white-space: nowrap;
}
body.pbs-flow-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper { align-items: flex-end; }

/* Totals -------------------------------------------------------------------- */

/*
 * One card for the whole summary: a rule around it, a soft grey title bar, and
 * white below it. Styling the totals wrapper on its own left the line items on a
 * different background from the total they add up to.
 *
 * The square corners are not incidental. WooCommerce rounds this box by 5px, and the
 * theme squares off everything else it draws, so on its own it was the one rounded
 * edge left on the checkout.
 */
body.pbs-flow-cart .wp-block-woocommerce-cart-order-summary-block,
body.pbs-flow-checkout .wp-block-woocommerce-checkout-order-summary-block {
  border: 1px solid var(--pbs-line);
  border-radius: 0;
  background: var(--pbs-paper);
}
body.pbs-flow-cart .wc-block-cart__sidebar .wc-block-components-totals-wrapper,
body.pbs-flow-checkout .wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
  background: var(--pbs-paper);
  padding: 0;
}
/*
 * The summary header, on both pages, so the cart totals and the order summary read as
 * the same band instead of one grey block and one bare line.
 *
 * The two blocks nest differently. The cart's header *is* the heading:
 * `<h2 class="wc-block-cart__totals-title">`, carrying both the band and the words. The
 * checkout's is a clickable `<div>` band wrapping a `<p class="...__title-text">`, which
 * is a collapse toggle on small screens and a plain heading on wide ones. So the band is
 * painted on the outer box in each case and the type on the element that holds the text.
 * Grouping those as one selector would blank the cart's own padding, since it is both.
 */
body.pbs-flow-cart .wc-block-cart__totals-title,
body.pbs-flow-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--pbs-line);
  background: var(--pbs-soft);
  padding: 18px 20px;
  box-shadow: none;
}
body.pbs-flow-cart .wc-block-cart__totals-title,
body.pbs-flow-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title-text {
  color: var(--pbs-muted);
  font: 400 10px/1.4 var(--pbs-accent-font);
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}
body.pbs-flow-cart .wc-block-cart__totals-title { margin: 0; }
/* The checkout's band is its parent, so the text inside it takes no inset of its own. */
body.pbs-flow-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title-text {
  margin: 0;
  padding: 0;
  background: transparent;
}
/*
 * Only shown while the summary is collapsible, so it rides the far end of the toggle
 * and picks up the band's muted grey rather than the block's default.
 */
body.pbs-flow-checkout .wp-block-woocommerce-checkout-order-summary-block
.wc-block-components-checkout-order-summary__title-icon {
  width: 15px;
  height: 15px;
  margin-left: auto;
  color: var(--pbs-muted);
}
body.pbs-flow-cart .wc-block-components-totals-item,
body.pbs-flow-checkout .wc-block-components-totals-item {
  padding: 12px 20px;
  color: var(--pbs-body);
  font-size: 14px;
}
/*
 * Label and value are centred against each other in every row.
 *
 * The total pairs an 11px uppercase label with a 20px amount, so the two boxes are
 * very different heights and the question is which edges line up. On the baseline the
 * small label hangs off the number's foot and the row reads as dropped; centred, the
 * label sits level with the middle of the figure, which is what a label beside a price
 * is expected to do. WooCommerce centres some rows and leaves others to inherit, so
 * this is set on every row to keep the section reading as one column.
 */
body.pbs-flow-cart .wc-block-components-totals-item,
body.pbs-flow-checkout .wc-block-components-totals-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
/*
 * The summary rows need the leading and trailing edges back, and WooCommerce takes
 * them away twice over:
 *
 *   - `.wc-block-cart .wp-block-woocommerce-cart-order-summary-block
 *     .wc-block-components-totals-item` sets `padding-inline: 0`. Three classes, so
 *     it outranks anything shorter and the total ends up against the card border.
 *     Mirroring that ancestor chain here puts the two on equal footing, and the
 *     theme stylesheet loading after WooCommerce's settles it in the theme's favour.
 *   - `.wc-block-components-panel__button` sets `padding-left: 0 !important` on the
 *     coupon toggle. Nothing outranks that, so the coupon row takes its inset from
 *     the panel instead, which the block leaves alone.
 */
body.pbs-flow-cart .wc-block-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-footer-item {
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--pbs-line);
  padding: 16px 20px 18px;
  color: var(--pbs-ink);
}
body.pbs-flow-checkout .wc-block-components-totals-footer-item {
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--pbs-line);
  padding: 16px 20px 18px;
  color: var(--pbs-ink);
}
body.pbs-flow-cart .wc-block-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-coupon,
body.pbs-flow-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-coupon {
  padding: 12px 20px;
}
body.pbs-flow-cart .wc-block-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-components-totals-coupon .wc-block-components-panel__button,
body.pbs-flow-checkout .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-totals-coupon .wc-block-components-panel__button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: var(--pbs-body);
  font-size: 13px;
}
/*
 * The amount's own line box. Centred here as well, so the figure sits on the middle of
 * its row rather than being pushed down by the leading on the box its parent centres.
 */
body.pbs-flow-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.pbs-flow-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { display: flex; align-items: center; }
body.pbs-flow-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
body.pbs-flow-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
  font: 400 11px/1.4 var(--pbs-accent-font);
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.pbs-flow-cart .wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
body.pbs-flow-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  color: var(--pbs-ink);
  font: 400 clamp(19px, 2vw, 22px)/1.2 var(--pbs-heading);
}
body.pbs-flow-cart .wc-block-components-totals-coupon .wc-block-components-panel__button:hover,
body.pbs-flow-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button:hover { color: var(--pbs-ink); }
/*
 * The chevron sits at the right edge of the panel, which is now inset, so the
 * button's own 32px right padding, reserved for the icon, would double it.
 */
body.pbs-flow-cart .wc-block-components-panel__button-icon,
body.pbs-flow-checkout .wc-block-components-panel__button-icon { width: 15px; height: 15px; margin-left: auto; }
body.pbs-flow-cart .wc-block-cart__submit { padding: 20px; background: var(--pbs-soft); }
body.pbs-flow-cart .wc-block-cart__submit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--pbs-ink);
  border-radius: 0;
  background: var(--pbs-ink);
  color: white;
  font: 400 10.5px/1.3 var(--pbs-accent-font);
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
body.pbs-flow-cart .wc-block-cart__submit-button:hover { background: white; color: var(--pbs-ink); }
/*
 * The saving sits outside the price wrapper, as a sibling in the total cell, so it
 * has to be aligned to the right edge of that cell itself. The same badge appears
 * in the checkout's order summary, where it sits inline beside the price instead.
 */
body.pbs-flow-cart .wc-block-components-sale-badge,
body.pbs-flow-checkout .wc-block-components-sale-badge {
  background: transparent;
  color: var(--pbs-alert);
  font: 400 10px/1.4 var(--pbs-accent-font);
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.pbs-flow-cart .wc-block-components-sale-badge {
  margin-top: 4px;
  padding: 0;
  text-align: right;
}

/* Empty cart ---------------------------------------------------------------- */

/* Empty cart ----------------------------------------------------------------
   The block's own icon is a 5em square mask, which at this heading size lands at
   200px and dominates the page. Halved here, and the panel given a width of its
   own so the "new in store" grid underneath reads as a separate section. */

body.pbs-flow-cart .wc-block-cart__empty-cart__title {
  margin: 0 0 14px;
  font: 300 clamp(24px, 3.2vw, 34px)/1.2 var(--pbs-heading);
}
body.pbs-flow-cart .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
  width: 2.5em;
  height: 2.5em;
  margin-bottom: 1.4em;
  mask-size: 2.5em;
}
body.pbs-flow-cart .wc-block-components-notice-banner { border-radius: 0; }
body.pbs-flow-cart .wp-block-woocommerce-empty-cart-block > .wp-block-heading:not(.wc-block-cart__empty-cart__title) {
  margin: clamp(40px, 5vw, 60px) 0 clamp(18px, 2.4vw, 26px);
  color: var(--pbs-muted);
  font: 400 10px/1.4 var(--pbs-accent-font);
  letter-spacing: .19em;
  text-align: left;
  text-transform: uppercase;
}
/*
 * The separator is saved on the page as the dotted variant, which paints three
 * centred dots through a `::before` and pins the border off with `!important`. A
 * plain rule under the heading reads better against the grid below it, so the dots
 * are removed and the rule drawn in their place.
 */
body.pbs-flow-cart .wp-block-woocommerce-empty-cart-block > hr {
  height: 0;
  margin: 0;
  background: none;
}
body.pbs-flow-cart .wp-block-woocommerce-empty-cart-block > hr::before {
  display: none;
  content: none;
}
body.pbs-flow-cart .wp-block-woocommerce-empty-cart-block > hr.is-style-dots {
  border: 0;
  border-top: 1px solid var(--pbs-line);
}
body.pbs-flow-cart .wc-block-components-product-button,
body.pbs-flow-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link {
  border: 1px solid var(--pbs-ink);
  border-radius: 0;
  background: var(--pbs-ink);
  padding: 13px 20px;
  color: white;
  font: 400 10px/1.3 var(--pbs-accent-font);
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.pbs-flow-cart .wc-block-components-product-button:hover,
body.pbs-flow-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover { background: white; color: var(--pbs-ink); }
/*
 * The empty cart's "New in store" grid.
 *
 * `inc/product-cards.php` swaps the block's `wc-block-grid` for the theme's own loop
 * card, which is styled already, so all this needs is the space above it. The
 * `.woocommerce` on the wrapper is what re-enables the `.woocommerce ul.products`
 * grid rules; the cart page body carries `woocommerce-cart` but not the bare class.
 */
body.pbs-flow-cart .wp-block-woocommerce-empty-cart-block .pbs-product-grid {
  margin-top: clamp(26px, 3.4vw, 40px);
}

/* Checkout ------------------------------------------------------------------
   Same two-track shape as the cart: the fields take the room they need, the order
   summary holds a fixed track so a product name wraps on words. */

body.pbs-flow-checkout .wc-block-checkout { max-width: none; margin: 0; padding-top: 0; }
body.pbs-flow-checkout .wc-block-checkout__sidebar { position: sticky; top: 100px; align-self: start; }
body.pbs-flow-checkout .wc-block-components-checkout-step + .wc-block-components-checkout-step {
  border-top: 0;
  margin-top: clamp(28px, 3.4vw, 40px);
  padding-top: 0;
}
body.pbs-flow-checkout .wc-block-components-checkout-step__title {
  margin: 0 0 clamp(14px, 1.8vw, 18px);
  font: 300 clamp(19px, 2.2vw, 24px)/1.2 var(--pbs-heading);
}
body.pbs-flow-checkout .wc-block-components-checkout-step__content > * + * { margin-top: clamp(16px, 2vw, 22px); }
body.pbs-flow-checkout .wc-block-components-text-input input,
body.pbs-flow-checkout .wc-block-components-text-input label,
body.pbs-flow-checkout .wc-blocks-components-select__label,
body.pbs-flow-checkout .wc-blocks-components-select__select {
  font-family: var(--pbs-body-font);
  font-weight: 300;
}
body.pbs-flow-checkout .wc-block-components-text-input input,
body.pbs-flow-checkout .wc-blocks-components-select__select {
  min-height: 48px;
  border: 1px solid var(--pbs-line);
  border-radius: 0;
  background: white;
  color: var(--pbs-ink);
  font-size: 15px;
}
body.pbs-flow-checkout .wc-block-components-text-input input:focus,
body.pbs-flow-checkout .wc-blocks-components-select__select:focus {
  border-color: var(--pbs-ink);
  outline: 0;
  box-shadow: none;
}
body.pbs-flow-checkout .wc-blocks-components-select__container { position: relative; }
/*
 * The dropdown arrow.
 *
 * WooCommerce already draws one: an `<svg class="wc-blocks-components-select__expand">`
 * in the block's own markup, styled by its stylesheet to sit at the right edge. A
 * chevron added here as well puts two of them on top of each other a couple of pixels
 * apart, which reads as a doubled arrow on the country and province fields.
 *
 * The block's own arrow is kept and recoloured rather than the theme adding a second.
 * It is a real element rather than a background image, so the colour can follow the
 * theme, and it carries a viewBox, so it can be sized to the 15px used elsewhere here.
 */
body.pbs-flow-checkout .wc-blocks-components-select__expand {
  width: 15px;
  height: 15px;
  right: 14px;
  fill: var(--pbs-ink);
}
body.pbs-flow-checkout .wc-blocks-components-select__select {
  padding-right: 38px;
  appearance: none;
}
body.pbs-flow-checkout .wc-block-components-address-form__address_2-toggle {
  border-bottom: 1px solid var(--pbs-line);
  color: var(--pbs-muted);
  font: 400 12px/1.5 var(--pbs-accent-font);
  letter-spacing: .08em;
}
body.pbs-flow-checkout .wc-block-components-radio-control__input {
  border-color: var(--pbs-line);
  border-radius: 50%;
  appearance: none;
}
/*
 * With `appearance: none` the checked state is filled by the browser only, so the
 * selection is drawn as an inset dot. A square would read as a checkbox.
 */
body.pbs-flow-checkout .wc-block-components-radio-control__input:checked {
  border-color: var(--pbs-ink);
  background-color: var(--pbs-paper);
  box-shadow: inset 0 0 0 4px var(--pbs-ink);
}
body.pbs-flow-checkout .wc-block-components-radio-control__label { padding: 15px 18px; border: 1px solid var(--pbs-line); }
body.pbs-flow-checkout .wc-block-components-radio-control__input:checked + .wc-block-components-radio-control__label { border-color: var(--pbs-ink); }
body.pbs-flow-checkout .wc-block-components-payment-method { border-radius: 0; background: var(--pbs-soft); }
body.pbs-flow-checkout .wc-block-components-checkbox__label,
body.pbs-flow-checkout .wc-block-components-checkbox label { font-size: 14px; }
body.pbs-flow-checkout .wc-block-components-button {
  border-radius: 0;
  font-family: var(--pbs-accent-font);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.pbs-flow-checkout .wc-block-components-button:not(.is-link) {
  border: 1px solid var(--pbs-ink);
  background: var(--pbs-ink);
  color: white;
}
body.pbs-flow-checkout .wc-block-components-button:not(.is-link):hover { background: white; color: var(--pbs-ink); }
body.pbs-flow-checkout .wc-block-components-button.is-link {
  background: transparent;
  color: var(--pbs-ink);
  text-decoration: underline;
}
body.pbs-flow-checkout .wc-block-checkout__actions { padding-top: clamp(8px, 1.4vw, 14px); }
/* The toggle is a flex row; the price and chevron ride at its ends when shown. */
body.pbs-flow-checkout .wp-block-woocommerce-checkout-order-summary-block
.wc-block-components-checkout-order-summary__title {
  align-items: center;
  gap: 10px;
}
body.pbs-flow-checkout .wc-block-components-checkout-order-summary__title-price {
  color: var(--pbs-ink);
  font: 400 14px/1.4 var(--pbs-heading);
}
body.pbs-flow-checkout .wc-block-components-order-summary-item { padding: 14px 20px; }
body.pbs-flow-checkout .wc-block-components-order-summary-item + .wc-block-components-order-summary-item {
  border-top: 1px solid var(--pbs-line);
}
/*
 * WooCommerce caps the summary thumbnail at 48px with a selector one class deeper
 * than a plain override can match, so the width is left alone and only the height
 * is set, which is what turns the block's 48×auto picture into a square.
 */
body.pbs-flow-checkout .wc-block-components-order-summary-item__image img {
  height: 48px;
  border-radius: 0;
  object-fit: cover;
}
body.pbs-flow-checkout .wc-block-components-product-name {
  font: 400 14px/1.4 var(--pbs-heading);
}
body.pbs-flow-checkout .wc-block-components-order-summary-item__description .wc-block-cart-item__prices {
  gap: 3px 8px;
  color: var(--pbs-muted);
  font-size: 12px;
}
body.pbs-flow-checkout .wc-block-components-order-summary-item__total-price { color: var(--pbs-ink); font-size: 14px; }
body.pbs-flow-checkout .wc-block-components-checkout-order-summary__content hr,
body.pbs-flow-checkout .wc-block-components-totals-wrapper hr { border: 0; border-top: 1px solid var(--pbs-line); }
/*
 * The account links a signed-out shopper is offered at checkout — the sign-in link
 * in the step heading and the note under the email field — arrive with the block and
 * are left as 13px ink. The note is a note, but the link is the only way back into
 * an existing account from this page, so it is given the same small uppercase rule
 * the account page gives its own links rather than sitting there looking like a label.
 */
body.pbs-flow-checkout .wc-block-checkout__login-prompt {
  color: var(--pbs-body);
  font: 400 12px/1.4 var(--pbs-accent-font);
  letter-spacing: .09em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--pbs-line);
  transition: color .18s ease;
}
body.pbs-flow-checkout .wc-block-checkout__login-prompt:hover { color: var(--pbs-ink); }

/* Account -------------------------------------------------------------------
   WooCommerce floats the navigation and the content at 30/68. Replaced with a
   grid so the navigation can hold its own column and stay put beside a long form. */

/*
 * The navigation only exists once somebody is signed in, so the two columns are
 * switched on by the body class WordPress already sets for that, rather than by a
 * wrapper the shortcode does not offer.
 */
body.pbs-flow-account.logged-in .pbs-flow__body > .woocommerce {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
/*
 * WooCommerce clears the floats on its account wrapper with two `display: table`
 * pseudo-elements. Those count as grid items, so they take the first cell and push
 * the navigation into the second, leaving the content wrapped underneath. The grid
 * does the containing work on its own and the pseudo-elements have nothing to clear.
 */
body.pbs-flow-account.logged-in .pbs-flow__body > .woocommerce::before,
body.pbs-flow-account.logged-in .pbs-flow__body > .woocommerce::after { content: none; }
body.pbs-flow-account .woocommerce-MyAccount-navigation {
  float: none;
  width: auto;
}
body.pbs-flow-account .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  min-width: 0;
}

.woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--pbs-line);
  list-style: none;
}
.woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--pbs-line); }
.woocommerce-MyAccount-navigation a {
  display: block;
  padding: 14px 12px;
  color: var(--pbs-muted);
  font: 400 11px/1.4 var(--pbs-accent-font);
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.woocommerce-MyAccount-navigation a:hover { background: var(--pbs-soft); color: var(--pbs-ink); }
/* Questrial has one weight, so the current page is marked rather than bolded. */
.woocommerce-MyAccount-navigation .is-active a {
  box-shadow: inset 2px 0 0 var(--pbs-ink);
  background: var(--pbs-soft);
  color: var(--pbs-ink);
}

.pbs-account__hello {
  margin: 0 0 8px;
  font: 300 clamp(24px, 3vw, 34px)/1.15 var(--pbs-heading);
}
.pbs-account__lead {
  max-width: 62ch;
  margin: 0 0 clamp(22px, 3vw, 32px);
  color: var(--pbs-body);
  font-size: 15px;
  line-height: 1.85;
}
/* On the sign-in screen the lead sits directly above the heading that names the
   form, so it reads as one opening rather than two separated paragraphs. */
.pbs-flow-account .woocommerce > .pbs-account__lead { margin-bottom: 8px; }

/* With registration on the headings move down a level, inside the two columns
   WooCommerce builds, and stop being direct children of the wrapper. */
.pbs-flow-account .woocommerce > h2,
.pbs-flow-account .woocommerce-MyAccount-content > h2,
.pbs-account-register #customer_login h2 {
  margin: 0 0 18px;
  font: 300 clamp(20px, 2.4vw, 26px)/1.2 var(--pbs-heading);
}
body.pbs-flow-account:not(.logged-in) .woocommerce,
body.pbs-flow-account:not(.logged-in) .pbs-flow__body { max-width: 520px; }
body.pbs-flow-account:not(.logged-in) .woocommerce > h2 { margin-bottom: 14px; }

/*
 * Two forms, one panel. `pbs-account-register` is only ever on the body of a
 * signed-out account page with registration on, so the signed-out panel above is
 * widened to the full container: the pair of columns then lines up with both
 * edges of the heading band instead of stopping short of the right one.
 */
body.pbs-flow-account.pbs-account-register .woocommerce,
body.pbs-flow-account.pbs-account-register .pbs-flow__body { max-width: none; }
.pbs-account-register #customer_login {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin: 0;
}
/* The two clear pseudo-elements WooCommerce floats its column sets with count as
   grid items and take the first cell, leaving the sign-in half underneath. */
.pbs-account-register #customer_login::before,
.pbs-account-register #customer_login::after { content: none; }
.pbs-account-register #customer_login .u-column1,
.pbs-account-register #customer_login .u-column2 {
  flex-basis: auto;
  max-width: none;
  width: auto;
  padding: 0;
}
/* On a phone the pair is stacked, so the lead reads as the opening of the sign-in
   half and needs the same gap above it that it had beside the columns. */
body.pbs-flow-account.pbs-account-register .pbs-account__lead { margin-bottom: clamp(20px, 2.6vw, 28px); }

/* Both halves of the signed-out panel carry their own weight as a bordered panel,
   so they sit on the paper rather than on the soft grey the heading band uses. */
.pbs-flow-account form.woocommerce-form-login,
.pbs-flow-account form.woocommerce-form-register {
  max-width: 460px;
  border: 1px solid var(--pbs-line);
  padding: clamp(20px, 2.6vw, 28px);
}
.pbs-flow-account .woocommerce-form-login .form-row,
.pbs-flow-account .woocommerce-form-register .form-row { margin: 0 0 16px; }
.pbs-flow-account .woocommerce-form-login .form-row .required,
.pbs-flow-account .woocommerce-form-register .form-row .required { color: var(--pbs-alert); }
.pbs-flow-account .woocommerce-form-login .input-text,
.pbs-flow-account .woocommerce-form-register .input-text { width: 100%; }
.pbs-flow-account .woocommerce-form-login .form-row.form-row-first { width: 100%; float: none; }
.pbs-flow-account .woocommerce-form-login .form-row .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; }
.pbs-flow-account .woocommerce-form-login .form-row .woocommerce-form-login__rememberme label { display: inline; }
/* The note about the password link, and the privacy text under it, are the only
   text in the register form that is not a field. The one unclassed <p> WooCommerce
   prints for the note is picked out by leaving the form rows alone. */
.pbs-flow-account .woocommerce-form-register > p:not(.form-row),
.pbs-flow-account .woocommerce-form-register .woocommerce-privacy-policy-text {
  margin: 0 0 16px;
  color: var(--pbs-muted);
  font-size: 13px;
  line-height: 1.7;
}
.pbs-flow-account .woocommerce-form-register .woocommerce-privacy-policy-text p { margin: 0; }
.pbs-flow-account .woocommerce-form-register .woocommerce-privacy-policy-link { border-bottom: 1px solid var(--pbs-line); }
/* Buttons in the signed-out panel fill their form; buttons that save an account
   form keep their own width, next to fields that are already long. */
.pbs-flow-account .woocommerce-form-login__submit,
.pbs-flow-account .woocommerce-form-register__submit {
  width: 100%;
  min-height: 48px;
  margin-top: 6px;
}
.pbs-flow-account .woocommerce-MyAccount-content form .button[type="submit"] {
  min-width: 200px;
  min-height: 48px;
  margin-top: 8px;
}
.pbs-flow-account .lost_password { margin: 18px 0 0; font-size: 14px; }
.pbs-flow-account .lost_password a { border-bottom: 1px solid var(--pbs-line); }

/* Shared pieces --------------------------------------------------------------
   Headings, notes, inline links, outlined buttons and status badges read the
   same on every account page. */
.pbs-flow-account .woocommerce-MyAccount-content h2 {
  margin: 0 0 18px;
  font: 300 clamp(20px, 2.4vw, 24px)/1.25 var(--pbs-heading);
}
.pbs-account__empty { color: var(--pbs-muted); }
.pbs-flow-account .woocommerce-MyAccount-content mark {
  background: none;
  color: var(--pbs-ink);
  font-weight: 500;
}

.pbs-flow-account .woocommerce-Address .title .edit,
body.pbs-flow-account table.woocommerce-orders-table .button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--pbs-ink);
  border-radius: 0;
  background: transparent;
  padding: 7px 14px;
  color: var(--pbs-ink);
  font: 400 10px/1.3 var(--pbs-accent-font);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.pbs-flow-account .woocommerce-Address .title .edit:hover,
body.pbs-flow-account table.woocommerce-orders-table .button:hover { background: var(--pbs-ink); color: var(--pbs-paper); }

.pbs-status,
.pbs-flow-account .woocommerce-MyAccount-content mark.order-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--pbs-line);
  padding: 4px 10px;
  color: var(--pbs-ink);
  font: 400 10px/1.4 var(--pbs-accent-font);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}
.pbs-status::before,
.pbs-flow-account .woocommerce-MyAccount-content mark.order-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pbs-ink);
}
.pbs-status--completed::before { background: var(--pbs-success); }
.pbs-status--pending::before,
.pbs-status--on-hold::before,
.pbs-status--checkout-draft::before { background: var(--pbs-muted); }
.pbs-status--cancelled::before,
.pbs-status--failed::before,
.pbs-status--refunded::before { background: var(--pbs-alert); }

/* Dashboard ------------------------------------------------------------------ */
.pbs-account-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(8px, 1.4vw, 14px);
}
.pbs-account-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--pbs-line);
  padding: clamp(20px, 2.4vw, 26px);
}
.pbs-flow-account .woocommerce-MyAccount-content .pbs-account-card__label {
  margin: 0 0 4px;
  color: var(--pbs-muted);
  font: 400 10px/1.4 var(--pbs-accent-font);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.pbs-account-card__title { margin: 0; font: 300 20px/1.25 var(--pbs-heading); }
.pbs-account-card__text {
  margin: 0;
  color: var(--pbs-body);
  font-size: 14px;
  font-style: normal;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.pbs-account-card__link {
  margin-top: auto;
  padding-top: 8px;
  color: var(--pbs-ink);
  font: 400 10px/1.4 var(--pbs-accent-font);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pbs-account-card__link::after { content: ' \2192'; }
.pbs-account-card__link:hover { color: var(--pbs-muted); }

/* Addresses ------------------------------------------------------------------
   WooCommerce floats the two cards at 48% and clears them with two `display:
   table` pseudo-elements; in a grid those take the first cells and the floats
   shrink each card to half its track, which staggered the pair. */
.pbs-flow-account .woocommerce-Addresses,
.pbs-flow-account .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin: 0;
}
.pbs-flow-account .woocommerce-Addresses::before,
.pbs-flow-account .woocommerce-Addresses::after,
.pbs-flow-account .woocommerce-columns--addresses::before,
.pbs-flow-account .woocommerce-columns--addresses::after { content: none; }
.pbs-flow-account .woocommerce-Addresses .woocommerce-Address,
.pbs-flow-account .woocommerce-columns--addresses .woocommerce-column {
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
}
.pbs-flow-account .woocommerce-Address {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pbs-line);
  padding: clamp(20px, 2.4vw, 26px);
}
.pbs-flow-account .woocommerce-Address .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--pbs-faint);
  padding-bottom: 16px;
}
.pbs-flow-account .woocommerce-Address .title::before,
.pbs-flow-account .woocommerce-Address .title::after { content: none; }
.pbs-flow-account .woocommerce-MyAccount-content .woocommerce-Address .title h2 {
  margin: 0;
  float: none;
  font: 300 20px/1.25 var(--pbs-heading);
}
.pbs-flow-account .woocommerce-Address .title .edit { float: none; }
.pbs-flow-account .woocommerce-Address address,
.pbs-flow-account .woocommerce-customer-details address {
  margin: 0;
  color: var(--pbs-body);
  font-size: 14px;
  font-style: normal;
  line-height: 1.85;
}

/* Orders --------------------------------------------------------------------- */
body.pbs-flow-account table.woocommerce-orders-table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
}
body.pbs-flow-account table.woocommerce-orders-table th,
body.pbs-flow-account table.woocommerce-orders-table td {
  border: 0;
  border-bottom: 1px solid var(--pbs-faint);
  padding: 18px 16px 18px 0;
  color: var(--pbs-body);
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
}
body.pbs-flow-account table.woocommerce-orders-table thead th {
  border-bottom: 1px solid var(--pbs-line);
  padding-block: 0 12px;
  color: var(--pbs-muted);
  font: 400 10px/1.4 var(--pbs-accent-font);
  letter-spacing: .16em;
  text-transform: uppercase;
}
body.pbs-flow-account .woocommerce-orders-table__cell-order-number a {
  color: var(--pbs-ink);
  font-weight: 500;
}
body.pbs-flow-account table.woocommerce-orders-table th:last-child,
body.pbs-flow-account table.woocommerce-orders-table td:last-child { padding-right: 0; text-align: right; }
body.pbs-flow-account .woocommerce-orders-table__cell-order-actions { white-space: nowrap; }
body.pbs-flow-account .woocommerce-orders-table__cell-order-actions .button + .button { margin-left: 8px; }
.pbs-flow-account .woocommerce-pagination { display: flex; justify-content: space-between; margin-top: 24px; }

/* Order details -------------------------------------------------------------- */
.pbs-flow-account .woocommerce-MyAccount-content > p:has(> mark.order-number) {
  margin: 0 0 clamp(26px, 3.4vw, 36px);
  color: var(--pbs-body);
  font-size: 15px;
  line-height: 2;
}
body.pbs-flow-account table.woocommerce-table--order-details {
  width: 100%;
  border: 0;
  border-collapse: collapse;
}
body.pbs-flow-account table.woocommerce-table--order-details th,
body.pbs-flow-account table.woocommerce-table--order-details td {
  border: 0;
  border-bottom: 1px solid var(--pbs-faint);
  padding: 15px 0;
  color: var(--pbs-body);
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}
body.pbs-flow-account table.woocommerce-table--order-details .product-total,
body.pbs-flow-account table.woocommerce-table--order-details tfoot td { text-align: right; }
body.pbs-flow-account table.woocommerce-table--order-details thead th {
  border-bottom-color: var(--pbs-line);
  padding-top: 0;
  color: var(--pbs-muted);
  font: 400 10px/1.4 var(--pbs-accent-font);
  letter-spacing: .16em;
  text-transform: uppercase;
}
body.pbs-flow-account table.woocommerce-table--order-details .product-name a { color: var(--pbs-ink); }
body.pbs-flow-account table.woocommerce-table--order-details .product-quantity { color: var(--pbs-muted); font-weight: 400; }
body.pbs-flow-account table.woocommerce-table--order-details .wc-item-meta {
  margin: 6px 0 0;
  padding: 0;
  color: var(--pbs-muted);
  font-size: 12.5px;
  list-style: none;
}
body.pbs-flow-account table.woocommerce-table--order-details .wc-item-meta p { display: inline; margin: 0; }
body.pbs-flow-account table.woocommerce-table--order-details tfoot th,
body.pbs-flow-account table.woocommerce-table--order-details tfoot td {
  padding-block: 11px;
  font: 400 14px/1.6 var(--pbs-body-font);
  letter-spacing: 0;
  text-transform: none;
  vertical-align: baseline;
}
body.pbs-flow-account table.woocommerce-table--order-details tfoot tr:last-child th,
body.pbs-flow-account table.woocommerce-table--order-details tfoot tr:last-child td {
  border-top: 1px solid var(--pbs-line);
  border-bottom: 0;
  padding-top: 16px;
  color: var(--pbs-ink);
  font-size: 17px;
  font-weight: 500;
}
.pbs-flow-account .woocommerce-customer-details { margin-top: clamp(32px, 4vw, 44px); }
.pbs-flow-account .woocommerce-customer-details address {
  border: 1px solid var(--pbs-line);
  padding: clamp(20px, 2.4vw, 26px);
}
.pbs-flow-account .woocommerce-customer-details address p {
  margin: 0;
  padding-left: 0;
  color: var(--pbs-muted);
}
.pbs-flow-account .woocommerce-customer-details address p::before { display: none; }
.pbs-flow-account .woocommerce-customer-details address .woocommerce-customer-details--phone { margin-top: 12px; }
.pbs-flow-account .woocommerce-order-details .order-again { margin-top: 24px; }

/* Forms ----------------------------------------------------------------------
   The address form and the account details form share one layout: a two column
   grid where the first/last pairs sit side by side and everything else spans the
   row, inside the same readable measure. */
.pbs-flow-account .woocommerce-EditAccountForm,
.pbs-flow-account .woocommerce-MyAccount-content form:has(.woocommerce-address-fields) { max-width: 720px; }
.pbs-flow-account .woocommerce-address-fields__field-wrapper,
.pbs-flow-account .woocommerce-EditAccountForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 20px;
}
.pbs-flow-account .woocommerce-address-fields__field-wrapper > *,
.pbs-flow-account .woocommerce-EditAccountForm > * { grid-column: 1 / -1; }
.pbs-flow-account .woocommerce-address-fields__field-wrapper > .form-row-first,
.pbs-flow-account .woocommerce-EditAccountForm > .form-row-first { grid-column: 1; }
.pbs-flow-account .woocommerce-address-fields__field-wrapper > .form-row-last,
.pbs-flow-account .woocommerce-EditAccountForm > .form-row-last { grid-column: 2; }
.pbs-flow-account .woocommerce-EditAccountForm > .clear,
.pbs-flow-account .woocommerce-address-fields__field-wrapper > .clear { display: none; }
.pbs-flow-account .woocommerce-MyAccount-content .form-row {
  float: none;
  width: auto;
  margin: 0 0 18px;
  padding: 0;
}
.pbs-flow-account .woocommerce-MyAccount-content .form-row label,
.pbs-flow-account .woocommerce-form-login label,
.pbs-flow-account .woocommerce-form-register label {
  display: block;
  margin: 0 0 7px;
  color: var(--pbs-body);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .02em;
}
.pbs-flow-account .woocommerce-form-login .woocommerce-form-login__rememberme { display: flex; }
.pbs-flow-account .form-row .required { color: var(--pbs-alert); text-decoration: none; }
.pbs-flow-account .form-row .optional { color: var(--pbs-muted); }
.pbs-flow-account .woocommerce-MyAccount-content .form-row .input-text,
.pbs-flow-account .woocommerce-MyAccount-content .form-row select { width: 100%; }
.pbs-flow-account .woocommerce-MyAccount-content .form-row .woocommerce-input-wrapper { display: block; }
.pbs-flow-account .woocommerce-EditAccountForm span.description,
.pbs-flow-account .woocommerce-EditAccountForm em {
  display: block;
  margin-top: 7px;
  color: var(--pbs-muted);
  font-size: 12.5px;
  font-style: normal;
}
.pbs-flow-account fieldset {
  margin: 14px 0 clamp(22px, 3vw, 30px);
  border: 1px solid var(--pbs-line);
  padding: clamp(20px, 2.6vw, 28px) clamp(20px, 2.6vw, 28px) 4px;
}
.pbs-flow-account fieldset legend {
  padding: 0 10px;
  color: var(--pbs-muted);
  font: 400 10px/1.4 var(--pbs-accent-font);
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Below 760px the three flows are one column. The blocks stack themselves at
   700px of inline width, so the summary ends up under the content on its own and
   only the row rules and the field widths need adjusting. */
@media (max-width: 760px) {
  .pbs-pagehead__title { font-size: clamp(28px, 7.4vw, 40px); }
  body.pbs-flow-cart .wc-block-cart-items .wc-block-cart-items__header-image { width: 108px; }
  body.pbs-flow-cart .wc-block-cart-item__image img { width: 84px; height: 84px; }
  body.pbs-flow-cart .wc-block-cart-item__image { padding-right: 18px; }
  body.pbs-flow-cart .wc-block-cart__submit { padding: 16px; }
  .pbs-flow-account .woocommerce-Addresses,
  .pbs-flow-account .woocommerce-columns--addresses,
  .pbs-account-overview { grid-template-columns: minmax(0, 1fr); }

  /* WooCommerce's responsive table: each order becomes a stacked block, with
     the column name printed beside each value from its data-title. */
  body.pbs-flow-account table.woocommerce-orders-table thead { display: none; }
  body.pbs-flow-account table.woocommerce-orders-table tr {
    display: block;
    border-bottom: 1px solid var(--pbs-line);
    padding: 10px 0;
  }
  /* Block cells with the label floated left, so a value made of several pieces
     (the total and its item count) stays together on the right. */
  body.pbs-flow-account table.woocommerce-orders-table th,
  body.pbs-flow-account table.woocommerce-orders-table td {
    display: flow-root;
    border: 0;
    padding: 8px 0;
    line-height: 26px;
    text-align: right;
  }
  body.pbs-flow-account table.woocommerce-orders-table th::before,
  body.pbs-flow-account table.woocommerce-orders-table td::before {
    content: attr(data-title);
    float: left;
    color: var(--pbs-muted);
    font: 400 10px/26px var(--pbs-accent-font);
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  body.pbs-flow-account table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before { content: none; }

  /* A notice's button drops under its text instead of squeezing it. */
  .pbs-flow .woocommerce-message:has(> .button),
  .pbs-flow .woocommerce-info:has(> .button) { flex-direction: column; align-items: flex-start; }
  .pbs-flow .woocommerce-message .button,
  .pbs-flow .woocommerce-info .button,
  .pbs-flow .woocommerce-error .button { margin: 0; }
  /* Two 460px panels need more room than a phone has. Below this the pair is one
     column and the panel is allowed the width it is given. */
  body.pbs-flow-account.pbs-account-register .woocommerce,
  body.pbs-flow-account.pbs-account-register .pbs-flow__body { max-width: 520px; }
  .pbs-account-register #customer_login { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .pbs-flow-account .woocommerce-address-fields__field-wrapper,
  .pbs-flow-account .woocommerce-EditAccountForm { grid-template-columns: minmax(0, 1fr); }
  .pbs-flow-account .woocommerce-address-fields__field-wrapper > .form-row-last,
  .pbs-flow-account .woocommerce-EditAccountForm > .form-row-last { grid-column: 1; }
  .pbs-flow-account .woocommerce-MyAccount-content form .button[type="submit"] { width: 100%; }
  .woocommerce-MyAccount-navigation ul { gap: 0 18px; }
}

/* ==========================================================================
   Storefront: responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .woocommerce ul.products.columns-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* The summary needs enough room to hold a product name on a line or two. */
  body.pbs-flow-account.logged-in .pbs-flow__body > .woocommerce { grid-template-columns: 200px minmax(0, 1fr); }
}

/* Keep the buy column in view while scrolling a tall gallery. */
@media (min-width: 981px) {
  body.pbs-commerce .product.pbs-product-single .summary {
    position: sticky;
    top: 100px;
  }
}

@media (max-width: 980px) {
  .pbs-shop-layout { grid-template-columns: minmax(0, 1fr); }

  /*
   * Below this the account navigation is a row of links above the form rather
   * than a column beside it, because a 232px track next to a form leaves the
   * fields too narrow to fill.
   */
  body.pbs-flow-account.logged-in .pbs-flow__body > .woocommerce { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3vw, 28px); }
  .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 0 24px; border-top: 0; border-bottom: 1px solid var(--pbs-line); }
  .woocommerce-MyAccount-navigation li { border-bottom: 0; }
  .woocommerce-MyAccount-navigation a { padding: 12px 0; }
  .woocommerce-MyAccount-navigation a:hover { background: none; }
  .woocommerce-MyAccount-navigation .is-active a { box-shadow: inset 0 -2px 0 var(--pbs-ink); background: none; }

  /* The sticky summary stops earning its place once it sits below the content. */
  body.pbs-flow-cart .wp-block-woocommerce-cart .wc-block-cart__sidebar,
  body.pbs-flow-checkout .wc-block-checkout__sidebar { position: static; }
  .pbs-filter-toggle { display: inline-flex; }
  .pbs-shop-toolbar .woocommerce-ordering { margin-left: auto; }

  /* Filters become a bottom sheet instead of being hidden entirely. */
  .pbs-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: block;
    background: rgb(8 8 8 / .38);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .pbs-filter-backdrop.is-open { opacity: 1; visibility: visible; }
  .pbs-shop-sidebar {
    position: fixed;
    z-index: 91;
    top: 0;
    right: 0;
    left: 0;
    max-height: 88vh;
    padding: 24px 22px 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--pbs-paper);
    box-shadow: 0 24px 60px rgb(0 0 0 / .18);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .34s cubic-bezier(.22, .8, .3, 1), visibility .34s;
  }
  .pbs-shop-sidebar.is-open { transform: none; visibility: visible; }
  .pbs-shop-sidebar__close { display: inline-flex; }
  .pbs-shop-sidebar__head { padding-bottom: 16px; }

  .pbs-product__main { grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 4vw, 40px); }
  body.pbs-commerce .product.pbs-product-single .summary { padding-bottom: 8px; }

  /* Stack the photo above its details; the stage grows to fit both. */
  .pbs-hero-carousel__stage { height: clamp(440px, 82vw, 620px); }
  .pbs-hero-slide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    gap: clamp(16px, 3vw, 26px);
  }
  /*
   * Stacked, the media column is already as wide as the screen, so a fixed 4:5
   * ratio would push the row past the stage. Let the flexible row size it instead.
   */
  .pbs-hero-slide__media { aspect-ratio: auto; }
  /*
   * Stacked, the details end the stage, and the progress bar sits directly against
   * it with no margin. Without this the View product button rests on the bar.
   */
  .pbs-hero-slide__info {
    align-self: end;
    justify-items: start;
    padding-bottom: clamp(20px, 3.4vw, 30px);
  }
}

@media (max-width: 900px) {
  .woocommerce ul.products,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.pbs-commerce .product.pbs-product-single .related ul.products.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 650px) {
  .pbs-rail__head { flex-wrap: wrap; gap: 10px 16px; }
  .pbs-rail__actions { width: 100%; justify-content: space-between; }

  .pbs-shop-header .pbs-shop-header__title { font-size: clamp(30px, 9vw, 44px); }
  .pbs-shop-toolbar { align-items: center; gap: 12px; }
  .pbs-shop-toolbar .woocommerce-ordering { margin-left: 0; width: 100%; }
  .pbs-shop-toolbar .woocommerce-ordering select { width: 100%; }
  .pbs-active-filters { gap: 6px; }

  .woocommerce ul.products { gap: 26px 12px; margin-top: 20px; }
  .woocommerce ul.products.columns-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pbs-product-card__details { padding-top: 11px; }
  .pbs-product-card__title { font-size: 13px; }
  .pbs-product-card__price { font-size: 12.5px; }
  .pbs-product-card__meta { flex-direction: column; align-items: flex-start; gap: 2px; }
  .pbs-product-card__cue { width: 34px; height: 34px; opacity: 1; transform: none; }

  body.pbs-commerce .product.pbs-product-single .product_title { font-size: clamp(26px, 7.6vw, 34px); }
  body.pbs-commerce .product.pbs-product-single form.cart { gap: 10px; }
  body.pbs-commerce .product.pbs-product-single .quantity .qty { width: 74px; }
  body.pbs-commerce .product.pbs-product-single form.cart .pbs-qty-stepper { width: 38px; }
  body.pbs-commerce .product.pbs-product-single button.single_add_to_cart_button { flex-basis: 100%; }
  .pbs-product-meta__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pbs-product-pager { grid-template-columns: minmax(0, 1fr); }
  .pbs-product-pager__item--next { align-items: flex-start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  /* scrollBy({ behavior: 'smooth' }) is not covered by the rule above. */
  .pbs-rail__track { scroll-behavior: auto; }
  .pbs-hero-slide.is-active { animation: none; }
  .pbs-hero-progress__fill[data-state='active'] { animation: none; transform: scaleX(0); }
}

/* Coming soon -----------------------------------------------------------------
 * coming-soon.php, shown in place of the store while WooCommerce's "Coming soon"
 * mode is on. Text on the left, set in the portfolio home hero's type, and one of
 * Pat's paintings filling the right half to the edge of the viewport.
 * -------------------------------------------------------------------------- */
.pbs-soon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: max(560px, calc(100svh - 77px));
}
.pbs-soon__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Lines the text up with the content column every other store page uses. */
  padding: clamp(56px, 7vw, 96px) clamp(32px, 5vw, 80px) clamp(56px, 7vw, 96px) max(22px, calc((100vw - var(--pbs-content-width)) / 2));
}
.pbs-soon__text > * { max-width: 500px; }
.pbs-soon .pbs-eyebrow { margin-bottom: 20px; }
.pbs-soon__title {
  margin: 0;
  font: 300 clamp(44px, 6vw, 84px)/1.02 var(--pbs-heading);
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.pbs-soon__lead {
  margin: clamp(22px, 2.6vw, 30px) 0 clamp(28px, 3.4vw, 38px);
  color: var(--pbs-body);
  font-size: 15px;
  line-height: 1.9;
}
.pbs-soon__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}
.pbs-soon__cta {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--pbs-ink);
  background: var(--pbs-paper);
  padding: 0 18px;
  color: var(--pbs-ink);
  font: 400 10px/1.4 var(--pbs-accent-font);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.pbs-soon__cta:hover { background: var(--pbs-ink); color: var(--pbs-paper); }
.pbs-soon__link {
  border-bottom: 1px solid var(--pbs-line);
  padding-bottom: 3px;
  color: var(--pbs-ink);
  font: 400 10px/1.4 var(--pbs-accent-font);
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: border-color .2s ease;
}
.pbs-soon__link:hover { border-color: var(--pbs-ink); }
.pbs-soon__follow {
  margin-top: clamp(44px, 6vw, 72px);
  border-top: 1px solid var(--pbs-line);
  padding-top: 18px;
}
.pbs-soon__follow-label {
  margin: 0 0 10px;
  color: var(--pbs-muted);
  font: 400 10px/1.5 var(--pbs-accent-font);
  letter-spacing: .19em;
  text-transform: uppercase;
}
.pbs-soon__follow ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pbs-soon__follow a {
  color: var(--pbs-body);
  font-size: 13px;
  transition: color .2s ease;
}
.pbs-soon__follow a:hover { color: var(--pbs-ink); }
.pbs-soon__art {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #3a63c9;
}
.pbs-soon__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keeps the crescent in frame however the column is cropped. */
  object-position: 45% 18%;
  animation: pbs-soon-art 1.8s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes pbs-soon-art {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .pbs-soon { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pbs-soon__art { order: -1; height: clamp(240px, 52vw, 420px); }
  .pbs-soon__text { padding: clamp(36px, 7vw, 56px) 20px clamp(48px, 9vw, 72px); }
  .pbs-soon__title { font-size: clamp(40px, 11vw, 64px); }
}

@media (prefers-reduced-motion: reduce) {
  .pbs-soon__art img { animation: none; }
}