/* ============================================================
   Back To The 90s · style.css  (upload as an ASSET)
   Change the colours here and the whole store follows.
   There are two sets: dark (the first block) and light (the
   [data-theme="light"] block under it). The "Store Theme" option
   picks one. The accent colours are set in Tebex's template options
   instead (layout.html overrides the ones below with them).
   ============================================================ */
:root {
  --bg: #0D0D0F;
  --panel: #151518;
  --line: #222226;
  --line-strong: #EDEDEF;
  --panel-line: #26262B;  /* basket and popup borders */
  --field-line: #2E2E34;  /* form field borders */
  --text: #EDEDEF;
  --soft: #C9C9CF;        /* home page text, full package descriptions */
  --muted: #9A9AA3;
  --faint: #6E7079;
  --hover: #FFFFFF;       /* links on hover */
  --chip: #222226;        /* small square buttons (basket remove, popup close) */
  --chip-ink: #C9C9CF;
  --accent: #FFD30A;      /* buttons; "Accent Colour" option */
  --accent-ink: #0D0D0F;  /* text on buttons; "Button Text Colour" option */
  --link: var(--accent);  /* accent used as text (links, outline buttons) */
  --discord: #5865F2;
  --danger: #E5484D;      /* error messages, and a package answer that needs fixing */
  --success: #30A46C;     /* confirmation messages */
  --hero: #1B1C21;       /* behind the store name when there's no Home Page Background */
  --hero-shade: radial-gradient(ellipse at 30% 60%, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.8) 100%);
  --title-shadow: 0 4px 24px rgba(0,0,0,0.6);
  --desc-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 14px rgba(0,0,0,0.6);  /* keeps the home page text readable over a busy background */
  --shadow: rgba(0,0,0,0.6);
  --backdrop: rgba(0,0,0,0.7);  /* behind the options popup */
  --grain: 0.07;
  --shapes: 0.22;         /* how strongly the 90s shapes behind the page show (0 hides them) */
  --radius: 4px;
  --head: 'Anton', Impact, sans-serif;
  --body: 'Barlow Semi Condensed', 'Arial Narrow', Arial, sans-serif;

  /* Tebex adds a legal footer under every page. These make it match. */
  --tebex-legal-footer-background-color: #0D0D0F;
  --tebex-legal-footer-text-color: #6E7079;
  --tebex-legal-footer-border-color: #222226;
  --tebex-legal-footer-logo-color: #6E7079;
}

