:root {
  --cream: #fefaf0;
  --sage: #70795b;
  --sage-deep: #5a6248; /* sage text on cream: the brand sage is 4.4:1, just under AA */
  --pink: #daa1a0;
  --olive: #abaf98;
  --charcoal: #3c3c37;
  --white: #fff;
  --card: #fffdf8;
  --tint: #f1efe3;

  --font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --text-sm: 0.875rem;
  --text-lg: 1.25rem;
  --heading-sm: 1.5rem;
  --heading-md: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
  --heading-lg: clamp(3rem, 2rem + 4.5vw, 5.75rem);

  --gutter: clamp(1rem, 4vw, 3rem);
  --section: clamp(3.5rem, 2rem + 6vw, 7rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --z-sticky: 10;
  --z-menu: 20;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--charcoal);
  font: 400 1rem/1.65 var(--font-body);
  font-kerning: normal;
}

main:focus {
  outline: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
p,
ul,
figure,
blockquote,
fieldset {
  margin: 0;
  padding: 0;
}

fieldset {
  border: 0;
  min-width: 0;
}

ul {
  list-style: none;
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.08;
  text-wrap: balance;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--sage-deep);
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: var(--z-menu);
  padding: 0.75rem 1rem;
  background: var(--charcoal);
  color: var(--white);
  transform: translateY(-200%);
}

.skip-link:focus {
  color: var(--white);
  transform: none;
}

.wrap {
  width: 100%;
  max-width: 84rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Gingham: two translucent stripes crossing, like the packaging */
.gingham {
  --check: 22px;
  --stripe: rgb(112 121 91 / 0.2);
  background-color: var(--cream);
  background-image:
    linear-gradient(90deg, var(--stripe) 50%, transparent 50%),
    linear-gradient(var(--stripe) 50%, transparent 50%);
  background-size: var(--check) var(--check);
}

.gingham--pink {
  --stripe: rgb(218 161 160 / 0.5);
}

/* Swing tag: the shop's label, used for categories and product flags */
.tag {
  position: relative;
  display: inline-block;
  padding: 0.5em 1.1em 0.5em 1.9em;
  background: var(--cream);
  clip-path: polygon(0.9em 0, 100% 0, 100% 100%, 0.9em 100%, 0 50%);
  color: var(--charcoal);
}

.tag::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0.8em;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: var(--charcoal);
  transform: translateY(-50%);
}

.tag--pink {
  background: var(--pink);
}

/* Buttons: sage with a stitched edge */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.75rem 2rem;
  border: 0;
  border-radius: 3px;
  background: var(--sage);
  color: var(--white);
  font: 600 0.9375rem/1.2 var(--font-body);
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms var(--ease), transform 200ms var(--ease);
}

.button::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px dashed rgb(255 255 255 / 0.55);
  border-radius: 2px;
  pointer-events: none;
}

.button:hover {
  background: var(--sage-deep);
  color: var(--white);
}

.button:active {
  transform: translateY(1px);
}

.button:disabled {
  background: var(--tint);
  color: var(--charcoal);
  cursor: not-allowed;
}

.button:disabled::after {
  border-color: var(--olive);
}

.button--wide {
  width: 100%;
}

.text-link {
  display: inline-block;
  padding-block: 0.5rem;
  color: var(--sage-deep);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* Sections */
.section {
  padding-block: var(--section);
}

.section--tint {
  background: var(--tint);
}

.section--pink {
  background: var(--pink);
}

.section--sage {
  background: var(--sage);
  color: var(--white);
}

.section--sage a:hover {
  color: var(--cream);
}

.section-title {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  font-size: var(--heading-md);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 1.5rem;
}

.rte > * + * {
  margin-top: 1em;
}

.rte {
  max-width: 65ch;
  text-wrap: pretty;
}

.rte h2,
.rte h3 {
  margin-top: 1.5em;
  font-size: var(--heading-sm);
  font-weight: 600;
}

.rte ul {
  padding-left: 1.25em;
  list-style: disc;
}

/* Announcement */
.announcement {
  padding: 0.5rem var(--gutter);
  background: var(--sage);
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: center;
}

.announcement a:hover {
  color: var(--white);
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  border-bottom: 1px solid var(--olive);
  background: var(--cream);
}

.site-header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-block: 0.25rem;
}

