/* ============================================================
   SR MEDIA — Tebex theme · brand layer (loaded over shared.css)
   World: ivory-on-ink studio showroom. Serif Didone display
   (Bodoni Moda — matches the SR monogram), Archivo for UI,
   brass #C9A96A carries every action.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Archivo:wght@300;400;500;600;700&display=swap");

:root {
  /* Brand palette */
  --sr-ink: #0b0b0d;
  --sr-ink-2: #111114;
  --sr-ink-3: #17171b;
  --sr-line: #26262c;
  --sr-bone: #ede6d6;
  --sr-bone-dim: #b8b2a4;
  --sr-brass: #c9a96a;
  --sr-brass-hover: #ddc08a;

  --sr-logo: url("data:image/svg+xml,%0A%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20256%20256%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%3B%22%3E%0A%20%20%20%20%3Cg%20fill%3D%22%23EDE6D6%22%20transform%3D%22matrix%280.335266%2C0%2C0%2C0.335266%2C-9.01507%2C24.171501%29%22%3E%0A%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M703.466%2C592.196C718.16%2C589.112%20720.784%2C583.864%20721.606%2C589.485C722.415%2C595.015%20697.049%2C608.239%20684.511%2C612.53C679.41%2C614.275%20646.412%2C625.568%20617.483%2C619.602C584.032%2C612.703%20562.278%2C600.159%20533.963%2C546.258C495.523%2C473.08%20474.53%2C416.458%20433.377%2C405.927C419.695%2C402.426%20398.179%2C402.967%20397.39%2C403.067C395.443%2C403.313%20396.345%2C404.475%20396.049%2C445.503C395.766%2C484.773%20397.001%2C485.761%20393.681%2C487.821C359.915%2C508.772%20325.649%2C511.241%20320.542%2C511.856C316.299%2C512.367%20314.241%2C513.804%20314.272%2C509.498C314.313%2C504.062%20314.245%2C296.916%20314.255%2C295.486C314.274%2C293.075%20315.13%2C292.738%20317.301%2C293.917C332.276%2C302.054%20345.699%2C306.089%20392.727%2C333.077C397.055%2C335.561%20395.926%2C336.502%20395.976%2C341.501C396.001%2C344.061%20396.056%2C349.622%20396.061%2C373.502C396.062%2C381.763%20392.335%2C386.704%20400.497%2C385.476C434.388%2C380.375%20505.584%2C372.38%20534.29%2C315.396C556.958%2C270.4%20554.003%2C183.1%20480.557%2C161.329C474.254%2C159.46%20458.174%2C154.694%20398.51%2C156.613C398.3%2C156.62%20396.719%2C156.67%20396.692%2C158.512C395.843%2C217.391%20399.073%2C222.396%20394.724%2C220.079C391.127%2C218.163%20351.849%2C197.239%20349.799%2C196.047C319.46%2C178.402%20319.189%2C178.94%20316.593%2C177.342C312.298%2C174.698%20315.714%2C164.381%20310.766%2C156.356C303.552%2C144.657%20292.179%2C147.527%20291.467%2C143.506C290.295%2C136.895%20293.78%2C138.393%20300.501%2C138.391C459.62%2C138.36%20481.898%2C137.369%20517.512%2C144.434C640.006%2C168.736%20643.037%2C254.896%20622.23%2C299.37C594.803%2C357.992%20508.494%2C378.687%20499.263%2C380.042C490.481%2C381.332%20500.958%2C382.255%20509.464%2C384.612C584.038%2C405.276%20604.032%2C508.352%20640.084%2C557.838C666.65%2C594.304%20690.771%2C592.769%20703.466%2C592.196ZM368.749%2C217.059C381.255%2C223.741%20420.938%2C243.669%20443.843%2C260.02C485.293%2C287.061%20500.238%2C320.14%20503.177%2C326.644C506.782%2C334.624%20506.959%2C335.498%20503.76%2C337.834C497.757%2C342.217%20498.383%2C342.849%20492.19%2C347.106C473.23%2C360.138%20444.416%2C369.421%20442.91%2C367.141C425.336%2C340.537%20418.84%2C332.401%20321.701%2C286.079C216.986%2C236.144%20191.868%2C209.613%20182.887%2C200.128C98.616%2C111.12%20187.203%2C-32.071%20390.561%2C10.153C418.167%2C15.885%20444.433%2C27.07%20463.628%2C7.613C464.926%2C6.298%20474.785%2C4.453%20474.673%2C9.501C474.066%2C37.089%20472.709%2C37.007%20473.434%2C106.501C473.574%2C119.915%20474.315%2C125.784%20471.548%2C125.888C458.76%2C126.367%20457.882%2C125.711%20457.464%2C122.504C448.799%2C56.132%20375.303%2C7.717%20291.5%2C20.5C250.812%2C26.707%20234.139%2C52.44%20231.063%2C57.186C206.739%2C94.728%20233.279%2C128.136%20237.058%2C132.893C245.167%2C143.101%20249.927%2C153.079%20330.741%2C197.056C332.048%2C197.766%20367.258%2C216.049%20368.749%2C217.059ZM112.26%2C346.374C117.076%2C338.22%20116.923%2C338.22%20122.181%2C330.277C129.928%2C318.574%20147.59%2C303.981%20153.833%2C299.96C225.429%2C253.845%20296.445%2C281.82%20301.274%2C286.713C302.989%2C288.451%20302.032%2C333.516%20301.945%2C337.586C301.86%2C341.618%20297.862%2C336.981%20296.261%2C335.862C256.737%2C308.259%20218.794%2C309.531%20216.5%2C309.482C146.419%2C308.003%20130.66%2C367.505%20129.845%2C383.52C127.439%2C430.801%20142.644%2C455.483%20173.171%2C481.875C212.998%2C516.306%20315.7%2C535.81%20381.705%2C504.947C442.444%2C476.547%20441.316%2C438.687%20442.443%2C424.478C442.844%2C419.41%20463.001%2C437.249%20473.129%2C455.709C479.585%2C467.478%20480.277%2C468.146%20477.667%2C471.634C472.977%2C478.1%20469.32%2C481.711%20468.51%2C482.51C379.749%2C570.146%20174.147%2C566.677%20116.204%2C465.664C90.925%2C421.595%2099.812%2C383.804%20104.036%2C367.373C105.264%2C363.086%20106.669%2C357.541%20112.26%2C346.374ZM274.503%2C607.342C269.348%2C606.382%20271.285%2C599.74%20274.507%2C599.584C279.808%2C599.327%20294.781%2C599.87%20305.323%2C587.351C312.915%2C578.334%20314.057%2C558.115%20314.206%2C555.472C314.481%2C550.614%20325.371%2C555.88%20373.365%2C543.037C382.924%2C540.479%20395.276%2C534.998%20396.451%2C536.531C399.063%2C539.938%20386.563%2C597.054%20440.501%2C599.484C445.633%2C599.715%20446.108%2C598.782%20447.26%2C600.62C447.324%2C600.722%20448.352%2C605.929%20446.317%2C607.094C444.717%2C608.01%20288.008%2C606.823%20274.503%2C607.342Z%22%20style%3D%22fill%3Argb%28244%2C236%2C221%29%3Bfill-opacity%3A0.99%3B%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
  /* Tebex token remap */
  --color-text: var(--sr-bone);
  --color-text-darker: var(--sr-bone);
  --color-text-secondary: var(--sr-bone-dim);
  --color-bg: var(--sr-ink);
  --color-brighter-bg: var(--sr-ink-2);
  --color-primary: var(--sr-brass);
  --color-primary-hover: var(--sr-brass-hover);
  --color-primary-text: #141310;
  --color-primary-text-hover: #141310;
  --color-secondary: #2c2c33;
  --color-secondary-hover: #3a3a42;
  --color-secondary-text: var(--sr-bone);
  --color-secondary-text-hover: var(--sr-bone);
  --color-sale-banner-bg: var(--sr-brass);
  --color-sale-banner-text: #141310;
}

