/* --cream and --emerald are ALSO typed as bare rgba() channels, because a custom property
   cannot be given an alpha: cream is rgba(255, 252, 245, …) in the nav link, the tag badge, the
   drafty badge and the kit card text; emerald is rgba(5, 80, 78, …) in the confirmed-account and
   shipped-order chips. Change a token here and those places by hand. --pink is the Kit in the logo file; the Ігротека card uses it at 46% opacity (written out as #FFC3C875 there). */
:root {
  --cream: #FFFCF5;
  --ink: #1C1D19;
  --emerald: #05504E;
  --pink: #FFC3C8;
  --terracotta: #DB6558;
  --peach: #FFC787;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
}

a { color: var(--emerald); text-decoration: none; }
a:hover { color: var(--terracotta); }

img { max-width: 100%; display: block; }

/* Header */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 18px 48px;
  background: var(--emerald);
}

/* The wordmark is a file (catalog/img/edukitdrafty-logo.svg: cream EDU and Drafty, --pink Kit,
   cropped to the artwork), fetched once and cached; the height keeps the band close to its old size. */
.site-header__logo { display: block; line-height: 0; }
.site-header__logo-img { display: block; height: 38px; width: auto; }

.site-header__nav { display: flex; flex-wrap: wrap; gap: 8px 36px; }

.site-header__nav-link {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 252, 245, 0.72);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.site-header__nav-link:hover { color: var(--cream); }
.site-header__nav-link--active {
  color: #FFFFFF;
  font-weight: 600;
  border-bottom-color: var(--peach);
}

@media (max-width: 640px) {
  .site-header { padding: 12px 16px; gap: 10px 16px; }
  /* Five items do not fit one row at 360px ("Сенсорні ігри" is the long one), and "Кошик 12" or
     "Кабінет" are wider still: smaller type and a gap that fits, and the row wraps instead of
     overflowing. */
  .site-header__nav { gap: 6px 14px; }
  .site-header__nav-link { font-size: 14px; }
  .site-header__logo-img { height: 30px; }
}

/* Buttons */