.site-header__side {
  display: flex;
  align-items: center;
}

.site-header__side--end {
  justify-content: flex-end;
}

.site-logo {
  font: 600 clamp(1.25rem, 1rem + 1.4vw, 2.25rem) / 1.1 var(--font-heading);
  text-align: center;
  text-decoration: none;
}

.site-logo img {
  margin-inline: auto;
}

.icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  cursor: pointer;
  list-style: none;
}

.icon-button::-webkit-details-marker {
  display: none;
}

.basket-link__count {
  position: absolute;
  top: 0.125rem;
  right: 0;
  min-width: 1.25rem;
  padding-inline: 0.25rem;
  border-radius: 1rem;
  background: var(--pink);
  color: var(--charcoal);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-align: center;
}

.site-nav {
  display: none;
}

.mobile-nav__panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: var(--z-menu);
  max-height: calc(100dvh - 4rem);
  overflow-y: auto;
  padding: 0.5rem var(--gutter) 1.5rem;
  border-bottom: 1px solid var(--olive);
  background: var(--cream);
}

.mobile-nav__panel a {
  display: block;
  padding-block: 0.625rem;
  font: 500 1.625rem/1.3 var(--font-heading);
  text-decoration: none;
}

.mobile-nav__panel [aria-current] {
  color: var(--sage-deep);
  text-decoration: underline;
}

.icon-button--desktop {
  display: none;
}

@media (min-width: 900px) {
  .site-header {
    position: static;
  }

  .site-header__bar {
    padding-block: 1rem 0.5rem;
  }

  .mobile-nav {
    display: none;
  }

  .icon-button--desktop {
    display: inline-flex;
  }

  .site-nav {
    display: block;
    padding-bottom: 0.625rem;
  }

  .site-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 clamp(1rem, 2.4vw, 2.25rem);
  }

  .site-nav a {
    display: block;
    padding-block: 0.5rem;
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
  }

  .site-nav a:hover,
  .site-nav [aria-current] {
    color: var(--sage-deep);
    text-decoration: underline;
    text-decoration-color: var(--pink);
    text-decoration-thickness: 2px;
  }
}

/* Parcel: stands in until a photograph is added */
.parcel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

.parcel svg {
  width: auto;
  height: 88%;
  max-height: 88%;
}

/* Main banner */
.hero {
  display: grid;
  padding-bottom: 3rem;
}

.hero__media {
  position: relative;
  order: -1;
  height: clamp(16rem, 44svh, 26rem);
  margin-bottom: 2rem;
  margin-left: var(--gutter);
}

.hero__frame {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.hero__frame .parcel {
  position: absolute;
  inset: 0;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: settle 1400ms var(--ease) both;
}

.hero__mat {
  position: absolute;
  bottom: -1rem;
  left: calc(var(--gutter) * -1);
  width: 55%;
  height: 60%;
  animation: slide-mat 1100ms var(--ease) both;
}

.hero__copy {
  padding-inline: var(--gutter);
}

.hero__title {
  font-size: var(--heading-lg);
  font-weight: 500;
  line-height: 1;
}

.hero__text {
  max-width: 34ch;
  margin-block: 1.25rem 1.75rem;
  font-size: 1.0625rem;
}

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    padding-block: 2rem 5rem;
  }

  .hero__copy {
    padding-right: 4rem;
    padding-left: max(var(--gutter), calc((100vw - 84rem) / 2 + var(--gutter)));
  }

  .hero__media {
    order: 0;
    height: clamp(30rem, 72svh, 46rem);
    margin: 0;
  }

  .hero__mat {
    bottom: -2.5rem;
    left: -2.5rem;
  }
}

