/* Collection, product and cart pages, plus the currency switcher. */

/* --- Currency switcher ---------------------------------------------------- */

.currency { position: relative; }
.currency__details { position: relative; }

.currency__summary {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid currentColor;
  font-family: var(--font-heading);
  font-size: var(--fs-body-xs);
  letter-spacing: var(--tracking-label);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.currency__summary::-webkit-details-marker { display: none; }

/* Flip the caret when the menu is open. */
.currency__details[open] .caret { transform: rotate(180deg); }

.currency__list {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 2;
  min-width: 9rem;
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  background: var(--c-bg);
  color: var(--c-fg);
  border: 1px solid var(--c-line);
}
.currency__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  padding: 0.5rem 0.85rem;
  font-family: var(--font-heading);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-label);
  text-align: left;
}
.currency__option:hover { background: var(--c-bg-alt); }
.currency__option[aria-current="true"] { background: var(--c-fg); color: var(--c-bg); }
.currency__symbol { color: var(--c-fg-muted); }
.currency__option[aria-current="true"] .currency__symbol { color: inherit; }

/* The header switcher is desktop-only; small screens get the drawer's copy. */
@media (max-width: 60rem) {
  .header__currency { display: none; }
}
.drawer__currency { margin-bottom: var(--sp-4); }
.drawer__currency .currency__list { right: auto; left: 0; }

/* --- Page head + breadcrumbs ---------------------------------------------- */

.page-head { margin-bottom: var(--sp-6); }
.page-head h1 { margin-bottom: var(--sp-3); }

.crumbs { margin-bottom: var(--sp-4); }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-body-xs);
  color: var(--c-fg-muted);
}
.crumbs li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--c-line); }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 0.25em; }

.notice {
  margin-bottom: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-bg-alt);
  border-left: 2px solid var(--c-fg);
  font-size: var(--fs-body-sm);
}

/* --- Grids ---------------------------------------------------------------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--sp-5) var(--sp-4);
}
@media (max-width: 34rem) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4) var(--sp-3); }
}

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.collection-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--c-placeholder);
  overflow: hidden;
}
.collection-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.collection-card:hover .collection-card__media img { transform: scale(1.03); }

.collection-card__body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: var(--sp-4);
  color: var(--c-fg-invert);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.68), transparent);
}
.collection-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.collection-card__meta { margin: 0; font-size: var(--fs-body-sm); color: var(--c-fg-invert-muted); }

/* --- Product page --------------------------------------------------------- */

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 60rem) {
  .pdp { grid-template-columns: 1fr; }
}

.pdp__media { display: grid; gap: var(--sp-3); }
.pdp__shot { background: var(--c-placeholder); overflow: hidden; }
.pdp__shot img { width: 100%; height: auto; }

/* Info column tracks the gallery on desktop instead of scrolling away. */
@media (min-width: 60.0625rem) {
  .pdp__info { position: sticky; top: calc(var(--header-h) + var(--sp-5)); }
}

.pdp__tag { color: var(--c-fg-muted); }
.pdp__title { margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-h1); }
.pdp__price { font-family: var(--font-heading); font-size: var(--fs-h3); }
.pdp__free {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.pdp__price--card { font-size: var(--fs-body); color: var(--c-fg-muted); margin-top: 0.15rem; }
.pdp__price--card span { color: var(--c-fg); font-weight: 600; }
.pdp__desc { margin-top: var(--sp-4); color: var(--c-fg-muted); max-width: 42ch; }

.pdp__form { margin-top: var(--sp-6); }
.pdp__variants { margin: 0 0 var(--sp-5); padding: 0; border: 0; }
.pdp__variants legend { margin-bottom: var(--sp-3); color: var(--c-fg-muted); }

.variant {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--c-line);
  cursor: pointer;
}
.variant + .variant { border-top: 0; }
.variant:has(input:checked) { border-color: var(--c-fg); box-shadow: inset 0 0 0 1px var(--c-fg); }
.variant:has(input:focus-visible) { outline: 2px solid var(--c-fg); outline-offset: 2px; }
.variant input { accent-color: var(--c-fg); }
.variant__label { flex: 1; }
.variant__price { font-family: var(--font-heading); }

.pdp__actions { display: flex; gap: var(--sp-3); }
.pdp__qty { width: 5rem; flex: 0 0 auto; text-align: center; }
.pdp__submit { flex: 1; }

.pdp__notes {
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-body-sm);
  color: var(--c-fg-muted);
}
.pdp__notes li { padding-left: 1.1rem; position: relative; }
.pdp__notes li::before { content: "—"; position: absolute; left: 0; }

.pdp__settle {
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  background: var(--c-bg-alt);
  font-size: var(--fs-body-xs);
  color: var(--c-fg-muted);
}

/* --- Cart ----------------------------------------------------------------- */

.cart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (max-width: 56rem) {
  .cart { grid-template-columns: 1fr; }
}

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

