/* Pierre-Bex */

:root {
  /* Colors */
  --color-beige-light: #e5dbc7;
  --color-beige: #fbf5e8;
  --color-beige-dark: #e2d2b0;
  --color-purple: #707;
  --color-green-dark: #050;
  --color-green-muted: #292;
  --color-red-very-light: #ecc;
  --color-red-bright: #e00;
  --color-red-deep: #700;
  --color-red-dark: #900;
  --color-red-visited: #b00;
  --color-red-active: #b55;
  --color-red-muted: #733;
  --color-gray-very-light: #eee;
  --color-gray-light: #ddd;
  --color-gray-medium: #888;

  /* Border Radius */
  --radius-md: 12px;

  /* Content Width */
  --content-max-width: 800px;
}

a           { color: var(--color-red-deep); text-decoration: none}
a:hover     { color: var(--color-red-bright); text-decoration: underline}
a:visited   { color: var(--color-red-visited); }
a:active    { color: var(--color-red-active); text-decoration: underline}
.f-caption {
  a           { color:#a33; }
  a:hover     { color:#f66; }
  a:visited   { color:#f33; }
  a:active    { color:#f88; }
}

img {
  border: 0;
}

dl {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
}
dt,
dd {
  margin-bottom: 12px;
}
dt {
  font-weight: bold;
  color: var(--color-green-dark);
}
dt::after {
  content: ":";
}

.material-icons {
  /* Reserve a fixed, font-load-independent box so the icon font swap
     (triggered by bundle.js, loaded at the end of body) can't shift
     the header nav or any other layout using icons. See CLS fix. */
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  vertical-align: middle;
}

#payment-methods {
  margin: 1em 0 2em 3em;
  input {
    margin-top: 2em;
  }
}

.a12e   { font-size: 120%; color: #000000; }
.a10e   { font-size: 100%; color: #000000; }
.a08e   { font-size: 80%; color: #000000; }

.ab12e  { font-size: 120%; font-weight: bold; color: #000000; }
.ab10e  { font-size: 100%; font-weight: bold; color: #000000; }
.ab08e  { font-size: 80%; font-weight: bold; color: #000000; }

.b18e   { font-size: 180%; color: var(--color-green-dark); }
.b16e   { font-size: 160%; color: var(--color-green-dark); }
.b14e   { font-size: 140%; color: var(--color-green-dark); }
.b12e   { font-size: 120%; color: var(--color-green-dark); }
.b10e   { font-size: 100%; color: var(--color-green-dark); }
.b08e   { font-size: 80%; color: var(--color-green-dark); }

.bb18e  { font-size: 180%; font-weight: bold; color: var(--color-green-dark); }
.bb16e  { font-size: 160%; font-weight: bold; color: var(--color-green-dark); }
.bb14e  { font-size: 140%; font-weight: bold; color: var(--color-green-dark); }
.bb12e  { font-size: 120%; font-weight: bold; color: var(--color-green-dark); }
.bb10e  { font-size: 100%; font-weight: bold; color: var(--color-green-dark); }
.bb08e  { font-size: 80%; font-weight: bold; color: var(--color-green-dark); }

.c10e   { font-size: 100%; color: var(--color-red-dark); }
.c08e   { font-size: 80%; color: var(--color-red-dark); }

.cb14e  { font-size: 140%; font-weight: bold; color: var(--color-red-dark); }
.cb12e  { font-size: 120%; font-weight: bold; color: var(--color-red-dark); }
.cb10e  { font-size: 100%; font-weight: bold; color: var(--color-red-dark); }

.db10e  { font-size: 100%; font-weight: bold; color: var(--color-purple); }

.doke   { font-size: 180%; font-weight: bold; color: #0b0}
.dnoke  { font-size: 180%; font-weight: bold; color: var(--color-red-bright)}
.nerr   { font-size: 100%; font-weight: bold; color: var(--color-red-bright)}
.nerre  { font-size: 100%; color: var(--color-red-bright)}

.pmnu0 { font-size: 90%; background-color: white}
.pmnu1 { font-size: 90%; background-color: var(--color-beige)}
.pmnum { font-size: 75%; background-color: var(--color-beige)}

.pbmnu0 { font-size: 90%; font-weight: bold; background-color: white}
.pbmnu1 { font-size: 90%; font-weight: bold; background-color: var(--color-beige)}

table.listing {
  background-color: var(--color-beige);
  thead {
    font-weight: bold;
  }
  th,
  td {
    padding: 8px;
    border: none;
  }
  th,
  tbody td {
    border-bottom: 1px solid var(--color-gray-light);
  }
}

body {
  background: var(--color-beige);
  margin: 0;
  font-family: Arial, Verdana, sans-serif;
}

main {
  background-image: url(/ima/lace.gif);
  padding-top: 28px;
}

#page-content {
  padding: 8px 32px;
  margin: 0 auto;
  max-width: var(--content-max-width);
  min-height: 60%;
  padding-bottom: 12px;
  text-align: left;
}

table {
  margin: 0 auto;
}

header {
  text-align: center;
  padding-bottom: 60px;
  nav {
    background: var(--color-beige);
    box-shadow: 0px 0px 2px #00000029, 0px 4px 8px #00000014;
    font-family: 'Times New Roman', Times, serif;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      text-align: center;
      li {
        display: inline-block;
        white-space: nowrap;
        color: var(--color-red-dark);
        font-weight: bold;
        a {
          display: block;
          padding: 8px;
        }
        a:hover {
          background: var(--color-red-very-light);
          text-decoration: none;
        }
        span {
          display: block;
          font-variant: small-caps;
        }
      }
    }
  }
}
/* Cart item-count badge on the header's basket icon -- higher specificity
   than the (max-width: 480px) span { display: none; } rule below on
   purpose (a class beats any number of plain element selectors), so it
   stays visible there even though every other nav label text hides. */
.cart-link {
  position: relative;
}
.cart-badge {
  display: inline-block;
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  padding: 2px 4px;
  border-radius: 999px;
  background: var(--color-red-bright);
  color: #fff;
  font-size: 65%;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  /* Same [hidden]-vs-same-specificity-class issue as .cart-sidebar[hidden]
     below -- an unconditional display: inline-block here would otherwise
     beat the browser's own [hidden] { display: none } default. */
  &[hidden] {
    display: none;
  }
}
/* Plays once the flyToCart() animation lands (see index.ts) -- confirms
   the item actually arrived at the basket. */
@keyframes cart-badge-pulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.4);
  }
  100% {
    transform: scale(1);
  }
}
.cart-badge-pulse {
  animation: cart-badge-pulse 0.4s ease;
}
header nav ul li.preferences {
  position: relative;
  details {
    display: block;
  }
  summary {
    display: block;
    padding: 8px;
    cursor: pointer;
    list-style: none;
    color: var(--color-red-dark);
    font-weight: bold;
    &::-webkit-details-marker { display: none; }
    &:hover { background: var(--color-red-very-light); }
  }
  .preferences-popup {
    position: absolute;
    right: 0;
    top: 100%;
    background: var(--color-beige);
    box-shadow: 0px 2px 8px #00000033;
    padding: 0.75rem 1rem;
    z-index: 10;
    min-width: 200px;
    border-radius: 4px;
    text-align: left;
    h4 {
      margin: 0.5rem 0 0.4rem;
      font-size: 80%;
      text-transform: uppercase;
      color: var(--color-gray-medium);
      font-weight: normal;
      letter-spacing: 0.05em;
    }
    section + section { margin-top: 0.5rem; }
  }
  .lang-options {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    a {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 12px;
      border: 1px solid var(--color-beige-dark);
      font-size: 85%;
      font-weight: bold;
      color: var(--color-red-dark);
      &:hover { background: var(--color-red-very-light); text-decoration: none; }
      &.active { background: var(--color-red-dark); color: var(--color-beige); }
    }
  }
  #currency-form {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .currency-btn {
    padding: 3px 8px;
    border-radius: 12px;
    border: 1px solid var(--color-beige-dark);
    background: transparent;
    font-size: 85%;
    font-weight: bold;
    color: var(--color-red-dark);
    cursor: pointer;
    font-family: inherit;
    &:hover { background: var(--color-red-very-light); }
    &.active { background: var(--color-red-dark); color: var(--color-beige); }
  }
}
@media screen and (min-width: 768px) {
  header {
    padding-bottom: 48px;
    nav ul {
      li {
        a {
          display: inherit;
        }
        span {
          display: inherit;
        }
      }
      li.preferences details {
        display: inherit;
      }
      li.preferences summary {
        display: inherit;
      }
      li:not(:first-child):before {
        content: " | ";
        margin: 0 6px;
      }
    }
  }
}
@media screen and (max-width: 400px) {
  header nav ul li.preferences .preferences-popup {
    right: auto;
    left: 0;
    min-width: 180px;
  }
}
@media screen and (max-width: 480px) {
  header nav ul li a span,
  header nav ul li.preferences summary span {
    display: none;
  }
}
/* Between icon-only (480px and below) and full desktop (768px and up,
   its own min-width query above) -- the nav's 6 items' own unwrapped
   labels ("Language & Currency" and friends) are wider combined than a
   mid-width viewport like ~600px, and inline-block items that don't fit
   would otherwise each bump down to their own new row, one per line,
   rather than wrapping their own label text within a shared row. flex
   (equal-width slots) plus min-width: 0 (flex items don't shrink below
   their content's own unbroken width by default) lets each item's label
   wrap onto a second line instead, keeping every icon on one row. */
@media screen and (min-width: 481px) and (max-width: 767px) {
  header nav ul {
    display: flex;
    li {
      flex: 1 1 0;
      min-width: 0;
      white-space: normal;
    }
  }
  /* Wrapped labels make the fixed nav taller here (up to ~85px, vs.
     ~40px on one line) -- header's own padding-bottom (which reserves
     the space main's content, including the breadcrumb, starts below)
     needs to grow to match, same "keep it lined up with the fixed nav's
     real height" convention as the base and 768px+ rules already
     follow, or the breadcrumb ends up partly hidden under the nav. */
  header {
    padding-bottom: 92px;
  }
}

footer {
  background: var(--color-beige);
  text-align: center;
  padding-top: 4px;
  .nav-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    li {
      display: inline-block;
      white-space: nowrap;
      color: var(--color-red-dark);
      font-weight: bold;
      font-size: 80%;
    }
    li:not(:first-child):before {
      content: " | ";
      margin: 0 6px;
    }
  }
}

.debug,
.warning-header {
  z-index: 90;
  position: relative;
  margin: 5px;
  padding: 3px 8px 3px 8px;
  color: black;
  font-size: 10pt;
  font-weight: bold;
}
.debug {
  background-color: #88ff33;
  outline: thin solid #00ff00;
  position: fixed;
  right: 8px;
  top: 60px;
}
.warning-header {
  background-color: #ffaa33;
  outline: thin solid #ffee00;
}

#page-content:has(.item-details) {
  max-width: 1200px;
}
.item-details {
  .details {
    margin-left: 32px;
  }
  .price {
    margin-top: 40px;
    margin-bottom: 32px;
  }
  .item-attributes {
    margin-top: 16px;
    margin-bottom: 16px;
  }
}
@media screen and (min-width: 1200px) {
  .item-details {
    display: grid;
    grid-template-areas:
      "title title"
      "photo details";
    .photo {
      grid-area: photo;
    }
    h1 {
      grid-area: title;
    }
    .details {
      grid-area: details;
    }
  }
}
@media screen and (max-width: 1024px) {
  .item-details {
    .details {
      margin-left: 0;
    }
    .photo img {
      width: 100%;
      height: auto;
    }
  }
}

.back {
  margin-left: 20px;
}

h1,
h2 {
  font-family: 'Times New Roman', Times, serif;
}

h1 {
  color: var(--color-green-dark);
}

.notice {
  color: var(--color-purple);
  font-size: 11pt;
}

.important-notice {
  display: block;
  text-align: center;
  background: var(--color-beige);
  border: thin solid;
  color: var(--color-red-dark);
  font-size: 80%;
  font-weight: bold;
  padding: 4px;
}

.price {
  color: var(--color-green-dark);
  font-weight: bold;
}
.f-caption .price {
  color: var(--color-green-muted);
}

.big {
  font-size: 18pt;
}

.zoom {
  cursor: zoom-in;
}

#page-content:has(.items-catalog) {
  max-width: 920px;
}
.items-catalog table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 24px 16px;
  margin: 0 auto;
  width: 100%;
}
.items-catalog tbody,
.items-catalog tr {
  display: contents;
}