@keyframes settle {
  from {
    transform: scale(1.05);
  }
}

@keyframes slide-mat {
  from {
    transform: translate(0.75rem, -0.75rem);
  }
}

/* Category tiles: one lead tile, the rest smaller */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}

.tiles > li:first-child {
  grid-column: 1 / -1;
}

.tile {
  position: relative;
  display: block;
  height: 100%;
  min-height: 13rem;
  overflow: hidden;
  background: var(--tint);
  text-decoration: none;
}

.tiles > li:first-child .tile {
  aspect-ratio: 4 / 3;
}

.tile__img,
.tile .parcel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease);
}

.tile__tag {
  position: absolute;
  bottom: 0.75rem;
  left: 0;
  max-width: calc(100% - 0.75rem);
  font: 600 1.25rem/1.15 var(--font-heading);
  overflow-wrap: anywhere;
  transition: transform 300ms var(--ease);
  transform-origin: left center;
}

@media (hover: hover) {
  .tile:hover .tile__img {
    transform: scale(1.03);
  }

  .tile:hover .tile__tag {
    transform: rotate(-2deg);
  }
}

.tile:hover {
  color: var(--charcoal);
}

@media (min-width: 900px) {
  .tiles {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(16rem, 20vw);
  }

  .tiles > li {
    grid-column: span 5;
  }

  .tiles > li:first-child {
    grid-column: span 7;
    grid-row: span 2;
  }

  .tiles > li:first-child .tile {
    aspect-ratio: auto;
  }

  .tiles > li:nth-child(n + 4) {
    grid-column: span 6;
  }

  .tiles > li:nth-child(4):last-child {
    grid-column: 1 / -1;
  }

  .tile__tag {
    bottom: 1.25rem;
    font-size: 1.5rem;
  }

  .tiles > li:first-child .tile__tag {
    font-size: 2rem;
  }
}

.tiles--even > li,
.tiles--even > li:first-child,
.tiles--even > li:nth-child(n + 4),
.tiles--even > li:nth-child(4):last-child {
  grid-column: auto;
  grid-row: auto;
}

.tiles--even .tile,
.tiles--even > li:first-child .tile {
  aspect-ratio: 4 / 5;
}

@media (min-width: 900px) {
  .tiles--even {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
  }
}

/* Product grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem clamp(0.75rem, 2vw, 1.5rem);
}

@media (min-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    row-gap: 3rem;
  }
}

.card__link {
  display: block;
  text-decoration: none;
}

.card__link:hover {
  color: var(--charcoal);
}

.card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: 0.75rem;
  background: var(--tint);
}

.card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 400ms var(--ease), transform 900ms var(--ease);
}

.card__img--hover {
  opacity: 0;
}

.card__tag {
  position: absolute;
  top: 0.625rem;
  left: 0;
  font-size: 0.8125rem;
  font-weight: 600;
}

@media (hover: hover) {
  .card__link:hover .card__img {
    transform: scale(1.03);
  }

  .card__link:hover .card__img--hover {
    opacity: 1;
  }

  .card__link:hover .card__title {
    text-decoration: underline;
    text-decoration-color: var(--pink);
    text-decoration-thickness: 2px;
  }
}

.card__title {
  margin-bottom: 0.25rem;
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.2;
}

.price {
  font-size: 0.9375rem;
  font-weight: 500;
}

.price__was {
  margin-left: 0.5em;
  font-weight: 400;
}

/* Story: image with text */
.story {
  display: grid;
  gap: 3rem;
}

.story__media {
  position: relative;
  margin: 0 0 0 1rem;
}

.story__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--tint);
}

.story__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story__mat {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  bottom: -1.25rem;
  left: -1rem;
}

.story__copy .text-link {
  margin-top: 1.25rem;
}

@media (min-width: 900px) {
  .story {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: clamp(3rem, 8vw, 7rem);
  }

  .story--flip .story__media {
    order: 1;
  }

  .story__frame {
    aspect-ratio: 1;
  }
}