.button {
  display: inline-block;
  border: none;
  border-radius: 8px;
  padding: 16px 32px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.button--primary { background: var(--emerald); color: var(--cream); }
.button--primary:hover { color: #FFFFFF; }
.button--full { display: block; width: 100%; padding: 15px 30px; margin-bottom: 10px; }

/* Badges */

.badge {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 20px;
}

.badge--tag {
  background: rgba(255, 252, 245, 0.92);
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: normal;
  padding: 3px 9px;
  margin-right: 4px;
  margin-bottom: 4px;
}

.badge--line { font-size: 10.5px; padding: 4px 10px; }
.badge--line-kit { background: var(--emerald); color: var(--cream); }
.badge--line-drafty {
  background: rgba(255, 252, 245, 0.95);
  color: var(--ink);
  border: 1.5px solid var(--terracotta);
  padding: 2.5px 10px;
}
.badge--line-physical { background: var(--peach); color: var(--ink); }

.badge--line-flat { font-size: 12px; padding: 5px 14px; }
.badge--line-flat-kit { background: var(--emerald); color: var(--cream); }
.badge--line-flat-drafty {
  background: transparent;
  color: var(--terracotta);
  border: 1.5px solid var(--terracotta);
  padding: 4px 14px;
}
.badge--line-flat-physical { background: var(--peach); color: var(--ink); }

/* Home */

.hero {
  max-width: 920px;
  margin: 0 auto;
  padding: 104px 48px 88px;
  text-align: center;
}
.hero__title {
  font-family: 'Unbounded', sans-serif;
  font-size: 48px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 22px;
}
.hero__lead {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(28, 29, 25, 0.7);
  max-width: 620px;
  margin: 0 auto 36px;
}

/* The home page has two labelled groups of cards: where to browse (links) and what kind of
   product it is (not links), so that the two questions are not mixed in one row. */
.home-group { max-width: 1000px; margin: 0 auto; padding: 0 48px 48px; }
.home-group:last-of-type { padding-bottom: 96px; }
.home-group__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(28, 29, 25, 0.55);
  margin: 0 0 14px;
}
.lines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.line-card {
  border-radius: 14px;
  padding: 36px;
  border: 1px solid rgba(28, 29, 25, 0.08);
}
.line-card--drafty { background: #FFFFFF; }
.line-card--kit { background: var(--emerald); }
/* A section card is a link: it must not take the global link colours, and says it is clickable. */
.line-card--section { display: block; background: #FFFFFF; color: inherit; }
/* Only the Ігротека card is tinted: the logo's pink (#FFC3C8) at 46% opacity (the owner's #FFC3C875), so it
   reads as a soft pink on the cream page. Сенсорні ігри stays white. */
.line-card--ihroteka { background: #FFC3C875; }
.line-card--section:hover { color: inherit; box-shadow: 0 4px 14px rgba(28, 29, 25, 0.1); }
.line-card--section .line-card__title { margin-top: 0; }
.line-card--section .line-card__title::after { content: " →"; color: var(--emerald); }
/* The KIT pill is emerald on the emerald card, so only its text showed. Scoped to the card: the
   same class sits on white on the product page and is right there. */
.line-card--kit .badge--line-flat-kit { background: var(--cream); color: var(--emerald); }
.line-card__title {
  font-family: 'Unbounded', sans-serif;
  font-size: 22px;
  font-weight: 600;
  margin: 18px 0 12px;
}
.line-card--kit .line-card__title { color: var(--cream); }
.line-card__text { font-size: 15px; line-height: 1.6; margin: 0; color: rgba(28, 29, 25, 0.7); }
.line-card--kit .line-card__text { color: rgba(255, 252, 245, 0.8); }

@media (max-width: 720px) {
  .hero { padding: 56px 24px 48px; }
  .hero__title { font-size: 34px; }
  .home-group { padding: 0 24px 32px; }
  .home-group:last-of-type { padding-bottom: 56px; }
  .lines { grid-template-columns: 1fr; }
}

/* Catalogue */

.catalogue { max-width: 1120px; margin: 0 auto; padding: 48px 48px 96px; }
.catalogue__title { font-family: 'Unbounded', sans-serif; font-size: 32px; font-weight: 600; margin: 0 0 8px; }
.catalogue__lead { font-size: 15px; color: rgba(28, 29, 25, 0.6); margin: 0 0 24px; }
.catalogue__empty { text-align: center; padding: 32px 0; color: rgba(28, 29, 25, 0.55); font-size: 15px; }

.filter-panel {
  border: none;
  margin: 0 0 20px;
  padding: 0;
}
.filter-group { border: none; margin: 0 0 18px; padding: 0; }
.filter-group__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(28, 29, 25, 0.55);
  padding: 0;
  margin: 0 0 10px;
}
.filter-group__chips { display: flex; flex-wrap: wrap; gap: 10px; }

.chip {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1.5px solid rgba(28, 29, 25, 0.18);
  background: #FFFFFF;
  color: var(--ink);
}
.chip:hover { color: var(--ink); border-color: rgba(28, 29, 25, 0.35); }
.chip--selected {
  font-weight: 600;
  border-color: var(--peach);
  background: var(--peach);
  color: var(--ink);
}

.filter-panel__clear {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--terracotta);
  text-decoration: underline;
  margin-top: 4px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.product-card {
  background: #FFFFFF;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(28, 29, 25, 0.08);
  display: flex;
  flex-direction: column;
  color: inherit;
}
.product-card:hover { color: inherit; box-shadow: 0 4px 14px rgba(28, 29, 25, 0.1); }

/* The card's picture box is a fixed 4:3 so that the grid's rows stay even, but the picture is never cut to
   fit it: `contain` shows the whole of it and the strips that are left over are tinted (emerald at 7%, the
   same channels as the status chips below) so that they look chosen. The overlay is positioned against this
   box, not the picture, so the chips and the badge stay on its top corners whatever the picture's shape. */
.product-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: rgba(5, 80, 78, 0.07); }
/* Out of the flow on purpose: a tall picture's own height would otherwise stretch the 4:3 box. */
.product-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.product-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(28, 29, 25, 0.4);
  font-size: 13px;
}
.product-card__overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
}
.product-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.product-card__media .badge--line { flex-shrink: 0; }