.item-preview {
  color: var(--color-green-dark);
  display: grid;
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: top;
  /* Anchors .quick-add-to-cart's own absolute positioning below. */
  position: relative;
  img.thumbnail {
    border: 2px solid var(--color-beige-dark);
    border-radius: var(--radius-md);
    width: 100%;
    max-width: 200px;
    height: auto;
    transition: transform 0.3s ease;
    &:hover {
      border-color: var(--color-red-bright);
      transform: scale(1.1);
    }
    &:visited {
      border-color: var(--color-red-visited);
    }
    &:active {
      border-color: var(--color-red-active);
    }
  }
  a.caption {
    .ref {
      font-weight: bold;
      padding: 4px;
    }
    .price {
      font-size: 80%;
      font-weight: normal;
      .price_decimals {
        font-size: smaller;
      }
    }
  }
  &:has(a.caption:hover) {
    background: var(--color-red-very-light);
    outline: 2px solid var(--color-red-deep);
    border-radius: var(--radius-md);
  }
}
/* Quick "Add to cart" pin on the card itself -- see _item-card.html's own
   comment for why it's a sibling of a.caption, not nested inside it. */
.quick-add-to-cart {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* Light -- not yet in the cart -- until .in-cart below says otherwise
     (see _item-card.html's own $inCart / index.ts's delegated handler). */
  background: var(--color-beige);
  border: 1px solid var(--color-beige-dark);
  color: var(--color-red-dark);
  box-shadow: 0px 2px 6px #00000033;
  &:hover {
    background: var(--color-red-very-light);
  }
  &.in-cart {
    background: var(--color-red-dark);
    border-color: var(--color-red-dark);
    color: var(--color-beige);
    &:hover {
      background: var(--color-red-bright);
      border-color: var(--color-red-bright);
    }
  }
  .material-icons {
    font-size: 18px;
  }
}
/* Zoom lightbox's own "Add to cart" button (see _item-card.html's
   {capture name='caption'}) -- same shape as the generic a.button, but
   kept as its own class since a.button is reused sitewide (item.html's
   "Add to basket", the mobile bar, ...) where this in-cart state doesn't
   apply. Mirrors .quick-add-to-cart's light/.in-cart colour states. */