/* Reviews: a row of notes that scrolls sideways on phones */
.reviews {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(16rem, 85%);
  gap: 1rem;
  overflow-x: auto;
  margin-inline: calc(var(--gutter) * -1);
  padding: 0.25rem var(--gutter) 1rem;
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
}

.review {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--card);
  scroll-snap-align: start;
}

.review blockquote {
  font: 500 1.5rem/1.3 var(--font-heading);
  text-wrap: pretty;
}

.review figcaption {
  margin-top: 1rem;
  font-size: var(--text-sm);
  font-weight: 600;
}

@media (min-width: 900px) {
  .reviews {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .review:nth-child(3n + 2) {
    transform: translateY(1.25rem);
  }
}

/* Say hello */
.hello__inner {
  display: grid;
  gap: 2rem;
}

.hello p {
  max-width: 44ch;
}

.hello .section-title {
  margin-bottom: 1rem;
}

.hello__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  font: 500 clamp(2rem, 1.5rem + 2.5vw, 3.5rem) / 1.25 var(--font-heading);
}

.hello__links a {
  display: inline-block;
  text-decoration-color: var(--pink);
  text-decoration-thickness: 2px;
}

@media (min-width: 900px) {
  .hello__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

/* Footer */
.site-footer {
  background: var(--charcoal);
  color: var(--cream);
  font-size: var(--text-sm);
}

.site-footer a:hover {
  color: var(--pink);
}

.site-footer__ribbon {
  --check: 14px;
  height: 14px;
}

.site-footer__inner {
  display: grid;
  gap: 2rem;
  padding-block: 3rem;
}

.site-footer__name {
  margin-bottom: 0.5rem;
  font: 500 1.75rem/1.2 var(--font-heading);
}

.site-footer__brand p:last-child {
  max-width: 34ch;
}

.site-footer__links a {
  display: inline-block;
  padding-block: 0.375rem;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
  border-top: 1px solid rgb(254 250 240 / 0.2);
}

.payment-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

@media (min-width: 900px) {
  .site-footer__inner {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

/* Page heads */
.page-head {
  padding-block: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
}

.page-title {
  font-size: var(--heading-md);
}

.page-head .rte {
  margin-top: 1rem;
}

.page-body {
  padding-bottom: var(--section);
}

/* Product page */
.product {
  display: grid;
  gap: 1.5rem;
  padding-bottom: var(--section);
}

.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 88%;
  gap: 0.5rem;
  overflow-x: auto;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
}

.gallery:has(> :only-child) {
  grid-auto-columns: 100%;
}

.gallery > li {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--tint);
  scroll-snap-align: start;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product__title {
  font-size: clamp(2.25rem, 1.9rem + 1.6vw, 3.25rem);
}

.product__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  margin-block: 0.75rem 1.5rem;
}

.product__summary .price {
  font-size: var(--text-lg);
}

.stock {
  font-size: var(--text-sm);
  font-weight: 500;
}

.product-form {
  display: grid;
  gap: 1.5rem;
}

.product-form__actions {
  display: grid;
  gap: 0.75rem;
}

.product__detail {
  margin-top: 2rem;
}

.product__detail h2 {
  margin-bottom: 0.5rem;
  font-size: var(--heading-sm);
  font-weight: 600;
}

@media (min-width: 900px) {
  .product {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
    gap: clamp(2rem, 5vw, 5rem);
    padding-top: 2rem;
  }

  .gallery {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .gallery > li:first-child {
    grid-column: 1 / -1;
  }
}

/* Options */
.field-group legend,
.field-group > label:not(.filter-option),
.field > label {
  display: block;
  margin-bottom: 0.5rem;
  padding: 0;
  font-size: var(--text-sm);
  font-weight: 600;
}

.optional {
  font-weight: 400;
}

.field-hint {
  margin-top: 0.375rem;
  font-size: var(--text-sm);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  position: relative;
  cursor: pointer;
}

.chip input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.chip span {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--sage);
  border-radius: 3px;
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.2;
  transition: background-color 150ms var(--ease), color 150ms var(--ease);
}

.chip:hover span {
  background: var(--tint);
}

.chip input:checked + span {
  background: var(--sage);
  color: var(--white);
}

.chip input:focus-visible + span {
  outline: 2px solid var(--charcoal);
  outline-offset: 2px;
}

.chip input:disabled + span {
  border-style: dashed;
  background: transparent;
  color: var(--charcoal);
  text-decoration: line-through;
}

.chip:has(input:disabled) {
  cursor: not-allowed;
}

/* Date card: the Blind Date form, styled as a library card */
.date-card {
  border: 1px solid var(--olive);
  background: var(--card);
}

.date-card__ribbon {
  --check: 12px;
  height: 24px;
  border-bottom: 1px solid var(--olive);
}

.date-card__body {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.date-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.date-card__title {
  font-size: 2rem;
  font-style: italic;
}

.date-card__stamp {
  flex: none;
  padding: 0.25rem 0.625rem;
  border: 2px solid var(--pink);
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(4deg);
}

.date-card__intro {
  margin-top: -1rem;
  text-wrap: pretty;
}

/* Lined paper: the rules scroll with the text */
.ruled {
  display: block;
  width: 100%;
  padding: 0 0.125rem;
  border: 0;
  border-bottom: 1px solid var(--sage);
  border-radius: 0;
  background: repeating-linear-gradient(transparent 0 calc(2rem - 1px), var(--olive) calc(2rem - 1px) 2rem) local;
  color: inherit;
  font: inherit;
  line-height: 2rem;
  resize: vertical;
}

.ruled:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 2px;
}

.gift {
  border-block: 1px solid var(--olive);
}

.gift summary {
  padding-block: 0.75rem;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.gift .ruled {
  margin-bottom: 0.25rem;
}

.gift .field-hint {
  margin-bottom: 1rem;
}

/* Forms */
.input {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--sage);
  border-radius: 3px;
  background: var(--card);
  color: inherit;
  font: inherit;
}

.form-stack {
  display: grid;
  gap: 1.25rem;
  max-width: 36rem;
}

.notice {
  padding: 1rem 1.25rem;
  background: var(--tint);
  font-weight: 500;
}

.notice--error {
  background: rgb(218 161 160 / 0.35);
}

.notice ul {
  margin-top: 0.25rem;
}

/* Collection */
.browse {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  margin-inline: calc(var(--gutter) * -1);
  padding: 0.25rem var(--gutter);
  scrollbar-width: none;
}

.browse li {
  flex: none;
}

.browse a {
  display: flex;
  white-space: nowrap;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--sage);
  border-radius: 3px;
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
}

