:root {
  --green: #143d2b;
  --gold: #b9862f;
  --cream: #f7ecda;
  --ink: #2b2b2b;

  /* Shape of the product photo boxes, matched to the actual photos
     (366 x 322). Image areas size themselves to this ratio, so a photo
     fills its box completely with no cropping and no empty bands.
     If you switch to photos of a different shape, change this one value. */
  --img-ratio: 366 / 322;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  background: var(--cream);
  color: var(--green);
}

/* ── header ─────────────────────────────────────────────── */

header {
  position: relative;
  background: var(--green);
  color: var(--cream);
  /* Side padding reserves room for the logo (left) and cart (right), which
     are absolutely positioned, so the heading can never run underneath
     them on narrow screens. */
  padding: 2rem 3.5rem 2rem 6.5rem;
  text-align: center;
}

header.compact {
  padding: 1.1rem 3.5rem 1.1rem 6rem;
}

header h1 {
  margin: 0;
  font-size: 2rem;
  letter-spacing: 0.05em;
}

header h1.small-title {
  font-size: 1.3rem;
}

header p {
  color: var(--gold);
  margin: 0.5rem 0 0;
}

.cart-btn,
.back-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  text-decoration: none;
  color: var(--cream);
  line-height: 1;
}

.cart-btn {
  right: 1.25rem;
}

/* Sits to the right of the logo rather than at the very edge */
.back-btn {
  left: 5.4rem;
}

/* Logo, pinned top left on every page, links back to the catalogue.
   The artwork has a cream background rather than a transparent one, so it
   is given a rounded tile to read as a deliberate badge on the dark bar. */
.logo-link {
  position: absolute;
  top: 50%;
  left: 1.25rem;
  transform: translateY(-50%);
  line-height: 0;
}

.logo {
  height: 62px;
  width: auto;
  display: block;
  border-radius: 8px;
  background: var(--cream);
}

header.compact .logo {
  height: 46px;
}

.badge {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: var(--gold);
  color: var(--green);
  border-radius: 10px;
  font-family: Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: bold;
}

/* ── layout ─────────────────────────────────────────────── */

main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.5rem;
}

footer {
  text-align: center;
  padding: 1rem;
  font-size: 0.85rem;
  color: #777;
}

.muted {
  color: #888;
  text-align: center;
}

.small {
  font-size: 0.8rem;
}

.hidden {
  display: none;
}

.error {
  text-align: center;
  color: #a33;
}

.warn {
  background: #fff6e0;
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  color: #7a5a12;
  font-size: 0.88rem;
}

/* ── catalog ────────────────────────────────────────────── */

.category h2 {
  border-bottom: 2px solid var(--gold);
  padding-bottom: 0.5rem;
  margin-top: 2.5rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}

.card {
  display: block;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

.card-img {
  width: 100%;
  /* The box takes the photos' own shape, so the image fills it corner to
     corner. Every card is still identical in size, because the width is
     set by the grid and the height follows from the ratio. */
  aspect-ratio: var(--img-ratio);
  display: block;
  overflow: hidden;
  background: #fff;
}

/* Image frames: the frame clips, the image inside is scaled up a hair so
   the faint near-white rim baked into the product photos is cropped away
   and the picture meets the frame edges with no visible seam. */
.card-img > img,
.product-img > img,
.thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
}

.placeholder {
  background: #ececec;
}

.card-body {
  padding: 0.9rem;
}

.card-body h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.price {
  margin: 0;
  font-weight: bold;
  color: var(--gold);
}

.price.big {
  font-size: 1.35rem;
  margin-bottom: 1.5rem;
}

/* ── product detail ─────────────────────────────────────── */