.cart-line {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--c-line-soft);
}
.cart-line:last-child { border-bottom: 1px solid var(--c-line-soft); }

.cart-line__media { aspect-ratio: 3 / 4; background: var(--c-placeholder); overflow: hidden; }
.cart-line__media img { width: 100%; height: 100%; object-fit: cover; }

.cart-line__title {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.cart-line__variant, .cart-line__unit {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-body-sm);
  color: var(--c-fg-muted);
}
.cart-line__warn {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-body-sm);
  color: var(--c-error);
}

.cart-line__qty { display: flex; align-items: center; gap: var(--sp-2); }
.cart-line__qty .field { width: 4.25rem; text-align: center; }

.cart-line__total { margin: 0; font-family: var(--font-heading); white-space: nowrap; }

.cart-line__remove button { display: grid; place-items: center; width: 2rem; height: 2rem; }
.cart-line__remove svg { width: 1rem; height: 1rem; stroke: currentColor; stroke-width: 1.5; fill: none; }

@media (max-width: 44rem) {
  .cart-line {
    grid-template-columns: 5rem minmax(0, 1fr) auto;
    grid-template-areas:
      "media body remove"
      "media qty  total";
    row-gap: var(--sp-3);
  }
  .cart-line__media  { grid-area: media; align-self: start; }
  .cart-line__body   { grid-area: body; }
  .cart-line__qty    { grid-area: qty; }
  .cart-line__total  { grid-area: total; text-align: right; }
  .cart-line__remove { grid-area: remove; justify-self: end; }
}

.cart__summary { padding: var(--sp-5); background: var(--c-bg-alt); }
.cart__summary-title {
  font-family: var(--font-heading);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.cart__totals {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-5);
}
.cart__totals dt { color: var(--c-fg-muted); }
.cart__totals dd { margin: 0; font-family: var(--font-heading); text-align: right; }
.cart__continue { display: block; margin-top: var(--sp-4); text-align: center; border-bottom: 0; }
.cart__continue span { border-bottom: 2px solid currentColor; }

.cart-empty { display: grid; justify-items: start; gap: var(--sp-4); }

/* --- Missing-photo stand-in ----------------------------------------------
   Used where a product has no photograph yet. Never used to replace an
   information graphic on the product page itself — only on cards and covers,
   where a price list printed with KSH figures would contradict the converted
   price shown beside it.
   ------------------------------------------------------------------------- */

.media-placeholder {
  /* Sized against its own width, because the same placeholder is used at a
     5rem cart thumbnail and a 30rem collection cover. */
  container-type: inline-size;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 8%;
  background: var(--c-placeholder);
  text-align: center;
}
.media-placeholder span {
  font-family: var(--font-heading);
  font-size: clamp(0.5rem, 9cqi, 0.9375rem);
  line-height: 1.25;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-fg-muted);
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* --- Blank canvas pitch --------------------------------------------------
   The blank card is a different proposition from the templates — start with
   nothing rather than fill something in — so it leads the page rather than
   sitting in the grid looking like a card whose artwork failed to load.
   ------------------------------------------------------------------------- */

/* Occasion navigation: one row of pills that wraps. On a phone it scrolls
   sideways instead, because sixteen wrapped pills push the cards below the
   fold. */
.card-cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-6);
}
.card-cats a {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--c-line);
  font-family: var(--font-heading);
  font-size: var(--fs-body-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
.card-cats a:hover { border-color: var(--c-fg); }
.card-cats a[aria-current="page"] { background: var(--c-fg); color: var(--c-bg); border-color: var(--c-fg); }
.card-cats__trait { color: var(--c-fg-muted) !important; }
@media (max-width: 44rem) {
  .card-cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter, var(--sp-4)));
    padding: 0 var(--gutter, var(--sp-4)) var(--sp-2);
    scrollbar-width: none;
  }
  .card-cats::-webkit-scrollbar { display: none; }
}

/* --- Card rails and tiles ------------------------------------------------- */

.card-rail { margin: var(--sp-8) 0 0; }
.card-rail + .card-rail { margin-top: var(--sp-8); }
.card-rail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.card-rail__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.card-rail__title a { text-decoration: none; color: inherit; }
.card-rail__title a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.card-rail__blurb { margin: 0; color: var(--c-fg-muted); font-size: var(--fs-body-sm); }
.card-rail__all { margin-left: auto; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 60rem) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 44rem) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-3); } }

/* The tile is the card standing on a table: the rendered front, a hairline so
   white papers still read as an object on a white page and a soft shadow
   that deepens on hover. No frame, no colour block — the artwork is the tile. */