.browse [aria-current] {
  background: var(--sage);
  color: var(--white);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-block: 1.5rem;
  padding-block: 0.5rem;
  border-block: 1px solid var(--olive);
}

.filters {
  flex: 1 1 auto;
}

.filters > summary {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.filters__panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.5rem 2rem;
  padding-block: 0.75rem 1rem;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.25rem;
  font-size: var(--text-sm);
  cursor: pointer;
}

.filter-option input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--sage);
}

.price-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.price-range label {
  font-size: var(--text-sm);
}

.sort {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  font-size: var(--text-sm);
  font-weight: 600;
}

.sort select {
  min-height: 2.75rem;
  padding-inline: 0.5rem;
  border: 1px solid var(--sage);
  border-radius: 3px;
  background: var(--card);
  color: inherit;
  font: 500 var(--text-sm) var(--font-body);
}

.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 1.5rem;
  font-size: var(--text-sm);
}

.empty {
  max-width: 40rem;
  padding-block: 2rem;
}

.template-page .story {
  padding-top: 1rem;
}

.empty .page-title {
  margin-bottom: 0.75rem;
}

.empty p {
  margin-bottom: 1.5rem;
  font: 500 var(--heading-sm) / 1.25 var(--font-heading);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 3rem;
  font-size: var(--text-sm);
}