.product-card__body { padding: 16px; }
.product-card__title { margin: 0 0 8px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.product-card__price { margin: 0; font-size: 15px; font-weight: 700; color: var(--emerald); }

@media (max-width: 900px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .product-grid { grid-template-columns: 1fr; }
  .catalogue { padding: 32px 20px 64px; }
}

/* Product detail */

.product-detail { max-width: 1040px; margin: 0 auto; padding: 36px 48px 96px; }
.product-detail__back { display: inline-block; font-size: 14px; color: var(--emerald); font-weight: 600; margin-bottom: 24px; }

.product-detail__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

/* The main picture keeps its own proportions across the column. A tall one is capped at 70vh so that the title,
   price and buy button are not pushed off a laptop screen; `contain` then shows all of it, letterboxed. */
.product-gallery__main { margin-bottom: 12px; border-radius: 14px; overflow: hidden; background: rgba(5, 80, 78, 0.07); }
.product-gallery__main-image { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; }
.product-gallery__main--placeholder { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; color: rgba(28, 29, 25, 0.4); font-size: 14px; }
.product-gallery__thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.product-gallery__thumb {
  width: 76px;
  height: 76px;
  padding: 0;
  overflow: hidden;
  background: rgba(5, 80, 78, 0.07);
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
}
.product-gallery__thumb-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.product-gallery__thumb--active { border-color: var(--emerald); }
.product-gallery__thumb:focus-visible { outline: 3px solid var(--emerald); outline-offset: 2px; }

/* The picture buttons: a real <button> for the keyboard, with none of a button's looks. */
.zoomable { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; font: inherit; color: inherit; }
.zoomable:focus-visible { outline: 3px solid var(--emerald); outline-offset: 2px; }
.zoomable:disabled { cursor: default; }  /* the page has no <dialog>: see the script in product_detail.html */

/* The large sheets below the description: full width of the page's content, one under another, natural proportions. */
.description-sheets { display: flex; flex-direction: column; gap: 24px; margin-top: 56px; }
.description-sheets__item { border-radius: 14px; overflow: hidden; background: rgba(5, 80, 78, 0.07); }
.description-sheets__image { display: block; width: 100%; height: auto; }

/* The lightbox: a modal <dialog> that fills the viewport; a click on it (not on the picture) is the backdrop. */
html.lightbox-open { overflow: hidden; }
.lightbox:not([open]) { display: none; }  /* a browser without <dialog> would otherwise print its content inline */
/* `dvh` is the visible height on phones, where `vh` also counts the area under the toolbar; `vh` is the fallback. */
.lightbox { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(28, 29, 25, 0.92); overscroll-behavior: contain; }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(28, 29, 25, 0.92); }
.lightbox__image { max-width: 96vw; max-height: 92vh; max-height: 92dvh; width: auto; height: auto; object-fit: contain; }
.lightbox__close {
  position: absolute; top: 14px; right: 18px;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--cream); color: var(--ink);
  font-size: 28px; line-height: 1; cursor: pointer;
}
.lightbox__close:focus-visible { outline: 3px solid var(--peach); outline-offset: 2px; }

.product-info__title { font-family: 'Unbounded', sans-serif; font-size: 28px; font-weight: 600; margin: 16px 0 6px; line-height: 1.25; }
.product-info__age { margin: 0 0 20px; font-size: 14px; color: rgba(28, 29, 25, 0.55); }
.product-info__description { font-size: 15px; line-height: 1.65; color: rgba(28, 29, 25, 0.75); margin: 0 0 28px; }
.product-info__price { font-size: 26px; font-weight: 700; color: var(--ink); margin: 0 0 16px; }
.product-info__terms {
  display: block;
  text-align: center;
  font-size: 13px;
  color: rgba(28, 29, 25, 0.5);
  text-decoration: underline;
}

.goals-block {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 28px;
  border: 1px solid rgba(28, 29, 25, 0.08);
  border-left: 3px solid var(--terracotta);
}
.goals-block__title { margin: 0 0 12px; font-family: 'Unbounded', sans-serif; font-size: 16px; font-weight: 600; }
.goals-block__list { list-style: none; margin: 0; padding: 0; }
.goals-block__item {
  position: relative;
  padding-left: 18px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(28, 29, 25, 0.8);
}
.goals-block__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
}
.goals-block__item:last-child { margin-bottom: 0; }

@media (max-width: 800px) {
  .product-detail { padding: 24px 20px 64px; }
  .product-detail__layout { grid-template-columns: 1fr; gap: 24px; }
}

/* Site-wide messages (django.contrib.messages) */