body {
  font-family: "Archivo", sans-serif;
  letter-spacing: 0.01em;
}

::selection {
  color: #141310;
  background-color: var(--sr-brass);
}

html {
  scrollbar-color: #3a3a42 var(--sr-ink);
}

:focus-visible {
  outline: 2px solid var(--sr-brass);
  outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Bodoni Moda", serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.text-content {
  line-height: 1.65;
}
.text-content a {
  color: var(--sr-brass);
  text-decoration-color: rgb(201 169 106 / 40%);
  text-underline-offset: 3px;
}
.text-content a:hover {
  color: var(--sr-brass-hover);
}

/* ---------- Buttons ---------- */

.btn-primary,
.btn-secondary,
.btn-tertiary {
  border-radius: 2px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
  transition: background-color 0.18s ease-out, color 0.18s ease-out, border-color 0.18s ease-out;
}

.btn-primary:hover,
.btn-primary:focus {
  box-shadow: 0 6px 18px rgb(0 0 0 / 45%);
}

.btn-secondary {
  border: 1px solid var(--sr-line);
}

/* Anchor-styled buttons must keep their button text color, not the link color */
a.btn-primary,
a.btn-primary:link,
a.btn-primary:visited {
  color: var(--color-primary-text);
}
a.btn-primary:hover,
a.btn-primary:focus {
  color: var(--color-primary-text-hover);
}
a.btn-secondary,
a.btn-secondary:link,
a.btn-secondary:visited {
  color: var(--color-secondary-text);
}