/* Basket */
.basket {
  display: grid;
  gap: 2.5rem;
}

.basket__item {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--olive);
}

.basket__item:last-child {
  border-bottom: 1px solid var(--olive);
}

.basket__thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--tint);
}

.basket__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.basket__head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.basket__title {
  font-size: 1.375rem;
  font-weight: 600;
}

.basket__title a {
  text-decoration: none;
}

.basket__line-price {
  flex: none;
  font-weight: 500;
}

.basket__meta {
  margin-top: 0.25rem;
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.basket__meta dt {
  display: inline;
  font-weight: 600;
}

.basket__meta dd {
  display: inline;
  margin: 0;
}

.basket__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
  font-size: var(--text-sm);
}

.basket__qty {
  width: 4.5rem;
  min-height: 2.75rem;
}

.basket__remove {
  display: inline-block;
  padding-block: 0.625rem;
}

.basket__update {
  margin-top: 1rem;
}

.basket__summary {
  display: grid;
  gap: 1rem;
  align-self: start;
  padding: 1.5rem;
  background: var(--tint);
}

.basket__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font: 600 1.625rem/1.2 var(--font-heading);
}

.basket__note {
  font-size: var(--text-sm);
}

@media (min-width: 900px) {
  .basket {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 4rem;
  }

  .basket__item {
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 1.5rem;
  }
}

/* FAQs */
.faq {
  max-width: 48rem;
}

.faq__group {
  margin-block: 2.5rem 0.75rem;
  font-size: var(--heading-sm);
  font-weight: 600;
}

.faq__group:first-child {
  margin-top: 0;
}

.faq__item {
  border-top: 1px solid var(--olive);
}

.faq__item summary {
  padding-block: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.faq__item .rte {
  padding-bottom: 1.25rem;
}

/* Search */
.search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  max-width: 36rem;
  margin-block: 1rem 2.5rem;
}

.search-other {
  margin-top: 3rem;
}

.search-other li {
  padding-block: 0.375rem;
}

/* Blog */
.meta {
  font-size: var(--text-sm);
}

.articles {
  display: grid;
  gap: 3rem clamp(1rem, 3vw, 2.5rem);
}

@media (min-width: 900px) {
  .articles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.article-card {
  display: block;
  text-decoration: none;
}

.article-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 0.75rem;
  background: var(--tint);
}

.article-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.articles .meta {
  margin-bottom: 0.5rem;
}

.article > * {
  max-width: 48rem;
  margin-inline: auto;
}

.article__image {
  margin-bottom: 2rem;
}

.article__comments {
  margin-top: 3rem;
}

.article__comments .review {
  margin-bottom: 1rem;
}

.article .form-stack {
  margin-top: 2rem;
}

/* Accounts */
.order-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 1rem;
  padding-block: 1rem;
  border-top: 1px solid var(--olive);
  font-size: var(--text-sm);
}

.order-row a {
  font-weight: 600;
}

.order-row__total {
  font-weight: 500;
}

@media (min-width: 600px) {
  .order-row {
    grid-template-columns: 1fr 1.5fr 1.5fr auto;
  }
}

.totals {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  font-size: var(--text-sm);
}

.totals > div {
  display: flex;
  justify-content: space-between;
}

.totals dd {
  margin: 0;
}

.field-title {
  margin-bottom: 0.25rem;
  font: 600 var(--text-sm) var(--font-body);
}

.address {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--olive);
}

.gift__body {
  padding-block: 0.5rem 1.5rem;
}

.link-button {
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.link-button:hover {
  color: var(--sage-deep);
}

/* Gift card */
.gift-card {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 100svh;
  padding-block: 2rem;
}

.gift-card .date-card {
  width: 100%;
  max-width: 32rem;
}

.gift-card__code {
  font: 600 clamp(1.125rem, 0.9rem + 1.2vw, 1.5rem) / 1.3 var(--font-body);
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

.gift-card .button {
  justify-self: start;
}

/* Password page */
.password {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1.5rem;
  min-height: 100svh;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}