.zoom-add-to-cart {
  display: inline-block;
  border: 2px solid black;
  border-radius: var(--radius-md);
  margin: 4px 12px;
  padding: 6px 12px;
  background: var(--color-beige);
  color: var(--color-red-dark);
  &:hover {
    background: var(--color-red-very-light);
  }
  &.in-cart {
    background: var(--color-red-dark);
    color: var(--color-beige-light);
    &:hover {
      background: var(--color-red-bright);
    }
  }
  .material-icons {
    display: block;
  }
}
.item-preview.sold-out {
  transition: opacity 0.3s ease;
  &:hover {
    opacity: 1.0;
  }
  img.thumbnail {
    border: thin dashed var(--color-gray-medium);
  }
  a {
    color: var(--color-gray-medium);
  }
  .price {
    color: var(--color-gray-medium);
    font-weight: normal;
  }
}

.caption {
  h2 {
    color: var(--color-green-dark);
    display: inline-block;
    font-size: 120%;
    font-weight: bold;
    margin: 0;
    margin-bottom: 4px;
    margin-right: 12px;
    .ref {
      font-weight: normal;
    }
  }
  .sold-out,
  .add-to-cart {
    display: inline-block;
    margin-bottom: 4px;
  }
}

.free-shipping {
  font-weight: bold;
  color: var(--color-purple);
}