.card-tile {
  display: grid;
  gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
}
.card-tile__paper {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--c-bg-alt);
  box-shadow: 0 0 0 1px var(--c-line), 0 6px 18px -10px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s var(--ease-out, ease), box-shadow 0.35s var(--ease-out, ease);
}
.card-tile:hover .card-tile__paper {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--c-line), 0 16px 28px -14px rgba(0, 0, 0, 0.4);
}
.card-tile__paper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fallback when a template has no rendered front yet. */
.card-tile__drawn {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--sp-2);
  padding: 12%;
  background: var(--c-bg);
  text-align: center;
}
.card-tile__occasion {
  font-family: var(--font-heading);
  font-size: var(--fs-body-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-fg-muted);
}
.card-tile__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h4, 1.25rem);
  line-height: 1.1;
  text-transform: uppercase;
}
.card-tile__rule { width: 2rem; height: 1px; background: var(--c-fg); }
.card-tile__hint { font-size: var(--fs-body-xs); color: var(--c-fg-muted); }

.card-tile__meta { display: grid; gap: 0.15rem; }
.card-tile__name {
  font-family: var(--font-heading);
  font-size: var(--fs-body-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.card-tile__price { font-size: var(--fs-body-xs); color: var(--c-fg-muted); }
.card-tile__free { color: var(--c-fg); font-weight: 600; }

.cards-index__heading {
  margin: var(--sp-7) 0 var(--sp-4);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.blank-pitch {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: center;
  padding: var(--sp-6);
  background: var(--c-bg-alt);
  text-decoration: none;
  color: inherit;
}
.blank-pitch:hover { background: var(--c-placeholder); }
@media (max-width: 44rem) {
  .blank-pitch { grid-template-columns: 1fr; gap: var(--sp-5); }
  .blank-pitch__art { max-width: 11rem; }
}

/* A drawing of the idea rather than a photograph: an empty card with three
   loose boxes on it, which is what the tool actually gives you. */
.blank-pitch__art {
  position: relative;
  display: block;
  width: 100%;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
}
.blank-pitch__box {
  position: absolute;
  border: 1.5px dashed var(--c-fg-muted);
}
.blank-pitch__box--a { left: 12%; top: 10%; width: 52%; height: 26%; transform: rotate(-4deg); }
.blank-pitch__box--b { left: 30%; top: 42%; width: 56%; height: 30%; transform: rotate(3deg); }
.blank-pitch__box--c {
  left: 16%; top: 76%; width: 20%; height: 14%;
  border-radius: 50%;
  transform: rotate(-8deg);
}

.blank-pitch__body { display: grid; gap: var(--sp-3); }
.blank-pitch__kicker {
  font-family: var(--font-heading);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-fg-muted);
}
.blank-pitch__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: 1.05;
}
.blank-pitch__text { max-width: 42ch; }
.blank-pitch__cta {
  justify-self: start;
  margin-top: var(--sp-2);
  padding-bottom: 0.35rem;
  border-bottom: 2px solid currentColor;
  font-family: var(--font-heading);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* --- Group card signing page ---------------------------------------------- */

.sign {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}
@media (max-width: 48rem) {
  .sign { grid-template-columns: 1fr; gap: var(--sp-6); }
  .sign__card { max-width: 14rem; }
}
.sign__paper { aspect-ratio: 105 / 148; }
.sign__paper img { position: static; width: 100%; height: auto; }
.sign__title { margin: var(--sp-2) 0 var(--sp-4); }
.sign__lead { max-width: 46ch; margin-bottom: var(--sp-6); }
.sign__form { display: grid; gap: var(--sp-4); max-width: 30rem; }
.sign__form .btn { justify-self: start; }
.sign__names, .sign__foot { margin-top: var(--sp-5); color: var(--c-fg-muted); font-size: var(--fs-body-sm); }

/* --- Video message page ----------------------------------------------------- */
.vmsg { max-width: 52rem; margin-inline: auto; text-align: center; }
.vmsg__title { margin: var(--sp-2) 0 var(--sp-5); }
.vmsg__player { background: #000; }
.vmsg__player video { display: block; width: 100%; max-height: 80vh; margin-inline: auto; }
.vmsg__lead { margin-top: var(--sp-5); }
.vmsg__foot { margin-top: var(--sp-6); color: var(--c-fg-muted); font-size: var(--fs-body-sm); }

/* --- Search ---------------------------------------------------------------- */
.search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-3);
  max-width: 40rem;
  margin-bottom: var(--sp-7);
}
.search-form__field { font-size: var(--fs-body); }
.search-empty { color: var(--c-fg-muted); margin-bottom: var(--sp-4); }
.search-group { margin-top: var(--sp-7); }
.search-group .card-rail__title { margin-bottom: var(--sp-4); }
.search-pages { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); max-width: 40rem; }
.search-pages a {
  display: grid;
  gap: 0.15rem;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-bg-alt);
  text-decoration: none;
  color: inherit;
}
.search-pages a:hover { background: var(--c-placeholder); }
.search-pages span { color: var(--c-fg-muted); font-size: var(--fs-body-sm); }