/* Light theme: a warm off-white page, so it isn't glaring, with the logo's pink as the accent */
:root[data-theme="light"] {
  --bg: #EFE9E1;
  --panel: #F8F4EE;
  --line: #DCD4C9;
  --line-strong: #19181D;
  --panel-line: #DCD4C9;
  --field-line: #CFC6BA;
  --text: #19181D;
  --soft: #3C3A42;
  --muted: #5F5C66;
  --faint: #7A7681;
  --hover: #19181D;
  --chip: #E8E1D7;
  --chip-ink: #3C3A42;
  --accent: #FB2475;      /* "Light Accent Colour" option */
  --accent-ink: #0D0D0F;  /* "Light Button Text Colour" option */
  /* Bright pink is too light to read as small text on a pale page, so text uses a darker shade of it */
  --link: color-mix(in srgb, var(--accent) 80%, #000);
  --hero: #E6DED3;
  --hero-shade: radial-gradient(ellipse at 30% 60%, rgba(239,233,225,0.35) 0%, rgba(239,233,225,0.9) 100%);
  --title-shadow: none;
  --desc-shadow: none;
  --shadow: rgba(60,40,50,0.18);
  --backdrop: rgba(25,24,29,0.45);
  --grain: 0.05;
  --shapes: 0.38;

  --tebex-legal-footer-background-color: #EFE9E1;
  --tebex-legal-footer-text-color: #7A7681;
  --tebex-legal-footer-border-color: #DCD4C9;
  --tebex-legal-footer-logo-color: #7A7681;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { position: relative; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 18px; line-height: 1.5; }
/* page fills the window and the content grows, so the footer sits at the bottom on short pages */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
main { flex: 1 0 auto; }
a { color: var(--link); }
a:hover { color: var(--hover); }
img { max-width: 100%; }
/* Hidden means hidden, even for elements given a display here (like label, below) */
[hidden] { display: none !important; }

/* Plain form controls, so Tebex's own pages (package options etc.) fit in */
input, select, textarea { width: 100%; padding: 12px 14px; background: var(--panel); color: var(--text); border: 1px solid var(--field-line); border-radius: var(--radius); font: 500 17px var(--body); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
label { display: block; font-weight: 600; margin: 14px 0 6px; }
table { width: 100%; border-collapse: collapse; }
td, th { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; }

/* announcement bar (template option) */
.announce { position: relative; z-index: 3; padding: 8px 16px; background: var(--accent); color: var(--accent-ink); text-align: center; font-weight: 700; font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; }

/* film grain over the whole page */
.grain { position: fixed; inset: 0; width: 100%; height: 100%; opacity: var(--grain); pointer-events: none; z-index: 50; }

/* 90s shapes behind everything (drawn in layout.html). They scroll with the page.
   They only show in the empty space around the content: the header, home page banner, package list,
   basket, login page, footer and popups all have solid backgrounds that cover them. */
.shapes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: var(--shapes); pointer-events: none; }
/* The package list and the login page get the page colour behind them. The soft shadow in the same colour
   carries it past their edges, so nearby shapes fade out before the text instead of being cut off. */
.shop__list, .narrow { background: var(--bg); box-shadow: 0 0 40px 32px var(--bg); }
/* The bottom of the header and the top of the footer fade the shapes out with the same shadow. It sits on its own
   layer, just above the shapes and under everything else, so it never covers the page content next to them.
   The header's fade is a separate element right after the header in layout.html, since anything inside the header
   would be drawn on top of the page. It stays in the page flow but is 0 tall, so it sits on the header's bottom edge. */
.site-header__fade, .site-footer::before { height: 0; z-index: -1; box-shadow: 0 0 40px 32px var(--bg); }
.site-header__fade { position: relative; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; }
/* The home page banner fades them out along its bottom edge too. It can carry the shadow itself: the packages and
   basket under it (.shop, which is position: relative) are drawn over the shadow, so it never covers them. */
.hero { box-shadow: 0 0 40px 32px var(--bg); }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.muted { color: var(--muted); font-size: 16px; }
.link { color: var(--text) !important; text-decoration: none; font-weight: 600; padding: 10px 12px; }
.h1 { font-family: var(--head); font-weight: 400; font-size: 72px; line-height: 0.95; margin: 0 0 16px; text-transform: uppercase; text-shadow: var(--title-shadow); }
.h2 { font-family: var(--head); font-weight: 400; font-size: 40px; line-height: 1; margin: 0; text-transform: uppercase; }

/* ---------- buttons ---------- */
/* Barlow's capitals sit 0.05em below the middle of their line, so centring the line leaves the label low.
   The bottom padding gets 0.1em more than the top to centre the capitals instead, and icons drop the same
   0.05em to line up with them. Set --pad-y and --pad-x to change a button's padding. */
.btn {
  --pad-y: 10px; --pad-x: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: calc(var(--pad-y) - 0.05em) var(--pad-x) calc(var(--pad-y) + 0.05em); border-radius: var(--radius);
  background: var(--accent); color: var(--accent-ink) !important; border: 2px solid var(--accent);
  font: 700 16px var(--body); text-transform: uppercase; letter-spacing: 0.04em;
  text-decoration: none; cursor: pointer; white-space: nowrap; gap: 10px;
}
.btn:hover { filter: brightness(1.08); }
.btn__icon { width: 20px; height: 20px; flex: none; fill: currentColor; position: relative; top: 0.05em; }
.btn--sm { min-height: 40px; --pad-y: 8px; --pad-x: 16px; }
.btn--ghost { background: transparent; color: var(--link) !important; }
.btn--discord { background: var(--discord); border-color: var(--discord); color: #FFFFFF !important; }
.btn--block { display: flex; width: 100%; min-height: 52px; font-size: 18px; margin-top: 16px; }
.btn--disabled { opacity: 0.45; cursor: not-allowed; filter: none !important; }

/* ---------- header ---------- */
.site-header { position: relative; z-index: 2; border-bottom: 1px solid var(--line); background: var(--bg); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding-top: 10px; padding-bottom: 10px; }
.site-header__logo { color: var(--text) !important; text-decoration: none; font: 400 28px var(--head); text-transform: uppercase; }
.site-header__logo img { height: 58px; width: auto; display: block; }
.nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.nav a { color: var(--text); text-decoration: none; font-weight: 600; font-size: 17px; text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 0; }
.nav a:hover, .nav a.is-active { color: var(--link); }
.nav .nav__muted { color: var(--muted); }
.site-header__right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.site-header__user { color: var(--muted); font-size: 16px; }

/* ---------- message from Tebex (errors, confirmations) ---------- */
.notice { margin-top: 20px; padding: 14px 18px; border-radius: var(--radius); border-left: 4px solid var(--accent); background: var(--panel); }
.notice--danger, .notice--error { border-left-color: var(--danger); }
.notice--success { border-left-color: var(--success); }

/* ---------- hero (home page) ---------- */
.hero { position: relative; overflow: hidden; background-color: var(--hero); background-size: cover; background-position: center; }
/* The Home Page Video fills the banner like the background image, under the shade. Players who turn animations
   off see the still background image instead. */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
.hero__shade { position: absolute; inset: 0; background: var(--hero-shade); }
.hero__inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding-top: 72px; padding-bottom: 64px; }
.hero__text { flex: 1 1 520px; min-width: 0; }
.hero__desc { font-size: 20px; color: var(--soft); max-width: 540px; margin-bottom: 26px; text-shadow: var(--desc-shadow); }
.hero__desc p { margin: 0 0 8px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero__logo { width: 280px; max-width: 70%; height: auto; filter: drop-shadow(0 12px 30px var(--shadow)); }

/* ---------- page body: content on the left, basket on the right ---------- */
.shop { position: relative; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; padding-top: 52px; padding-bottom: 72px; }
.shop__list { flex: 999 1 640px; min-width: 0; }
.section__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 20px; border-bottom: 2px solid var(--line-strong); padding-bottom: 10px; }
.section__desc { color: var(--muted); padding: 14px 0 4px; }
.section__desc p { margin: 0 0 8px; }
.section + .section { margin-top: 56px; }
[data-packages] + .section { margin-top: 56px; }  /* a parent category's subcategories, under its own packages */
[data-packages-from] { padding-top: 14px; }

/* ---------- package rows (category page) ---------- */
.pkg { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
/* No box colour behind package images, so transparent images sit straight on the page */
.pkg__img { width: 64px; height: 64px; flex: none; object-fit: cover; border-radius: var(--radius); }
.pkg__info { flex: 1 1 260px; min-width: 0; }
.pkg__name { font-weight: 700; font-size: 21px; }
.pkg__reason { color: var(--danger); font-size: 15px; font-weight: 600; }  /* why Tebex won't sell this one to the player */
.pkg__desc { color: var(--muted); font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pkg__desc * { display: inline; margin: 0; font-size: inherit; color: inherit; }
.pkg__desc img, .pkg__desc iframe, .pkg__desc video { display: none; }
.pkg__price { font-size: 21px; font-weight: 700; min-width: 120px; text-align: right; }
.pkg__cur, .pkg__per { font-size: 15px; color: var(--muted); font-weight: 500; }
.pkg__was { display: block; font-size: 15px; color: var(--faint); text-decoration: line-through; font-weight: 500; }
.pkg__action { display: flex; gap: 8px; }
.pkg__action .btn { min-width: 150px; }

/* Quantity stepper (- qty +) once a package is in the basket */
.qty { display: flex; align-items: stretch; min-width: 150px; height: 46px; border: 2px solid var(--accent); border-radius: var(--radius); overflow: hidden; margin: 0; }
.qty__btn { width: 44px; flex: none; display: grid; place-items: center; padding: 0; border: 0; background: var(--accent); color: var(--accent-ink) !important; font: 700 24px/1 var(--body); text-decoration: none; cursor: pointer; }
.qty__btn:hover { filter: brightness(1.08); }
.qty__num { flex: 1; display: grid; place-items: center; font-weight: 700; font-size: 20px; }

/* While a basket change is being sent: the control that sent it fades, and the other basket controls wait
   (layout.html sends one change at a time) */
.is-busy { opacity: .55; pointer-events: none; transition: opacity .15s; }
.is-basket-busy { cursor: progress; }
.is-basket-busy .pkg__action, .is-basket-busy .basket { pointer-events: none; }

/* Package options popup (plate text, phone number...) */
.popup { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; background: var(--backdrop); }
.popup__box { position: relative; width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 28px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 6px; box-shadow: 0 20px 60px var(--shadow); }
.popup__box .h2 { font-size: 32px; padding-right: 40px; margin-bottom: 4px; }
.popup__box .notice { margin: 12px 0 0; }
.popup__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 3px; background: var(--chip); color: var(--chip-ink); font-size: 20px; cursor: pointer; }
.popup__close:hover { color: var(--hover); }
.options select { appearance: auto; }
/* The questions after Discord (options.html): laid out as if the box weren't there, and hidden until Discord is linked */
.options__more { display: contents; }
.options__more[hidden] { display: none; }
/* A note at the top of the form, like "the phone must be in your inventory" (options.html) */
.options__note { margin: 12px 0 0; padding: 10px 14px; border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--chip); font-size: 16px; }
/* Plate and number answers (checked in layout.html): plates show in capitals, as they're sent */
.options [data-check="plate"] { text-transform: uppercase; }
.options [data-check]:invalid { border-color: var(--danger); }
/* Date of birth (options.html): the date picker's icon and calendar follow the store theme. Safari centres a
   date in its box, so it's lined up on the left like the other answers. */
.options input[type=date] { color-scheme: dark; text-align: left; }
:root[data-theme="light"] .options input[type=date] { color-scheme: light; }
.options input[type=date]::-webkit-date-and-time-value { text-align: left; }
/* Picture choices, like the Animal Character animals (options.html): each picture is a radio button. The button
   itself is see-through and covers its picture and name, so clicking either picks it and the keyboard still works. */
.picks { min-width: 0; margin: 14px 0 0; padding: 0; border: 0; }
.picks legend { padding: 0; margin-bottom: 6px; font-weight: 600; }
.picks__note { margin: -2px 0 10px; font-size: 15px; color: var(--muted); }
.picks__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 12px 8px; }
.pick { position: relative; margin: 0; font-weight: 500; text-align: center; cursor: pointer; }
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.pick__pic { display: grid; place-items: center; width: 100%; height: auto; aspect-ratio: 1; border: 2px solid var(--panel); border-radius: 6px; box-shadow: 0 0 0 1px var(--field-line); background: var(--chip); color: var(--faint); }
.pick__pic svg { width: 40%; fill: currentColor; }
.pick__name { display: block; margin-top: 6px; font-size: 15px; line-height: 1.15; color: var(--soft); }
.pick:hover .pick__pic { box-shadow: 0 0 0 1px var(--muted); }
.pick input:checked ~ .pick__pic { box-shadow: 0 0 0 3px var(--accent); }
.pick input:checked ~ .pick__name { color: var(--text); font-weight: 700; }
.pick input:focus-visible ~ .pick__pic { outline: 2px solid var(--text); outline-offset: 4px; }

/* Messages from Tebex after a basket change, shown at the bottom of the screen */
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(520px, calc(100% - 32px)); }
.toasts .notice { margin: 0; box-shadow: 0 10px 30px var(--shadow); }