/* ---------- Header / hero ---------- */

/* Compact header bar: monogram + wordmark left, actions right.
   Overrides the stock theme's tall centered-title hero header. */
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 0;
  height: auto !important;
  padding: 18px 0 !important;
}
body.is-navigation-horizontal .site-header-inner {
  height: auto !important;
}

/* Header docked above the hero — no overlap. Hero keeps its own top padding. */
.site-header {
  margin-bottom: 0 !important;
}
.sr-hero {
  margin-top: 0 !important;
  padding-top: clamp(40px, 6vw, 80px) !important;
  margin-bottom: 0 !important;
}
.sr-hero-category {
  margin-top: 0 !important;
  padding-top: clamp(28px, 4vw, 44px) !important;
  margin-bottom: var(--widget-padding) !important;
}

/* Short pages: footer must reach the bottom of the viewport.
   Replace the stock grid layout with traditional block flow — the grid's
   fixed 3-row template broke when the sub-hero added a 4th row. */
.site {
  display: block !important;
  min-height: calc(100vh - var(--tebex-footer-height)) !important;
}
.site > .site-footer {
  position: sticky;
  top: 100vh;
}
/* Space between the last content block and the footer */
.site-footer {
  margin-top: calc(var(--widget-padding) * 2) !important;
}
.site-header-inner .site-title {
  position: static;
  inset: auto;
  margin: 0;
  width: auto;
  height: auto;
  order: -1;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  font-size: 22px;
  font-family: "Bodoni Moda", serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.site-header-inner .site-title::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  flex: none;
  background: var(--sr-logo) center/contain no-repeat;
}
.site-header-inner .site-title img {
  display: none;
}
.site-header-inner .actions {
  position: static;
  display: flex;
  gap: 6px;
}
.site-header-inner .toggle-navigation {
  display: none !important;
  --btn-icon: url("https://template-assets.tebex.io/images/burger.svg");
}
@media (width <= 960px) {
  .site-header-inner .toggle-navigation {
    display: block !important;
  }
}
.site-header-inner .log-in,
.site-header-inner .user-actions {
  position: static;
  margin-left: auto;
}
.site-header-inner .user-actions {
  display: flex;
  gap: 12px;
}
.site-header-inner .btn-discord {
  margin-left: 12px;
}
.site-header-inner .log-in {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-radius: 2px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 600;
  padding: 0 18px;
  height: 46px;
  line-height: 46px;
  transition: background-color 0.18s ease-out, box-shadow 0.18s ease-out;
}
.site-header-inner .log-in:hover,
.site-header-inner .log-in:focus {
  background: var(--color-primary-hover);
  color: var(--color-primary-text-hover);
  box-shadow: 0 6px 18px rgb(0 0 0 / 45%);
}
.site-header-inner .info {
  position: static;
  width: auto;
  max-width: none;
  height: auto;
  padding-left: 42px;
  line-height: 18px;
}
.site-header-inner .info.discord {
  padding-left: 0;
  padding-right: 42px;
  text-align: right;
}
.site-header-inner .info .image {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.site-header-inner .info.discord .image {
  left: auto;
  right: 0;
}
.site-header-inner .info .title {
  line-height: 20px;
  font-size: 12px;
}
.site-header-inner .info .action {
  font-size: 12px;
}
.site-header-inner .info .value {
  font-size: 12px;
}
@media (width <= 960px) {
  .site-header-inner {
    flex-wrap: wrap;
    padding: 14px 0;
  }
  .site-header-inner .info {
    display: none;
  }
}

.site-header-inner .info .action {
  color: var(--sr-brass);
}
.site-header-inner .info:hover .action {
  color: var(--sr-brass-hover);
}
.site-header-inner .info .value {
  border-color: var(--sr-line);
  background: var(--sr-ink-3);
  color: var(--sr-bone-dim);
}

.site-sale-banner {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
}

/* ---------- Index hero ---------- */

.sr-hero {
  position: relative;
  margin-bottom: clamp(40px, 6vw, 80px);
  padding: clamp(64px, 10vw, 140px) 0 clamp(32px, 4vw, 56px);
  overflow: hidden;
}
/* Inner container aligns hero text with the page content container */
.sr-hero > .wrap {
  max-width: min(var(--content-inner-width), 100%);
  margin: 0 auto;
  padding: 0 var(--content-padding);
}
/* Hero text content aligns with the page content container */
.sr-hero > .wrap,
.sr-hero > :not(.sr-hero-mark):not(.sr-hero::before) {
  max-width: min(var(--content-inner-width), 100%);
  margin-left: auto;
  margin-right: auto;
}
.sr-hero-category > .wrap {
  max-width: min(var(--content-inner-width), 100%);
}
.sr-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 90% 70% at 70% 20%, rgb(201 169 106 / 9%), transparent 60%),
    radial-gradient(ellipse 60% 60% at 15% 90%, rgb(237 230 214 / 4%), transparent 55%),
    linear-gradient(var(--sr-ink-2), var(--sr-ink-2));
}
.sr-hero-mark {
  position: absolute;
  top: 50%;
  right: max(-2%, calc((100vw - min(var(--content-inner-width), 100vw)) / 2 - 120px));
  translate: 0 -50%;
  z-index: -1;
  width: min(46vw, 620px);
  aspect-ratio: 1;
  background: var(--sr-logo) center/contain no-repeat;
  opacity: 0.14;
  user-select: none;
  pointer-events: none;
}
.sr-hero-title {
  margin: 0 0 20px;
  font-size: clamp(44px, 7vw, 88px);
  line-height: 1.02;
  max-width: 12ch;
}
.sr-hero-sub {
  max-width: 52ch;
  margin-bottom: 36px;
  color: var(--sr-bone-dim);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
}
.sr-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.sr-hero-actions .btn-primary,
.sr-hero-actions .btn-secondary {
  height: 54px;
  line-height: 54px;
  padding: 0 30px;
}
.sr-hero-rule {
  width: 72px;
  height: 1px;
  margin-bottom: 28px;
  background: var(--sr-brass);
}