.delivery-dates {
  font-size: 10pt;
  font-weight: bold;
}
.shipping-info .delivery-dates {
  min-height: 2.4em; /* fits the two-line worst case across locales, so the box can't resize either way */
}
.shipping-loading #shipping-costs,
.shipping-loading .delivery-dates {
  color: var(--color-gray-medium);
  font-style: italic;
}

.group-navigation {
  margin-bottom: 16px;
  margin-top: 12px;
  ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 12px;
    li a {
      background: var(--color-beige);
      border: 2px solid var(--color-red-dark);
      border-radius: 20px;
      color: var(--color-red-dark);
      display: block;
      font-weight: bold;
      padding: 8px 16px;
      text-decoration: none;
      &.active {
        background: var(--color-red-dark);
        color: var(--color-beige);
      }
      &:hover {
        background: var(--color-red-very-light);
      }
    }
  }
}
@media screen and (max-width: 480px) {
  .group-navigation ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 16px;
  }
}

nav.categories {
  max-width: var(--content-max-width);
  margin: 16px auto;
  padding: 0 16px;
  ul.sub-categories {
    display: grid;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
    li {
      a {
        border-radius: var(--radius-md);
        outline: 2px solid var(--color-red-dark);
        display: block;
        overflow: hidden;
        position: relative;
        text-decoration: none;
        &:hover {
          outline-width: 3px;
        }
        &.active {
          outline-width: 4px;
        }
        img {
          display: block;
          width: 100%;
          aspect-ratio: 4 / 3;
          object-fit: cover;
        }
        strong {
          background: #fff6;
          color: var(--color-red-dark);
          display: block;
          font-weight: bold;
          left: 0;
          margin-top: -12px;
          padding-top: 4px;
          padding-left: 2px;
          padding-right: 2px;
          padding-bottom: 16px;
          position: absolute;
          right: 0;
          text-align: center;
          text-shadow: 0 0 10px #fff;
          top: 100%;
          transform: translate(0, -50%);
        }
      }
    }
  }
  ul.sub-categories {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 768px) {
  main nav.categories {
    ul.sub-categories {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
}
@media screen and (max-width: 480px) {
  body > nav.categories {
    ul.sub-categories {
      display: none;
    }
  }
  main nav.categories {
    ul.sub-categories {
      grid-template-columns: 1fr 1fr;
    }
  }
}
@media screen and (max-width: 320px) {
  main nav.categories {
    ul.sub-categories {
      grid-template-columns: 1fr;
    }
  }
}
/* #home-categories and #search-category-browse are always exactly the 4
   top-level categories (unlike nav.categories' general use with many
   subcategories) -- ID selectors so this wins over the width-based
   overrides above regardless of source order. Bigger 2x2 tiles on wide
   screens instead of a cramped 3-up row with a lonely 4th. */
#home-categories.categories {
  max-width: 640px;
}
/* Unlike #home-categories above, not capped at 640px -- this is
   search.html's own "browse by top-level category" state (see
   search.html), so it should span #page-content's own full width, the
   same as .filter-bar/.search-results right below it, not sit narrower
   and centered inside that space. */
#search-category-browse.categories {
  max-width: none;
}
/* One level down (search.html's "browse this group's sub-categories"
   state, several of these, one per group) -- same reasoning as
   #search-category-browse above, but this one has no ID (there are
   several, one per $categoryFacets group, see search.html), so it needs
   two classes' worth of specificity to actually beat nav.categories'
   own max-width, not just one. */
.categories.search-subcategory-browse {
  max-width: none;
}
@media screen and (min-width: 768px) {
  #home-categories.categories ul.sub-categories,
  #search-category-browse.categories ul.sub-categories {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}
/* The 4 main categories (home page and search's own top-level browse) go
   full-width, one per row, below the 768px breakpoint the 2x2 rule above
   starts at -- no gap where the general nav.categories rules' own 2-column
   default would otherwise show through. ID selectors so this wins over
   those regardless of source order. */
@media screen and (max-width: 767px) {
  #home-categories.categories ul.sub-categories,
  #search-category-browse.categories ul.sub-categories {
    grid-template-columns: 1fr;
  }
}

.grecaptcha-badge {
  display: none;
}

fieldset {
  max-width: fit-content;
  margin: 0 auto;
  margin-bottom: 24px;
  background: var(--color-beige);
  border: 2px solid var(--color-red-dark);
  border-radius: var(--radius-md);
}

fieldset legend {
  font-size: 120%;
  font-weight: bold;
  color: var(--color-red-dark);
}

fieldset table th {
  text-align: right;
}

form.payment {
  text-align: center;
  fieldset.pay-method > div {
    text-align: left;
    margin: 8px;
  }
  fieldset.shipping-info label {
    align-items: flex-start;
    display: flex;
    flex-flow: row wrap;
    font-weight: bold;
    margin: 16px 0;
    text-align: left;
    span {
      flex: 0 0 16rem;
    }
    input,
    select,
    textarea {
      flex: 1 1 auto;
      min-width: 360px;
    }
  }
}

#email-form {
  label {
    font-weight: bold;
    display: flex;
    align-items: flex-start;
    flex-flow: row wrap;
    margin: 16px 0;
  }
  label span {
    flex: 0 0 16rem;
  }
  label input,
  label select,
  label textarea {
    flex: 1 1 auto;
    min-width: 360px;
  }
}