.product-detail {
  max-width: 520px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

.product-img {
  width: 100%;
  aspect-ratio: var(--img-ratio);
  border-radius: 8px;
  display: block;
  overflow: hidden;
  background: #fff;
}

.product-detail h2 {
  margin: 1rem 0 0.3rem;
}

.field-label {
  font-size: 0.95rem;
  margin: 1.4rem 0 0.6rem;
  color: var(--ink);
}

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

.tag {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.45rem 0.95rem;
  border: 1.5px solid var(--green);
  background: transparent;
  color: var(--green);
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.tag:hover {
  background: rgba(20, 61, 43, 0.07);
}

.tag.selected {
  background: var(--green);
  color: var(--cream);
  border-color: var(--green);
}

.select {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.5rem 0.7rem;
  border: 1.5px solid #ccc;
  border-radius: 8px;
  background: #fff;
  color: var(--green);
  min-width: 90px;
}

.line-preview {
  margin: 1.2rem 0 0;
  color: var(--ink);
  font-size: 0.92rem;
  min-height: 1.2em;
}

/* ── buttons ────────────────────────────────────────────── */

.primary-btn {
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: bold;
  width: 100%;
  margin-top: 1.2rem;
  padding: 0.85rem 1.5rem;
  background: var(--gold);
  color: var(--green);
  border: none;
  border-radius: 30px;
  cursor: pointer;
  text-decoration: none;
  display: block;
  text-align: center;
}

.primary-btn:disabled {
  background: #ddd;
  color: #999;
  cursor: not-allowed;
}

.primary-btn.inline {
  display: inline-block;
  width: auto;
}

.big-btn {
  font-size: 1.15rem;
  padding: 1rem 1.5rem;
}

/* ── cart table ─────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

.cart-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.cart-table th,
.cart-table td {
  padding: 0.75rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
}

.cart-table th {
  background: var(--green);
  color: var(--cream);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
}

.cart-table tr:last-child td {
  border-bottom: none;
}

.cell-product {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.thumb {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  overflow: hidden;
  background: #f2f2f2;
  flex-shrink: 0;
}

.remove-btn {
  border: none;
  background: transparent;
  color: #b33;
  font-size: 1rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}

.grand-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.25rem;
  padding: 0.9rem 1.1rem;
  background: var(--green);
  color: var(--cream);
  border-radius: 10px;
  font-size: 1.15rem;
}

.grand-total strong {
  color: var(--gold);
  font-size: 1.3rem;
}

.empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #777;
}

/* ── checkout ───────────────────────────────────────────── */

.summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1.1rem;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 1.2rem;
  font-size: 1.05rem;
}

.summary-line strong {
  color: var(--gold);
  font-size: 1.25rem;
}

.form {
  max-width: 520px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  padding: 1.4rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

.form label {
  display: block;
  margin: 0.9rem 0 0.35rem;
  font-size: 0.9rem;
  color: var(--ink);
}

.form input,
.form textarea {
  font-family: inherit;
  font-size: 1rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1.5px solid #ccc;
  border-radius: 8px;
  color: var(--green);
  background: #fff;
}

.form textarea {
  resize: vertical;
}

.form input:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--gold);
}

/* ── payment ────────────────────────────────────────────── */

.payment-box {
  max-width: 460px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

.thanks {
  margin: 0 0 0.6rem;
  font-size: 1.7rem;
}

.cod-note {
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.8rem;
  background: var(--cream);
  border: 1px solid var(--gold);
  border-radius: 8px;
  color: var(--green);
  font-size: 1rem;
  font-weight: bold;
}

.thanks-sub {
  margin: 0 0 1.5rem;
  color: var(--ink);
  font-size: 0.98rem;
}

.order-no {
  margin: 0 0 0.5rem;
  color: #777;
  font-size: 0.9rem;
}

.amount {
  margin: 0 0 1.2rem;
  font-size: 2rem;
  font-weight: bold;
  color: var(--gold);
}

.qr {
  width: 240px;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid #eee;
}

.phones {
  margin: 1.4rem 0 0.3rem;
  font-size: 0.9rem;
  color: var(--ink);
}

/* ── phones ─────────────────────────────────────────────── */

@media (max-width: 480px) {
  header h1 {
    font-size: 1.5rem;
  }

  header p {
    font-size: 0.85rem;
  }

  .logo,
  header.compact .logo {
    height: 42px;
  }
}