.site-messages {
  list-style: none;
  margin: 0 auto;
  padding: 16px 48px 0;
  max-width: 480px;
}
.site-messages__item {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  background: rgba(28, 29, 25, 0.06);
  color: var(--ink);
}
.site-messages__item--success { background: var(--emerald); color: var(--cream); }
.site-messages__item--error { background: var(--terracotta); color: #FFFFFF; }

/* Account pages (allauth + cabinet) */

.account-page {
  max-width: 480px;
  margin: 0 auto;
  padding: 48px 48px 96px;
}
.account-page h1 {
  font-family: 'Unbounded', sans-serif;
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 24px;
}
.account-page h2 {
  font-family: 'Unbounded', sans-serif;
  font-size: 18px;
  font-weight: 600;
  margin: 32px 0 16px;
}
.account-page p { font-size: 15px; line-height: 1.6; color: rgba(28, 29, 25, 0.75); }
.account-page label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.account-page input[type="text"],
.account-page input[type="email"],
.account-page input[type="password"] {
  display: block;
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 4px;
  border: 1.5px solid rgba(28, 29, 25, 0.18);
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  background: #FFFFFF;
  color: var(--ink);
}
.account-page input:focus { outline: none; border-color: var(--emerald); }
.account-page .button { margin-top: 8px; }
.account-page ul.errorlist {
  list-style: none;
  color: var(--terracotta);
  font-size: 13px;
  margin: 0 0 8px;
  padding: 0;
}
.account-page__status {
  padding: 14px 16px;
  border-radius: 8px;
  margin-bottom: 24px;
}
.account-page__status--confirmed { background: rgba(5, 80, 78, 0.12); }
.account-page__status--unconfirmed { background: rgba(219, 101, 88, 0.12); }
.account-page__links {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.account-page__links li { margin-bottom: 8px; }
.site-messages__item--warning { background: var(--peach); color: var(--ink); }

/* Availability (card + product page) — separate from the form badge, which
   says what the product *is*; this says whether it can be bought now. */

.availability { margin: 6px 0 0; font-size: 13px; font-weight: 600; }
.availability--out { color: var(--terracotta); }
.availability--page { font-size: 15px; margin: 0 0 12px; }
.button:disabled, .button:disabled:hover {
  background: rgba(28, 29, 25, 0.18);
  color: rgba(28, 29, 25, 0.5);
  cursor: not-allowed;
}

/* Header cart count */

.site-header__cart-count {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  margin-left: 2px;
  border-radius: 10px;
  background: var(--peach);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

/* Cart page */

.cart-page { max-width: 760px; margin: 0 auto; padding: 36px 48px 96px; }
.cart-page__title { font-family: 'Unbounded', sans-serif; font-size: 28px; font-weight: 600; margin: 0 0 24px; }
.cart-page__empty { font-size: 16px; color: rgba(28, 29, 25, 0.7); margin: 0 0 20px; }
.cart-page__total { font-size: 20px; margin: 24px 0 8px; text-align: right; }
.cart-page__hint { font-size: 13px; color: rgba(28, 29, 25, 0.6); margin: 0; text-align: right; }

.cart-lines { list-style: none; margin: 0; padding: 0; }
.cart-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px 24px;
  align-items: center;
  padding: 16px;
  margin-bottom: 12px;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid rgba(28, 29, 25, 0.08);
}
.cart-line--unbuyable { border-color: var(--terracotta); }
.cart-line__title { display: block; margin: 8px 0 4px; font-size: 16px; font-weight: 600; color: var(--ink); }
a.cart-line__title { color: var(--emerald); }
.cart-line__note { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--terracotta); }
.cart-line__price { margin: 0; font-size: 14px; color: rgba(28, 29, 25, 0.6); }
.cart-line__qty-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cart-line__qty-label { font-size: 13px; color: rgba(28, 29, 25, 0.6); }
.cart-line__qty-input {
  width: 64px;
  padding: 8px;
  font: inherit;
  border: 1px solid rgba(28, 29, 25, 0.25);
  border-radius: 8px;
  background: #FFFFFF;
}
.cart-line__btn { padding: 9px 14px; font-size: 14px; }
.cart-line__qty-fixed { margin: 0; font-size: 15px; }
.cart-line__side { text-align: right; }
.cart-line__total { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.cart-line__remove {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--terracotta);
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 640px) {
  .cart-page { padding: 24px 20px 64px; }
  .cart-line { grid-template-columns: 1fr auto; }
  .cart-line__qty { grid-column: 1 / -1; grid-row: 2; }
  .cart-line__side { grid-column: 2; grid-row: 1; }
}

/* Cart → checkout link */

.cart-page__checkout { display: block; margin-top: 20px; text-align: center; }

/* Checkout and order pages */

.checkout-page { max-width: 640px; margin: 0 auto; padding: 36px 24px 96px; }
.checkout-page__title { font-family: 'Unbounded', sans-serif; font-size: 26px; font-weight: 600; margin: 0 0 20px; }
.checkout-section {
  background: #FFFFFF;
  border: 1px solid rgba(28, 29, 25, 0.08);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.checkout-section__title { font-family: 'Unbounded', sans-serif; font-size: 16px; font-weight: 600; margin: 0 0 14px; }
.checkout-lines { list-style: none; margin: 0; padding: 0; }
.checkout-lines__item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(28, 29, 25, 0.08);
  font-size: 15px;
}
.checkout-lines__item:last-child { border-bottom: none; }
.checkout-lines__sum { font-weight: 700; white-space: nowrap; }
.checkout-total { font-size: 18px; text-align: right; margin: 14px 0 6px; }
.checkout-back { display: inline-block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.checkout-note { font-size: 15px; line-height: 1.6; color: rgba(28, 29, 25, 0.75); margin: 0; }
.checkout-blocked {
  background: rgba(219, 101, 88, 0.12);
  border-radius: 12px;
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.6;
}
.checkout-blocked p { margin: 0 0 12px; }

.checkout-field { margin-bottom: 14px; }
.checkout-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.checkout-field input[type="text"],
.checkout-field input[type="tel"] {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid rgba(28, 29, 25, 0.18);
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  background: #FFFFFF;
  color: var(--ink);
}
.checkout-field input:focus { outline: none; border-color: var(--emerald); }
.checkout-field__help { font-size: 12.5px; color: rgba(28, 29, 25, 0.55); margin: 4px 0 0; }
.checkout-page ul.errorlist { list-style: none; color: var(--terracotta); font-size: 13px; margin: 4px 0 8px; padding: 0; }

.checkout-choices { list-style: none; margin: 0; padding: 0; }
.checkout-choices__item label { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 15px; cursor: pointer; }
.checkout-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; cursor: pointer; }
.checkout-consent input { margin-top: 4px; flex: none; width: 18px; height: 18px; }

.order-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 20px; font-size: 14px; color: rgba(28, 29, 25, 0.6); }
/* One pill, two names: the order's status and the files' access state are
   different facts (see orders/templates and accounts/templates/cabinet.html),
   shown side by side in the same row, so they share one shape and one set of
   colours instead of two copies that could drift apart. */