input[type=submit],
button[type=submit] {
  background: var(--color-red-dark);
  border-radius: var(--radius-md);
  color: var(--color-beige-light);
  cursor: pointer;
  font-weight: bolder;
  margin-bottom: 12px;
  padding: 8px 24px;
}
a.button {
  background: var(--color-red-dark);
  border: 2px solid black;
  border-radius: var(--radius-md);
  color: var(--color-beige-light);
  font-weight: bold;
  margin: 4px 12px;
  padding: 6px 12px;
}

hr {
  clear: both;
}

.main-categories {
  h2 {
    margin-bottom: 0;
  }
}

nav.categories h3 {
  color: var(--color-green-dark);
  border-bottom: 1px solid var(--color-gray-light);
  margin-top: 24px;
  margin-bottom: 12px;
  padding-bottom: 4px;
  font-size: 1.3rem;
}

nav.categories h3 a {
  color: inherit;
  text-decoration: none;
}

nav.categories h3 a:hover,
nav.categories h3 a:focus-visible {
  text-decoration: underline;
}

#page-content:has(#cart-summary) {
  #cart-summary {
    background: var(--color-beige);
    width: 100%;
    h2 {
      display: none;
    }
    button {
      align-items: center;
      background: #ffe;
      border: thin solid #660;
      display: grid;
      grid-template-columns: 1fr auto;
      padding: 0.5em;
      width: 100%;
      .expand-link {
        text-align: left;
        color: #00b;
        font-weight: bold;
      }
    }
    section {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows 0.3s ease-out;
      overflow: hidden;
      table {
        border: thin solid #660;
        border-top: none;
        width: 100%;
        min-height: 0;
      }
    }
    section.is-open {
      grid-template-rows: 1fr;
    }
  }
}
@media screen and (min-width: 1000px) {
  #page-content:has(#cart-summary) {
    display: grid;
    grid-template-areas:
      'title cart'
      'form cart';
    grid-template-columns: 2fr 1fr;
    max-width: inherit;
    padding-right: 0;
    > h1 {
      grid-area: title;
    }
    #cart-summary {
      grid-area: cart;
      margin: -50px 0 -20px 2em;
      padding: 60px 2em 30px 2em;
      width: auto;
      h2 {
        display: inherit;
      }
      button {
        display: none;
      }
      section {
        max-width: 600px;
        grid-template-rows: 1fr;
        overflow: visible;
        border: none;
        table {
          border: none;
        }
      }
    }
    > form.payment {
      grid-area: form;
    }
  }
}

/* Free shipping progress bar */
.free-shipping-progress {
  margin: 10px 0 20px 0;
  padding: 15px;
  background-color: var(--color-beige);
  border: 1px solid var(--color-beige-dark);
  border-radius: var(--radius-md);
  text-align: center;
  .message {
    margin-bottom: 10px;
    font-size: 110%;
  }
  .progress-bar-container {
    height: 14px;
    background-color: var(--color-gray-very-light);
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid var(--color-gray-medium);
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
  .progress-bar {
    height: 100%;
    background-color: var(--color-green-dark);
    width: 0;
    transition: width 0.3s ease;
  }
}

/* Breadcrumb */
.breadcrumb {
  align-items: center;
  border-bottom: 1px solid var(--color-beige-dark);
  color: var(--color-gray-medium);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.85rem;
  gap: 4px;
  justify-content: left;
  margin: 0 auto;
  max-width: var(--content-max-width);
  padding: 8px 24px;
  a {
    color: var(--color-red-dark);
    text-decoration: none;
    font-weight: bold;
  }
  a:hover {
    text-decoration: underline;
  }
  .breadcrumb .separator {
    font-size: 16px;
    color: var(--color-gray-light);
    vertical-align: middle;
  }
  .breadcrumb-home i {
    font-size: 16px;
    vertical-align: middle;
  }
  span {
    font-variant: small-caps;
    color: var(--color-gray-medium);
  }
}

/* Search results page's own "Refine search" box, above the filter chip
   bar below (see search.html). */
.search-box {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  input[type="search"] {
    padding: 6px 10px;
    border: 1px solid var(--color-beige-dark);
    border-radius: 999px;
    font-family: inherit;
    min-width: 140px;
  }
  button {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-red-dark);
    padding: 4px;
    display: flex;
    /* .material-icons' own vertical-align: middle has no effect here --
       that only applies in an inline-text formatting context, not to a
       flex item -- so without this the icon sat slightly above the
       input's own text baseline instead of centered in the button box. */
    align-items: center;
    justify-content: center;
  }
}