/* Category page hero — shorter vertical version of the home hero */
.sr-hero-category {
  padding: clamp(40px, 6vw, 72px) var(--content-padding) clamp(32px, 4vw, 48px);
}
.sr-hero-category .sr-hero-title {
  font-size: clamp(34px, 4.5vw, 56px);
}
.sr-hero-category .countdown {
  display: inline-block;
  margin-top: 12px;
  font-family: "Archivo", sans-serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Product detail page: hide the duplicated title inside the card body */
.store-product-full .product-title {
  display: none;
}

/* ---------- Home categories ---------- */

.site-home-categories {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: var(--widget-padding);
  padding-top: clamp(24px, 4vw, 48px);
  padding-bottom: clamp(24px, 4vw, 48px);
}
@media (max-width: 900px) {
  .site-home-categories { grid-template-columns: repeat(min(var(--cols, 4), 2), minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .site-home-categories { grid-template-columns: 1fr; }
}
.site-home-categories .category {
  padding: 22px var(--widget-padding);
  background: var(--sr-ink-2);
  border: 1px solid var(--sr-line);
  border-radius: 3px;
  font-family: "Bodoni Moda", serif;
  font-size: 21px;
  font-weight: 600;
  transition: border-color 0.18s ease-out, translate 0.18s ease-out;
}
.site-home-categories .category:hover {
  border-color: var(--sr-brass);
  translate: 0 -2px;
  color: var(--sr-bone);
}

/* ---------- Panels, widgets, products ---------- */

.store-text,
.category-description,
.no-products,
.widget,
.store-product-full,
.store-products-list .store-product,
.store-products-images .store-product {
  border-radius: 3px;
}

.store-text,
.category-description,
.store-products-list .store-product,
.store-products-images .store-product,
.store-product-full {
  background: var(--sr-ink-2);
  border: 1px solid var(--sr-line);
}

.widget {
  background: var(--sr-ink-2);
  border: 1px solid var(--sr-line);
}

.widget-title {
  font-family: "Bodoni Moda", serif;
  font-size: 19px;
  letter-spacing: 0.02em;
}

.store-products-images .store-product {
  text-align: left;
  transition: border-color 0.18s ease-out, translate 0.18s ease-out;
}
.store-products-images .store-product:hover {
  border-color: var(--sr-brass);
  translate: 0 -3px;
}

/* Dynamic column fill: 1 item = full width, 2 = 50/50, 3 = thirds, 4+ = quarters per row */
.store-products-images,
.store-products-list {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: var(--widget-padding);
}
@media (max-width: 900px) {
  .store-products-images,
  .store-products-list { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .store-products-images,
  .store-products-list { grid-template-columns: 1fr; }
}

/* List display type renders as preview-style cards, not rows */
.store-products-list {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
}
.store-products-list .store-product {
  flex-direction: column !important;
  align-items: stretch !important;
  text-align: left;
  gap: 15px !important;
}
.store-products-list .store-product .image-link {
  margin: 0;
  width: 100%;
}
.store-products-list .store-product .image {
  width: 100% !important;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.store-products-list .store-product .product-title {
  margin-right: 0 !important;
}
.store-products-list .store-product .actions {
  flex-wrap: wrap !important;
  align-items: center;
  justify-content: flex-start;
  gap: 12px !important;
}
.store-products-list .store-product .price {
  width: auto !important;
  margin-bottom: 0;
}
.store-products-list .store-product .wide {
  min-width: 160px;
}

/* Card hover effects — brass border + lift (both display types) */
.store-products-list .store-product,
.store-products-images .store-product {
  transition: border-color 0.18s ease-out, translate 0.18s ease-out, box-shadow 0.18s ease-out;
}
.store-products-list .store-product:hover,
.store-products-images .store-product:hover {
  border-color: var(--sr-brass);
  translate: 0 -3px;
  box-shadow: 0 10px 24px rgb(0 0 0 / 35%);
}
.store-products-list .store-product:hover .product-title a,
.store-products-images .store-product:hover .product-title a {
  color: var(--sr-brass);
}

/* Short description inside product cards — clamped to 2 lines */
.store-product .card-descr {
  margin: -4px 0 0;
  color: var(--sr-bone-dim);
  font-size: 15px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.store-product .card-descr :is(h1, h2, h3, h4, h5, h6, ul, ol, img, table) {
  display: none;
}

/* Monogram wordmark treatment for packages without artwork */
.store-product .image-default {
  background:
    radial-gradient(ellipse at 30% 30%, rgb(201 169 106 / 8%), transparent 60%),
    var(--sr-ink-3) var(--sr-logo) center/38% no-repeat;
}

.store-product .product-title {
  font-family: "Bodoni Moda", serif;
  font-size: 25px;
}

.store-product .actions .price {
  font-size: 18px;
}

.store-product .price,
.basket .basket-item .price,
.basket .basket-checkout .total {
  color: var(--sr-brass);
}

.countdown {
  color: var(--sr-brass);
}

.quantity-field {
  border-radius: 3px;
  background: var(--sr-ink-3);
}
.store-product .quantity-field input[type=number] {
  border: none;
}

/* ---------- Navigation ---------- */

/* Nav pulled into the header bar on desktop */
@media (width > 960px) {
  .sr-nav-in-header {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: center;
  }
  .sr-nav-in-header > ul {
    display: flex !important;
    align-items: center;
    gap: 4px;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    line-height: 46px !important;
  }
  .sr-nav-in-header .menu > li > a {
    padding: 0 14px !important;
    white-space: nowrap;
    max-width: none !important;
  }
}
@media (width > 960px) {
  .navigation-horizontal > ul {
    border-radius: 3px;
    border-bottom: 1px solid var(--sr-line);
  }
}
.navigation-horizontal .has-children > ul {
  border-radius: 3px;
  background: var(--sr-ink-2);
  border: 1px solid var(--sr-line);
}
.navigation-horizontal .menu li a {
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 500;
}
.navigation-horizontal .menu li.link-active > a,
.navigation-horizontal .menu li a:hover {
  color: var(--sr-brass);
}

/* ---------- Basket ---------- */

.basket .basket-header {
  background: rgb(17 17 20 / 92%);
}
.basket-item {
  border-radius: 3px;
  border: 1px solid var(--sr-line);
}
.basket-item .quantity {
  border-radius: 2px;
}

/* ---------- Popups, toasts ---------- */

.popup-content {
  border-radius: 3px;
  background: var(--sr-ink-2);
  border: 1px solid var(--sr-line);
}

.toast {
  border-radius: 3px;
  border: 1px solid var(--sr-line);
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--sr-line);
}
.site-footer-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 28px;
  padding-bottom: 28px;
}
.site-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.site-footer .copyright {
  color: var(--sr-bone-dim);
  font-size: 13px;
  letter-spacing: 0.03em;
}
.we-accept {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}
.we-accept img {
  height: 24px;
  width: auto;
  display: block;
  opacity: 0.85;
}

.site-footer-tebex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 16px;
  border-top: 1px solid var(--sr-line);
}
.tebex-note {
  color: var(--sr-bone-dim);
  font-size: 12px;
  letter-spacing: 0.02em;
  max-width: 62ch;
  line-height: 1.6;
}
.tebex-brand {
  color: var(--sr-bone);
  text-decoration: none;
}
.tebex-brand:hover {
  color: var(--sr-brass);
}
.tebex-links {
  display: flex;
  gap: 18px;
}
.tebex-links a {
  color: var(--sr-bone-dim);
  font-size: 12px;
  text-decoration: none;
}
.tebex-links a:hover {
  color: var(--sr-brass);
}

/* ---------- Progress bars ---------- */

.widget-community-goal .progress,
.widget-goal .progress {
  border-radius: 2px;
  background: var(--sr-ink-3);
}
.widget-community-goal .progress-bar,
.widget-goal .progress-bar {
  border-radius: 2px;
  background: var(--sr-brass);
}

/* ---------- Motion: one authored moment ---------- */

@media (prefers-reduced-motion: no-preference) {
  .site-content,
  .site-home-categories {
    animation: sr-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  @keyframes sr-rise {
    from {
      opacity: 0;
      translate: 0 14px;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }
}

.site { grid-auto-rows: auto !important; }