.order-status, .access-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  background: rgba(28, 29, 25, 0.08);
  color: var(--ink);
}
.order-status--awaiting_payment, .order-status--awaiting_shipment { background: var(--peach); }
.order-status--shipped { background: rgba(5, 80, 78, 0.18); color: var(--emerald); }
.order-status--received, .order-status--completed,
.access-badge--available { background: var(--emerald); color: var(--cream); }
.order-status--cancelled, .order-status--refused,
.access-badge--expired, .access-badge--cancelled { background: rgba(219, 101, 88, 0.2); color: var(--terracotta); }
.order-delivery { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 15px; }
.order-delivery dt { color: rgba(28, 29, 25, 0.6); }
.order-delivery dd { margin: 0; }

/* Cabinet: order list */

.account-orders { list-style: none; margin: 0 0 24px; padding: 0; }
.account-orders__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(28, 29, 25, 0.1);
  font-size: 15px;
}
.account-orders__item a { font-weight: 700; }
.account-orders__date { color: rgba(28, 29, 25, 0.6); }
.account-orders__total { margin-left: auto; font-weight: 700; }

@media (max-width: 640px) {
  .checkout-page { padding: 24px 16px 64px; }
  .checkout-section { padding: 16px; }
}

/* Paid files: order page section and the cabinet's at-a-glance badge */

.order-files__state { margin: 0 0 14px; font-size: 15px; line-height: 1.5; font-weight: 600; }
.order-files__state--available { color: var(--emerald); }
.order-files__state--not_paid { color: rgba(28, 29, 25, 0.7); }
.order-files__state--expired, .order-files__state--cancelled { color: var(--terracotta); }
.order-files__item { margin-top: 14px; }
.order-files__title { margin: 0 0 8px; font-size: 14px; color: rgba(28, 29, 25, 0.6); }
.order-files__notice {
  margin: 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(219, 101, 88, 0.12);
  font-size: 14px;
  line-height: 1.5;
}
.order-files__list { list-style: none; margin: 0; padding: 0; }
.order-files__list li { margin-bottom: 8px; }
.order-files__link { display: block; text-align: center; padding: 12px 18px; font-size: 15px; word-break: break-word; }