/* Search results page: a horizontal filter chip bar (Category,
   Sub-category, Colour, Price), each chip opening a dropdown panel, and a
   reset-filters button. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  /* Same [hidden]-vs-same-specificity-class issue as elsewhere in this
     file (e.g. .cart-sidebar) -- an author stylesheet's own unconditional
     display: ... ties with, and so beats, the UA stylesheet's own
     [hidden] { display: none } at equal specificity. Needed since
     search.html now hides this whole bar on a category/sub-category
     page. */
  &[hidden] {
    display: none;
  }
}
.filter-chip-group {
  position: relative;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid var(--color-beige-dark);
  border-radius: 999px;
  background: var(--color-beige);
  color: inherit;
  font-family: inherit;
  font-size: 90%;
  cursor: pointer;
  .chip-caret {
    font-size: 18px;
  }
  &[aria-expanded="true"] {
    border-color: var(--color-red-dark);
    color: var(--color-red-dark);
  }
}
.chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--color-red-dark);
  color: #fff;
  font-size: 75%;
  &[hidden] {
    display: none;
  }
}
.filter-panel {
  position: absolute;
  top: calc(100% + 6px);
  /* Baseline -- search.ts's clampPanelToViewport() overrides this with an
     inline style whenever the panel would otherwise overflow off-screen
     (its own chip is close enough to an edge that a fixed left/right rule
     here can't handle both directions at once, especially on mobile). */
  left: 0;
  z-index: 10;
  min-width: 220px;
  max-width: 90vw;
  max-height: 60vh;
  overflow-y: auto;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--color-beige-dark);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  text-align: left;
  fieldset {
    /* Reset to a plain block -- the <legend> exists for accessibility
       only (see .visually-hidden), the chip button already names this
       panel visibly. Background reset too: the global `fieldset` rule
       (checkout/payment forms) paints one, and this block never
       overrides that property otherwise, so it would win by default. */
    background: none;
    border: none;
    margin: 0;
    padding: 0;
  }
  h4 {
    font-size: 85%;
    margin: 10px 0 4px;
    &:first-child {
      margin-top: 0;
    }
  }
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    padding: 2px 0;
    white-space: nowrap;
    input:disabled {
      opacity: 0.4;
    }
  }
  .filter-panel-group[hidden] {
    display: none;
  }
}
.filter-panel-reset {
  display: block;
  margin: 0 0 8px auto;
  background: transparent;
  border: none;
  color: var(--color-red-dark);
  cursor: pointer;
  font-family: inherit;
  font-size: 85%;
  padding: 0;
  text-decoration: underline;
  &:disabled {
    color: var(--color-gray-medium);
    cursor: default;
    text-decoration: none;
  }
}
.filter-reset {
  background: transparent;
  border: none;
  color: var(--color-red-dark);
  cursor: pointer;
  font-family: inherit;
  font-size: 90%;
  padding: 6px 4px;
  text-decoration: underline;
  &[hidden] {
    display: none;
  }
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.facet-count {
  color: var(--color-gray-medium);
  font-size: 85%;
}
.color-swatch-list .swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--color-beige-dark);
}
.search-results {
  flex: 1 1 480px;
}
.search-results-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 20px;
  margin-bottom: 12px;
}

/* Result grid: same .item-preview card styling as category pages (the
   existing unscoped .item-preview img.thumbnail / .sold-out rules already
   cover this container's cards -- no need to re-declare them here), but a
   plain div grid instead of the <table>/display:contents trick, since
   results are a flat AJAX-appendable list rather than pre-chunked rows.
   .view-list/.view-grid-large (set by search.ts's view-style-control,
   default is the plain unmodified rule above -- "small grid") override
   the column count; .view-list also reflows each .item-preview itself
   into a row and reveals its .item-description (hidden everywhere else,
   including _item-card.html's other user, cart.html's order table). */
.items-catalog.search-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px 16px;
}
.items-catalog.search-grid.view-grid-large {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  /* img.thumbnail's own max-width: 200px (above) would otherwise still
     cap it there regardless of how wide this larger grid's own columns
     grow. */
  .item-preview img.thumbnail {
    max-width: 400px;
  }
}
.items-catalog.search-grid.view-list {
  grid-template-columns: 1fr;
  gap: 4px;
  .item-preview {
    display: flex;
    align-items: center;
    text-align: left;
    gap: 16px;
    padding: 8px 0;
    img.thumbnail {
      max-width: 160px;
      flex-shrink: 0;
    }
    a.caption {
      flex-shrink: 0;
      width: 100px;
    }
    .item-description {
      display: block;
      flex: 1 1 auto;
      margin: 0;
      font-size: 90%;
    }
  }
}
@media screen and (max-width: 767px) {
  /* Bigger still on mobile -- there's no multi-column grid competing for
     width there, so the thumbnail can afford to dominate each row. */
  .items-catalog.search-grid.view-list .item-preview img.thumbnail {
    max-width: 220px;
  }
}

.item-description {
  display: none;
}

/* Slider selecting the result grid's display density -- see
   .items-catalog.search-grid's .view-list/.view-grid-large rules above
   and search.ts's view-style-control. Purely a sticky per-browser
   display preference (localStorage), not a search filter. */
