/* ---------- FONTS ---------- */
@font-face {
  font-family: "Cactus Jack";
  src: url("fonts/CactusJack.woff") format("woff"),
       url("fonts/CactusJack.ttf") format("truetype");
  font-display: swap;
}

/* ---------- COLOURS + SIZING ----------
   --u is "one pixel of your 1920-wide design", so everything
   scales with the screen. On phones it switches to a bigger scale. */
:root {
  --bg:   #2F2019;
  --pink: #D0B4C3;
  --u: calc(min(100vw, 2400px) / 1920);
}
@media (max-width: 900px) {
  :root { --u: calc(100vw / 900); }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--pink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body { min-height: 100vh; }

/* Carrot cursor, same as the home page */
html, body, a, button, select, label {
  cursor: url("cursor-carrot.png") 3 38, auto;
  cursor: image-set(url("cursor-carrot.png") 1x, url("cursor-carrot@2x.png") 2x) 3 38, auto;
}

[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
img { display: block; }

.cj { font-family: "Cactus Jack", sans-serif; text-transform: uppercase; }

/* ---------- TOP BAR: icons left, trolley right ---------- */
.top {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: max(16px, calc(var(--u) * 43)) max(16px, calc(var(--u) * 45)) 0 max(16px, calc(var(--u) * 54));
  pointer-events: none;
}
.top a { pointer-events: auto; display: block; line-height: 0; transition: opacity .2s ease, transform .2s ease; }
.top a:hover, .top a:focus-visible { opacity: .7; transform: translateY(-2px); }
.top a:focus-visible, .btn:focus-visible, select:focus-visible, .arrow:focus-visible, .step button:focus-visible {
  outline: 2px solid var(--pink); outline-offset: 5px; border-radius: 6px;
}

.top .icons { --icon: max(28px, calc(var(--u) * 52)); display: flex; align-items: center; gap: calc(var(--icon) * .44); }
.top .ig img    { height: var(--icon); width: auto; }
.top .email img { height: calc(var(--icon) * .91); width: auto; }

.top .trolley {
  display: flex; align-items: center; gap: max(8px, calc(var(--u) * 14));
  margin-top: max(-8px, calc(var(--u) * -8));
}
.top .trolley img { height: max(34px, calc(var(--u) * 60)); width: auto; }
.top .trolley .num {
  font-size: max(20px, calc(var(--u) * 32)); line-height: 1; font-weight: 300;
  min-width: .6em; text-align: left;
}
.top .trolley .num.bump { animation: bump .45s ease; }
@keyframes bump { 40% { transform: scale(1.5); } }

/* ---------- SHOP PAGE: three prints ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 47);
  padding: max(110px, calc(var(--u) * 193)) calc(var(--u) * 70) calc(var(--u) * 70);
}
.tile { display: block; aspect-ratio: 561 / 795; transition: opacity .25s ease, transform .25s ease; }
.tile img { width: 100%; height: 100%; object-fit: contain; object-position: center top; }
.tile:hover, .tile:focus-visible { opacity: .86; transform: translateY(-4px); }
.tile:focus-visible { outline: 2px solid var(--pink); outline-offset: 6px; }

@media (max-width: 760px) {
  .grid { grid-template-columns: 1fr; gap: 28px; padding: 110px 28px 40px; }
  .tile { max-width: 430px; margin-inline: auto; width: 100%; }
}

/* ---------- PRODUCT PAGE ---------- */
.product {
  display: grid;
  grid-template-columns: calc(var(--u) * 59) calc(var(--u) * 640) calc(var(--u) * 90) minmax(0, calc(var(--u) * 760));
  margin-left: calc(var(--u) * 50);
  padding: max(110px, calc(var(--u) * 139)) 0 calc(var(--u) * 60);
  align-items: start;
}
.gallery { grid-column: 2; grid-row: 1; }
.gallery img { width: 100%; height: auto; }
.arrow {
  grid-row: 1; align-self: center;
  background: none; border: 0; padding: 0; color: var(--pink);
  width: calc(var(--u) * 59); height: calc(var(--u) * 80);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .2s ease, transform .2s ease;
}
.arrow svg { width: calc(var(--u) * 36); height: auto; overflow: visible; }
.arrow.prev { grid-column: 1; }
.arrow.next { grid-column: 3; justify-self: start; margin-left: calc(var(--u) * 10); }
.arrow.prev:hover { transform: translateX(-3px); }
.arrow.next:hover { transform: translateX(3px); }
.single .arrow { visibility: hidden; }

.info { grid-column: 4; grid-row: 1; padding-top: calc(var(--u) * 36); }
.info h1 {
  margin: 0; font-weight: normal; font-size: calc(var(--u) * 50); line-height: 1.1;
  letter-spacing: .07em; -webkit-text-stroke: calc(var(--u) * .6) var(--pink);
}
.price { margin: 0; font-size: calc(var(--u) * 19); min-height: 1.3em; }
.copy { margin: calc(var(--u) * 6) 0 0; font-size: calc(var(--u) * 15.5); line-height: 1.95; }
.copy b { font-weight: 600; }
.copy p { margin: 0; }

.field-label { display: block; margin: calc(var(--u) * 30) 0 calc(var(--u) * 11); font-size: calc(var(--u) * 17); }

/* The size dropdown with a hand-drawn feel */
.select-wrap { position: relative; width: calc(var(--u) * 309); }
select {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: calc(var(--u) * 60);
  padding: 0 calc(var(--u) * 52) 0 calc(var(--u) * 20);
  background: transparent; color: var(--pink);
  border: calc(var(--u) * 3.2) solid var(--pink);
  border-radius: calc(var(--u) * 11) calc(var(--u) * 8) calc(var(--u) * 12) calc(var(--u) * 9) / calc(var(--u) * 9) calc(var(--u) * 12) calc(var(--u) * 8) calc(var(--u) * 11);
  font: inherit; font-size: calc(var(--u) * 18);
}
select option { background: var(--bg); color: var(--pink); }
.select-wrap::after {
  content: ""; position: absolute; right: calc(var(--u) * 24); top: 50%;
  width: calc(var(--u) * 11); height: calc(var(--u) * 11);
  border-right: calc(var(--u) * 3) solid var(--pink); border-bottom: calc(var(--u) * 3) solid var(--pink);
  transform: translateY(-75%) rotate(45deg); pointer-events: none; border-radius: 1px;
}
.select-wrap.nudge { animation: shake .4s ease; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.buy { display: flex; align-items: stretch; gap: calc(var(--u) * 14); width: calc(var(--u) * 309); margin-top: calc(var(--u) * 20); }
.step {
  display: flex; align-items: center; justify-content: space-between;
  width: calc(var(--u) * 104); height: calc(var(--u) * 56); flex: none;
  border: calc(var(--u) * 3.2) solid var(--pink);
  border-radius: calc(var(--u) * 10) calc(var(--u) * 8) calc(var(--u) * 11) calc(var(--u) * 9) / calc(var(--u) * 9) calc(var(--u) * 11) calc(var(--u) * 8) calc(var(--u) * 10);
  font-size: calc(var(--u) * 19); padding: 0 calc(var(--u) * 6);
}
.step button {
  background: none; border: 0; color: var(--pink); font: inherit; font-size: calc(var(--u) * 26); line-height: 1;
  width: calc(var(--u) * 30); height: 100%; padding: 0;
}
.step button:disabled { opacity: .35; }
.step span { min-width: 1.2ch; text-align: center; }

.btn {
  flex: 1; min-height: calc(var(--u) * 56);
  background: var(--pink); color: var(--bg); border: 0; border-radius: 999px;
  font: inherit; font-size: calc(var(--u) * 19); letter-spacing: .03em; padding: 0 calc(var(--u) * 10);
  transition: transform .2s ease, opacity .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn.done { opacity: .85; }
.msg { margin: calc(var(--u) * 14) 0 0; font-size: calc(var(--u) * 15.5); min-height: 1.4em; }
.msg a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .product { display: block; margin: 0; padding: 110px 28px 50px; }
  .gallery { position: relative; max-width: 520px; margin: 0 auto; }
  .arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(47,32,25,.55); border-radius: 999px; width: 48px; height: 64px; margin: 0; }
  .arrow svg { width: 22px; }
  .arrow.prev { left: 6px; } .arrow.next { right: 6px; }
  .arrow.prev:hover, .arrow.next:hover { transform: translateY(-50%); }
  .info { padding-top: 26px; max-width: 520px; margin: 0 auto; }
  .info h1 { font-size: 40px; } .price { font-size: 19px; margin-top: 12px; } .copy { font-size: 15.5px; }
  .field-label { font-size: 17px; margin: 26px 0 8px; }
  .select-wrap, .buy { width: 100%; max-width: 340px; }
  select { height: 56px; font-size: 18px; border-width: 3px; }
  .step { height: 54px; width: 110px; font-size: 19px; border-width: 3px; }
  .step button { font-size: 26px; width: 34px; }
  .btn { min-height: 54px; font-size: 19px; }
  .msg { font-size: 15.5px; }
}

/* ---------- CART PAGE ---------- */
.cart-page { padding: max(110px, calc(var(--u) * 150)) calc(var(--u) * 70) 70px; }
.cart-page h1 { margin: 0 0 calc(var(--u) * 40); font-weight: normal; font-size: calc(var(--u) * 44); letter-spacing: .07em; -webkit-text-stroke: calc(var(--u) * .6) var(--pink); }
.line {
  display: grid; grid-template-columns: calc(var(--u) * 112) 1fr auto auto auto; gap: calc(var(--u) * 36);
  align-items: start; padding-bottom: calc(var(--u) * 28);
  font-size: calc(var(--u) * 19);
}
.line + .line { padding-top: calc(var(--u) * 4); }
.line img { width: 100%; height: auto; }
.line .name { font-size: calc(var(--u) * 24); line-height: 1.2; margin-top: calc(var(--u) * 4); }
.line .sub { opacity: .8; margin-top: calc(var(--u) * 12); font-size: calc(var(--u) * 17); }
.line .step { border: 0; width: calc(var(--u) * 130); height: calc(var(--u) * 40); padding: 0; margin-top: calc(var(--u) * 2); }
.line .step button { width: calc(var(--u) * 36); font-size: calc(var(--u) * 30); }
.line .lineprice { min-width: calc(var(--u) * 100); text-align: right; margin-top: calc(var(--u) * 8); }
.line .remove { background: none; border: 0; padding: 0; color: var(--pink); width: calc(var(--u) * 34); height: calc(var(--u) * 34); margin-top: calc(var(--u) * 5); transition: opacity .2s ease; }
.line .remove:hover { opacity: .65; }
.line .remove svg { width: 100%; height: 100%; }
.rule { border: 0; border-top: calc(var(--u) * 2) solid rgba(208,180,195,.55); margin: calc(var(--u) * 6) 0 calc(var(--u) * 46); }
.summary { margin-left: auto; width: calc(var(--u) * 565); }
.total { display: flex; justify-content: space-between; align-items: baseline; font-size: calc(var(--u) * 20); }
.total strong { font-weight: 400; font-size: calc(var(--u) * 30); }
.pay { margin-top: calc(var(--u) * 34); display: flex; flex-direction: column; gap: calc(var(--u) * 14); }
.pay .btn { display: flex; align-items: center; justify-content: center; text-align: center; min-height: calc(var(--u) * 64); padding: 12px 24px; font-size: calc(var(--u) * 19); }
.pay .btn.off { opacity: .4; pointer-events: none; }
.pay p { margin: 0; font-size: calc(var(--u) * 16); line-height: 1.6; opacity: .85; }
.note { margin: calc(var(--u) * 18) 0 0; font-size: calc(var(--u) * 15); line-height: 1.6; opacity: .8; text-align: center; }
.empty { font-size: calc(var(--u) * 22); }
.empty a { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 900px) {
  .cart-page { padding: 110px 28px 50px; max-width: 640px; }
  .cart-page h1 { font-size: 36px; }
  .line { grid-template-columns: 84px 1fr auto; gap: 8px 18px; font-size: 17px; }
  .line .name { font-size: 20px; } .line .sub { font-size: 15px; margin-top: 8px; }
  .line .step { grid-column: 2; grid-row: 2; width: 120px; height: 40px; font-size: 18px; margin: 0; }
  .line .step button { font-size: 28px; width: 38px; }
  .line .lineprice { grid-column: 3; grid-row: 1; min-width: 0; }
  .line .remove { grid-column: 3; grid-row: 2; justify-self: end; width: 28px; height: 28px; margin: 0; }
  .summary { width: 100%; }
  .total { font-size: 18px; } .total strong { font-size: 26px; }
  .pay .btn { min-height: 56px; font-size: 17px; }
  .pay p, .note { font-size: 15px; }
}