/* "View details" on subscriptions, and the panel it opens under the row */
.pkg__toggle { margin-top: 2px; padding: 0; background: none; border: 0; color: var(--muted); font: 600 15px var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pkg__toggle:hover { color: var(--text); }
.pkg__details { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 20px 28px; padding: 8px 0 4px; }
.pkg__details[hidden] { display: none; }
.pkg__preview { flex: 0 1 320px; max-width: 320px; aspect-ratio: 1 / 1; object-fit: contain; border-radius: var(--radius); }
.pkg__full { flex: 1 1 280px; min-width: 0; color: var(--soft); font-size: 17px; }
.pkg__full > :first-child { margin-top: 0; }
.pkg__full p { margin: 0 0 10px; }
.pkg__full h1, .pkg__full h2, .pkg__full h3, .pkg__full h4, .pkg__full h5 { margin: 16px 0 4px; font: 700 14px var(--body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.pkg__full ul, .pkg__full ol { margin: 0 0 10px; padding-left: 20px; }
.pkg__full img { max-width: 100%; height: auto; }
/* The package's own page (package.html): its picture on the left at its own shape, and beside it the full
   description with the price and buttons right under it. Without a picture, those take the full width.
   The details box steps aside (display: contents) so its picture and description sit in the same grid as the
   price and buttons. The last row takes any height the picture adds, so the buttons stay under the text. */
.pkg--page { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "info info" "text text" "price action"; align-items: center; gap: 0 28px; padding: 24px 0 28px; }
.pkg--page-image { grid-template-columns: minmax(0, 340px) auto minmax(0, 1fr); grid-template-areas: "pic info info" "pic text text" "pic price action" "pic . ."; grid-template-rows: auto auto auto 1fr; }
.pkg--page .pkg__details--page { display: contents; }
.pkg--page .pkg__preview { grid-area: pic; align-self: start; width: 100%; max-width: none; height: auto; aspect-ratio: auto; }
.pkg--page .pkg__info { grid-area: info; }
.pkg--page .pkg__reason { margin-bottom: 10px; }
.pkg--page .pkg__full { grid-area: text; margin-bottom: 20px; }
.pkg--page .pkg__price { grid-area: price; min-width: 0; text-align: left; }
.pkg--page .pkg__action { grid-area: action; justify-self: start; }

/* ---------- basket, and Tebex's sidebar modules under it ---------- */
/* The column stays in view while the package list scrolls. With modules in it, it could be taller than the
   window and leave their bottom out of reach, so then it scrolls with the page instead. */
.shop__side { flex: 1 1 300px; min-width: 0; position: sticky; top: 24px; }
.shop__side:has(.shop__modules) { position: static; }
.basket { background: var(--panel); border: 1px solid var(--panel-line); border-radius: 6px; padding: 22px; }
/* Each module (module.*.html) is a panel like the basket */
.shop__modules > * { margin-top: 24px; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 6px; padding: 22px; }
.shop__modules :is(h1, h2, h3, h4) { font-family: var(--head); font-weight: 400; font-size: 26px; line-height: 1.1; text-transform: uppercase; margin: 0 0 12px; }
.module__line { margin: 0 0 10px; color: var(--soft); font-size: 16px; }
.module__line b { color: var(--text); }
.module__line--bad { color: var(--danger); }
.module__note { display: block; color: var(--faint); font-size: 14px; margin: 8px 0 0; }
.module__text { color: var(--soft); font-size: 16px; }
.module__text p { margin: 0 0 8px; }
.module__image { display: block; max-width: 100%; height: auto; margin-bottom: 12px; border-radius: var(--radius); }
/* Goal bars: striped and moving when the goal is set up that way in Tebex */
.module__bar { height: 12px; border-radius: 99px; background: var(--chip); overflow: hidden; }
.module__bar span { display: block; height: 100%; max-width: 100%; background-color: var(--accent); }
.module__bar--striped span { background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.3) 0 8px, transparent 8px 16px); background-size: 22.63px 22.63px; }
.module__bar--moving span { animation: module-bar 1s linear infinite; }
@keyframes module-bar { to { background-position: 22.63px 0; } }
@media (prefers-reduced-motion: reduce) { .module__bar--moving span { animation: none; } }
.module__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; color: var(--soft); font-size: 16px; }
.module__list b { color: var(--text); }
.module__list .module__note { margin: 0; }
.module__dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: var(--danger); }
.module__dot--on { background: var(--success); }
.module__package { display: flex; flex-direction: column; gap: 4px; color: var(--text) !important; text-decoration: none; }
.module__package img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.module__name { font-weight: 700; font-size: 19px; }
.module__price { color: var(--muted); }
.module__price s { color: var(--faint); margin-right: 4px; }
.module__form label { margin: 0 0 6px; font-size: 15px; }
.module__row { display: flex; gap: 8px; margin-bottom: 10px; }
.module__row input { flex: 1; min-width: 0; padding: 8px 12px; }
.module__row .btn { min-height: 0; --pad-y: 8px; --pad-x: 14px; }
.basket__title { font-family: var(--head); font-weight: 400; font-size: 26px; text-transform: uppercase; margin: 0 0 12px; }
.basket__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 16px; }
.basket__items > li { display: flex; align-items: center; gap: 10px; }
.basket__name { flex: 1; min-width: 0; }
/* An item's answers (plate text, number, name...) in small print under its name */
.basket__answers { list-style: none; margin: 2px 0 0; padding: 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.basket__answers:empty { display: none; }  /* an item whose only answer is its Discord account */
.basket__answers b { color: var(--text); font-weight: 600; }
.basket__price { color: var(--muted); }
.basket__remove { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: 3px; background: var(--chip); color: var(--chip-ink) !important; text-decoration: none; }
.basket__total { display: flex; justify-content: space-between; font-weight: 700; font-size: 20px; border-top: 1px solid var(--panel-line); margin-top: 14px; padding-top: 10px; }
.basket__note { color: var(--faint); font-size: 14px; text-align: center; margin: 10px 0 0; }
/* Coupons and gift cards on the basket (entered in Tebex's checkout popup) */
.basket__coupons { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--panel-line); }