.view-style-control {
  display: flex;
  flex-direction: column;
  width: 160px;
  #view-style-range {
    width: 100%;
    /* Explicit height -- appearance: none strips whatever default height
       the browser would otherwise give the element itself (independent
       of the track/thumb pseudo-elements below), which without this
       collapses the whole control and pushes .view-style-labels up into
       it. Matches the thumb's own height so it isn't clipped. */
    height: 16px;
    margin: 0;
    /* Custom track + thumb instead of accent-color: that themes the
       thumb but also fills the track red up to it, reading as a
       "progress" line this isn't -- a plain neutral track with only the
       thumb (a light dot, like the filter chips' own colouring) picked
       out avoids that. */
    appearance: none;
    background: transparent;
    cursor: pointer;
    &::-webkit-slider-runnable-track {
      height: 4px;
      background: var(--color-beige-dark);
      border-radius: 2px;
    }
    &::-moz-range-track {
      height: 4px;
      background: var(--color-beige-dark);
      border-radius: 2px;
    }
    &::-webkit-slider-thumb {
      appearance: none;
      width: 16px;
      height: 16px;
      margin-top: -6px;
      border-radius: 50%;
      background: var(--color-beige-dark);
      border: 1px solid var(--color-gray-medium);
      cursor: pointer;
    }
    &::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--color-beige-dark);
      border: 1px solid var(--color-gray-medium);
      cursor: pointer;
    }
  }
  .view-style-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 75%;
    span {
      cursor: pointer;
      color: var(--color-gray-medium);
      &:hover {
        color: var(--color-red-dark);
      }
      &.active {
        color: #000;
        font-weight: bold;
      }
    }
  }
}

#search-load-more-container {
  text-align: center;
  margin-top: 24px;
  button {
    padding: 8px 20px;
    border-radius: 999px;
    border: 1px solid var(--color-red-dark);
    background: transparent;
    color: var(--color-red-dark);
    cursor: pointer;
    font-family: inherit;
    &:hover {
      background: var(--color-red-very-light);
    }
  }
}

/* Range slider: two overlaid native range inputs sharing one track --
   shared by the Price and Size filter panels (see search.html's own
   .price-slider/.size-slider, each still its own id for the JS/label
   text that IS dimension-specific). */
.range-slider {
  .range-slider-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 90%;
    .range-slider-unit {
      color: var(--color-gray-medium);
    }
    input[type="number"] {
      width: 60px;
      padding: 4px 6px;
      border: 1px solid var(--color-beige-dark);
      border-radius: var(--radius-md);
      font-family: inherit;
      font-size: inherit;
      /* Browser up/down spinners take up space this small field doesn't
         have to spare, and dragging the slider already covers the same
         "adjust by a bit" role. */
      appearance: textfield;
      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        appearance: none;
        margin: 0;
      }
    }
  }
  .range-slider-track {
    position: relative;
    height: 24px;
    /* The two overlaid range inputs each have their own native track
       hidden (background: transparent below, so the two don't visibly
       double up) -- without this, no line connects the two thumbs at
       all. thumb width/2 (8px) inset on each side so the line doesn't
       visually poke out past a thumb sitting at the very min/max. */
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 8px;
      right: 8px;
      height: 4px;
      transform: translateY(-50%);
      /* Red between the two thumbs (matching their own colour), beige-dark
         outside that range -- --min-percent/--max-percent are set inline
         by search.ts's own RangeFilter.updateVisuals() on every
         drag/manual-input-edit/init/popstate sync. Hard stops (each
         colour repeated at the same position), not a blend, since this
         is a two-tone fill, not a gradient. */
      background: linear-gradient(
        to right,
        var(--color-beige-dark) 0%,
        var(--color-beige-dark) var(--min-percent, 0%),
        var(--color-red-dark) var(--min-percent, 0%),
        var(--color-red-dark) var(--max-percent, 100%),
        var(--color-beige-dark) var(--max-percent, 100%),
        var(--color-beige-dark) 100%
      );
      border-radius: 2px;
      pointer-events: none;
    }
    input[type="range"] {
      position: absolute;
      width: 100%;
      /* Centers the 16px thumb (below) on the ::before line's own center
         (track height 24px / 2 = 12px): top 4px + half the 16px thumb
         height = 12px. Without an explicit height here, the input's own
         default rendered height doesn't reliably match the thumb's,
         throwing that center off. */
      top: 4px;
      height: 16px;
      margin: 0;
      pointer-events: none;
      appearance: none;
      background: transparent;
      /* Two overlaid thumbs at the same DOM-order stacking level means the
         second (max) input always wins hit-testing where they're close or
         equal -- raise whichever one currently has focus/is being dragged
         above the other so the "back" thumb stays grabbable. */
      z-index: 1;
      &:focus,
      &:active {
        z-index: 2;
      }
      &::-webkit-slider-thumb {
        pointer-events: auto;
        appearance: none;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--color-red-dark);
        cursor: pointer;
      }
      &::-moz-range-thumb {
        pointer-events: auto;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: var(--color-red-dark);
        cursor: pointer;
        border: none;
      }
    }
  }
}


/* Persistent wide-screen right sidebar mini-cart (see _cart-sidebar.html)
   -- a docked panel, not a floating card: flush against the viewport's
   own right edge (no margin/border-radius) and spanning its full height
   below the fixed header nav, rather than a shorter box with room to
   sit in. Shows from the same 768px breakpoint used sitewide for "wide
   enough for a two-column layout" (compare the mobile Add to Cart bar's
   complementary max-width: 767px below). A fixed panel would otherwise
   overlap #page-content's own centered layout, so main's own
   padding-right (via :has(), only added once there's actually a visible
   panel to make room for) shifts that centered content over instead.
   Hidden entirely below that breakpoint (and, per _cart-sidebar.html's
   own [hidden], whenever the cart is empty) -- the header nav's basket
   link/badge is the only cart affordance there. */