/* ---------- small single-column pages (login, basket) ---------- */
.narrow { max-width: 520px; margin: 0 auto; padding: 56px 24px 72px; }
.narrow .h2 { margin-bottom: 16px; }
/* A custom page made in Tebex (cms/page.html), like Terms: wider, for reading */
.narrow--wide { max-width: 820px; }
.page-text { color: var(--soft); }
.page-text :is(h1, h2, h3, h4) { font: 400 26px/1.1 var(--head); text-transform: uppercase; color: var(--text); margin: 28px 0 8px; }
.page-text img { max-width: 100%; height: auto; }

/* ---------- footer ---------- */
.site-footer { position: relative; border-top: 1px solid var(--line); background: var(--bg); }
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 24px; padding-bottom: 24px; color: var(--faint); font-size: 15px; }
.site-footer__right { display: flex; flex-wrap: wrap; gap: 6px 16px; }

/* ---------- phones ---------- */
@media (max-width: 640px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .h1 { font-size: 48px; }
  .h2 { font-size: 32px; }
  .hero__inner { padding-top: 48px; padding-bottom: 44px; }
  .hero__logo { display: none; }
  .pkg__price { text-align: left; min-width: 0; }
  .pkg__action, .pkg__action .btn, .pkg__action .qty { width: 100%; }
  /* A package's own page stacks: picture, description, price, buttons */
  .pkg--page, .pkg--page-image { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pic" "info" "text" "price" "action"; grid-template-rows: none; }
  .pkg--page .pkg__preview { margin-bottom: 20px; }
  .pkg--page .pkg__price { margin-bottom: 10px; }
  .pkg--page .pkg__action { justify-self: stretch; }
  .site-header__right { margin-left: 0; }
}