.cart-sidebar {
  display: none;
}
@media screen and (min-width: 768px) {
  body:has(.cart-sidebar:not([hidden])) main {
    padding-right: 276px;
  }
  .cart-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    /* Goes all the way up to the actual top of the viewport, not just
       down to where the header ends -- so its own left border/shadow
       reach the very top edge with no gap of bare background above
       them, same as it already reaches bottom: 0 below. The header nav
       (a higher z-index, see below) then paints over that top strip,
       covering it, while padding-top keeps the panel's own *content*
       (the "My Basket" heading) clear of the header instead of hiding
       under it -- 48px is the same header-height figure used
       throughout this file (see main's own alignment above). */
    top: 0;
    right: 0;
    bottom: 0;
    width: 260px;
    /* Keeps the 260px above as the *rendered* box's own full width --
       otherwise the padding/border below would silently grow it past
       that, past main's own padding-right gutter, and into
       #page-content. */
    box-sizing: border-box;
    background: var(--color-beige);
    border-left: 1px solid var(--color-beige-dark);
    box-shadow: -2px 0 8px #00000014;
    padding: 60px 12px 12px;
    /* Below the header nav's own z-index (1) -- see header's own rule --
       so it paints *under*, not over, that fixed nav bar. */
    z-index: 0;
    /* Higher specificity than the display: flex above, needed since an
       author stylesheet's [hidden] doesn't otherwise beat a same-
       specificity, later class rule the way the UA stylesheet's own
       [hidden] rule would. */
    &[hidden] {
      display: none;
    }
    h2 {
      flex: none;
      margin: 0 0 8px;
      font-size: 100%;
      color: var(--color-red-dark);
    }
  }
}
.cart-sidebar-items {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Fills whatever height the panel has left over from its h2 and the
     subtotal/view-basket footer below, own scrollbar and all, instead
     of the fixed height a shorter floating card needed. */
  flex: 1 1 auto;
  overflow-y: auto;
  li {
    margin-bottom: 8px;
  }
  a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
  img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border: 2px solid var(--color-beige-dark);
    border-radius: var(--radius-md);
    flex-shrink: 0;
  }
}
.cart-sidebar-item-info {
  display: flex;
  flex-direction: column;
  font-size: 85%;
}
.cart-sidebar-item-title {
  font-weight: bold;
}
.cart-sidebar-subtotal {
  flex: none;
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  padding: 8px 0;
  margin-top: 4px;
  border-top: 1px solid var(--color-beige-dark);
}
.cart-sidebar-view {
  flex: none;
  display: block;
  text-align: center;
}

/* Mobile "Add to Cart" sticky bar (item.html only, see its own comment)
   -- always visible while scrolling the item page on narrow screens,
   Temu-style; the wide-screen equivalent is the docked sidebar panel
   above plus the item page's own inline "Add to basket" button, neither
   of which needs a bar staying on screen since there's already room for
   a persistent panel. */
.mobile-add-to-cart-bar {
  display: none;
}
@media screen and (max-width: 767px) {
  .mobile-add-to-cart-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 16px;
    background: var(--color-beige);
    border-top: 1px solid var(--color-beige-dark);
    box-shadow: 0px -2px 8px #00000022;
    z-index: 2;
  }
  /* Keeps the bar from covering the page's own last bit of content
     (e.g. the "Send an enquiry" link, footer). */
  body:has(.mobile-add-to-cart-bar) {
    padding-bottom: 64px;
  }
  /* The site-wide Google Customer Reviews badge (see base.html's own
     merchantWidgetScript) renders both #merchantwidgetiframe itself and
     a wrapping #google-merchantwidget-iframe-wrapper div around it, each
     independently confirmed (locally and against a real deployment,
     respectively -- the wrapper's own reported size/position shifts with
     the badge's collapsed/expanded state, so either one can end up being
     whichever element actually receives a hit-test at a given moment)
     capturing a click/tap over its own box regardless of what's actually
     painted there (both are opaque to hit-testing from the host page
     unless given pointer-events: none, whatever their content renders).
     On this bar's own breakpoint either one can sit squarely on top of
     "Add to Cart"/the quantity stepper, silently swallowing every tap --
     no z-index can out-rank them either (Google's script sets it to
     2147483647, the max CSS z-index value). Disabled only here, only
     while this bar exists (item.html) -- the badge stays fully
     interactive everywhere else on the site. */
  body:has(.mobile-add-to-cart-bar) #merchantwidgetiframe,
  body:has(.mobile-add-to-cart-bar) #google-merchantwidget-iframe-wrapper {
    pointer-events: none;
  }
}
.mobile-bar-price {
  font-weight: bold;
  white-space: nowrap;
}
.mobile-bar-add {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Same [hidden]-vs-same-specificity-class issue as .cart-sidebar[hidden]
     above -- an unconditional display: flex here would otherwise beat
     the browser's own [hidden] { display: none } default. */
  &[hidden] {
    display: none;
  }
}
.mobile-bar-quantity {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  &[hidden] {
    display: none;
  }
  .qty-decrement,
  .qty-increment {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--color-red-dark);
    background: transparent;
    color: var(--color-red-dark);
    font-size: 120%;
    line-height: 1;
    cursor: pointer;
  }
  .qty-value {
    min-width: 20px;
    text-align: center;
    font-weight: bold;
  }
  .mobile-bar-go-to-cart {
    flex: 1 1 auto;
    text-align: center;
  }
}