* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
}

body.no-scroll {
  overflow: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

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

svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.container {
  width: var(--container);
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: 9999;
  inset-inline-start: 16px;
  top: -80px;
  padding: 10px 16px;
  border-radius: 0 0 8px 8px;
}

.skip-link:focus {
  top: 0;
}

.announcement-bar {
  position: relative;
  z-index: 120;
}

.announcement-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.announcement-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.announcement-divider {
  width: 1px;
  height: 13px;
}

.language-switch {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
}

.header-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}

.brand {
  display: flex;
  align-items: center;
  min-width: max-content;
}

.brand img {
  object-fit: contain;
  border-radius: 50%;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-copy small {
  margin-top: 5px;
}

.desktop-nav {
  display: flex;
  justify-content: center;
  align-items: center;
}

.desktop-nav a {
  position: relative;
  white-space: nowrap;
}

.desktop-nav a::after {
  position: absolute;
  inset-inline: 50%;
  transition: inset 180ms ease;
}

.desktop-nav a:hover::after,
.desktop-nav a.active::after {
  inset-inline: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.icon-button,
.cart-button {
  cursor: pointer;
  transition: 180ms ease;
}

.icon-button {
  display: grid;
  place-items: center;
}

.icon-button svg {
  width: 19px;
  height: 19px;
}

.cart-button {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cart-button svg {
  width: 18px;
  height: 18px;
}

.cart-button b {
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 11px;
}

.mobile-menu-button,
.mobile-nav {
  display: none;
}

.mobile-menu-button span {
  width: 18px;
  height: 1.5px;
  margin: 2px 0;
}

.global-search {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  display: none;
  padding: 12px 0 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.35);
}

.global-search.open {
  display: block;
}

.global-search-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.global-search-inner svg {
  flex: 0 0 auto;
  width: 21px;
}

.global-search-inner input {
  flex: 1;
  padding: 12px 0;
  border: 0;
  outline: 0;
  font-size: 17px;
}

.global-search-inner input::placeholder {
  color: #777;
}

.global-search-inner button {
  border: 0;
  background: none;
  cursor: pointer;
}

.search-suggestions {
  max-height: 310px;
  overflow-y: auto;
}

.search-suggestion {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.search-suggestion img {
  width: 44px;
  height: 52px;
  object-fit: cover;
  border-radius: 7px;
}

.search-suggestion strong,
.search-suggestion small {
  display: block;
}

.search-suggestion small {
  margin-top: 2px;
  color: #87837d;
}

.search-suggestion b {
  color: var(--gold-light);
}

/* Shared sections */
.page-shell {
  min-height: 65vh;
}

.section-dark {
  position: relative;
  overflow: hidden;
}

.section-dark::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 25%, rgba(184, 32, 37, 0.1), transparent 25%),
    radial-gradient(circle at 84% 70%, rgba(214, 169, 67, 0.09), transparent 27%);
}

.section-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.section-head.center {
  display: block;
  max-width: 670px;
  margin: 0 auto 42px;
  text-align: center;
}

.section-kicker,
.eyebrow {
  text-transform: uppercase;
}

.section-title {
  margin: 8px 0 0;
}

.section-subtitle {
  margin: 13px 0 0;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.section-dark .text-link {
  color: var(--gold-light);
}

.text-link::after {
  content: "→";
  transition: transform 180ms ease;
}

[dir="rtl"] .text-link::after {
  content: "←";
}

.text-link:hover::after {
  transform: translateX(4px);
}

[dir="rtl"] .text-link:hover::after {
  transform: translateX(-4px);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
}

.button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Home hero */
.hero {
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(214, 169, 67, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(214, 169, 67, 0.08) 1px, transparent 1px);
}

.hero::after {
  content: "";
  position: absolute;
  aspect-ratio: 1;
  border: 1px solid rgba(214, 169, 67, 0.17);
  border-radius: 50%;
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
}

.hero-pill {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  font-size: 12px;
}

.hero-pill i {
  border-radius: 50%;
}

.hero-description {
  margin: 0;
}

.hero-actions {
  display: flex;
  align-items: center;
}

.hero-trust {
  display: flex;
  align-items: center;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
}

.trust-item svg {
  width: 20px;
}

.hero-visual {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
}

.hero-logo-glow {
  position: absolute;
  aspect-ratio: 1;
}

.hero-logo {
  position: relative;
  z-index: 2;
  width: min(570px, 100%);
  filter: drop-shadow(0 28px 38px rgba(0, 0, 0, 0.5));
  animation: heroFloat 5s ease-in-out infinite;
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.shipping-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.shipping-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
}

.shipping-card + .shipping-card {
  border-inline-start: 1px solid #e8e2d7;
}

.shipping-card strong,
.shipping-card small {
  display: block;
}

.shipping-card strong {
  font-size: 16px;
}

.shipping-card small {
  margin-top: 1px;
  font-size: 12px;
}

.shipping-card b {
  margin-inline-start: auto;
}

.categories-grid {
  display: grid;
}

.category-card {
  position: relative;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
}

.category-card::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
}

.category-card::after {
  z-index: -1;
}

.category-card .category-icon {
  display: grid;
  place-items: center;
}

/* Product cards */
.products-grid {
  display: grid;
}

.product-card {
  position: relative;
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.product-media {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
}

.product-media::after {
  position: absolute;
  inset: 0;
}

.product-media img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 280ms ease;
}

.product-badges {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge {
  color: white;
  font-size: 10px;
}

.product-quick-add {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  cursor: pointer;
  transform: translateY(60px);
  transition: transform 200ms ease, background 180ms ease;
}

.product-card:hover .product-quick-add,
.product-quick-add:focus {
  transform: translateY(0);
}

.product-quick-add:hover {
  color: white;
}

.product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.product-stock.in-stock {
  color: #2c7a50;
}

.product-stock.low-stock {
  color: #b36a13;
}

.product-stock.out-of-stock {
  color: var(--red);
}

.product-name {
  cursor: pointer;
}

.product-price-row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.product-old-price {
  font-size: 13px;
  text-decoration: line-through;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 70px 24px;
  border: 1px dashed #cec5b8;
  border-radius: var(--radius-lg);
  text-align: center;
}

.empty-state .empty-icon {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  border-radius: 50%;
  font-size: 28px;
}

.empty-state h3 {
  margin: 0 0 7px;
  font-size: 22px;
}

.empty-state p {
  margin: 0;
  color: #827b72;
}

.collection-banner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.72fr;
  align-items: center;
  overflow: hidden;
}

.collection-banner::after {
  content: "ACS";
  position: absolute;
  inset-inline-end: -15px;
  font-weight: 950;
  letter-spacing: -0.09em;
}

.collection-copy {
  position: relative;
  z-index: 2;
}

.collection-copy h2 {
  max-width: 600px;
  margin: 8px 0 14px;
  line-height: 1.08;
}

.collection-copy p {
  max-width: 560px;
  margin: 0 0 26px;
}

.collection-mark {
  position: relative;
  z-index: 2;
  margin-inline: auto;
}

.benefits-grid {
  position: relative;
  display: grid;
}

.benefit-icon {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  margin-bottom: 23px;
  border: 1px solid rgba(214, 169, 67, 0.3);
  color: var(--gold-light);
}

.benefit-icon svg {
  width: 23px;
}

.benefit-card p {
  line-height: 1.7;
}

/* Inner pages */
.page-hero {
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  position: absolute;
  width: 520px;
  height: 520px;
  inset-inline-end: -100px;
  top: -250px;
  border: 1px solid rgba(214, 169, 67, 0.16);
  border-radius: 50%;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 12px;
}

.page-hero h1 {
  position: relative;
  margin: 0;
}

.page-hero p {
  position: relative;
  max-width: 680px;
  margin: 12px 0 0;
}

.shop-shell {
  display: grid;
  align-items: start;
}

.filters-panel {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  padding: 22px;
}

.filters-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.filters-head h3 {
  margin: 0;
  font-size: 19px;
}

.filters-head button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--red);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

.filter-group {
  padding: 17px 0;
  border-top: 1px solid #ece6dc;
}

.filter-group label,
.filter-group-title {
  display: block;
  margin-bottom: 8px;
  color: #332f29;
  font-size: 12px;
  font-weight: 850;
}

.filter-group select,
.filter-group input {
  width: 100%;
  height: 42px;
  padding: 8px 11px;
  border: 1px solid #d9d1c5;
  border-radius: 9px;
  outline: none;
  background: #fcfaf6;
}

.filter-group select:focus,
.filter-group input:focus {
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(214, 169, 67, 0.12);
}

.price-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.price-inputs small {
  display: block;
  margin-bottom: 4px;
  color: #8d867e;
}

.shop-main {
  min-width: 0;
}

.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.shop-results-count {
  color: #716a61;
  font-size: 13px;
}

.shop-results-count strong {
  color: #1c1915;
}

.shop-sort {
  display: flex;
  align-items: center;
  gap: 9px;
}

.shop-sort label {
  color: #777067;
  font-size: 12px;
}

.shop-sort select {
  min-width: 150px;
  height: 40px;
  padding: 6px 10px;
  border: 1px solid #d9d1c5;
  border-radius: 9px;
}

.mobile-filter-button {
  display: none;
}

/* About */
.about-intro {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 70px;
  align-items: center;
}

.about-visual {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.about-visual::before {
  content: "";
  position: absolute;
  width: 75%;
  aspect-ratio: 1;
  border: 1px solid rgba(214, 169, 67, 0.3);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(214, 169, 67, 0.03), 0 0 0 68px rgba(214, 169, 67, 0.02);
}

.about-visual img {
  position: relative;
  width: 88%;
}

.about-copy h2 {
  margin: 9px 0 18px;
  font-size: clamp(33px, 4.5vw, 53px);
  line-height: 1.1;
}

.about-copy > p {
  color: #6f685f;
  font-size: 16px;
  line-height: 1.9;
}

.about-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 28px;
}

.about-point {
  padding: 18px;
  border: 1px solid #dfd8cc;
  border-radius: var(--radius-md);
  background: white;
}

.about-point b {
  font-size: 24px;
}

.about-point strong,
.about-point span {
  display: block;
}

.about-point strong {
  margin: 8px 0 3px;
}

.about-point span {
  color: #898178;
  font-size: 12px;
}

/* FAQ / contact */
.faq-layout {
  display: grid;
  grid-template-columns: 0.68fr 1.32fr;
  gap: 60px;
  align-items: start;
}

.faq-aside {
  position: sticky;
  top: calc(var(--header-height) + 35px);
}

.faq-aside h2 {
  margin: 9px 0 14px;
  font-size: 38px;
  line-height: 1.15;
}

.faq-aside p {
  color: #746d64;
}

.faq-list {
  border-top: 1px solid #dcd4c8;
}

.faq-item {
  border-bottom: 1px solid #dcd4c8;
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 23px 0;
  border: 0;
  background: none;
  text-align: inherit;
  cursor: pointer;
  font-weight: 800;
}

.faq-question span:last-child {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #ccc3b6;
  border-radius: 50%;
  transition: 180ms ease;
}

.faq-item.open .faq-question span:last-child {
  transform: rotate(45deg);
  border-color: var(--red);
  color: var(--red);
}

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms ease;
}

.faq-answer > div {
  overflow: hidden;
}

.faq-answer p {
  margin: 0;
  padding: 0 0 23px;
  color: #736c63;
  line-height: 1.8;
}

.faq-item.open .faq-answer {
  grid-template-rows: 1fr;
}

.contact-layout {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 30px;
  align-items: stretch;
}

.contact-info {
  padding: 34px;
  border-radius: var(--radius-xl);
  color: white;
}

.contact-info h2 {
  margin: 10px 0 14px;
  font-size: 37px;
  line-height: 1.12;
}

.contact-info > p {
  color: #aaa39a;
}

.contact-methods {
  margin-top: 34px;
}

.contact-method {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-method-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(214, 169, 67, 0.3);
  border-radius: 12px;
}

.contact-method small,
.contact-method strong {
  display: block;
}

.contact-method small {
  margin-bottom: 2px;
  color: #817d76;
}

.contact-form,
.checkout-card {
  padding: 34px;
  border: 1px solid #ded6ca;
  border-radius: var(--radius-xl);
  background: white;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}

.form-field {
  min-width: 0;
}

.form-field.full {
  grid-column: 1 / -1;
}

.form-field label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid #d9d1c5;
  border-radius: 10px;
  outline: none;
  background: #fdfbf8;
  transition: border 150ms ease, box-shadow 150ms ease;
}

.form-field input,
.form-field select {
  height: 47px;
  padding: 9px 12px;
}

.form-field textarea {
  min-height: 125px;
  resize: vertical;
  padding: 12px;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--gold-dark);
  box-shadow: 0 0 0 3px rgba(214, 169, 67, 0.13);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

/* Cart drawer */
.drawer-overlay {
  position: fixed;
  z-index: 199;
  inset: 0;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.62);
  opacity: 0;
  backdrop-filter: blur(3px);
  transition: opacity 200ms ease, visibility 200ms ease;
}

.drawer-overlay.open {
  visibility: visible;
  opacity: 1;
}

.cart-drawer {
  position: fixed;
  z-index: 200;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(470px, 100%);
  display: grid;
  grid-template-rows: auto 1fr auto;
  box-shadow: -22px 0 60px rgba(0, 0, 0, 0.25);
  transform: translateX(105%);
  transition: transform 230ms ease;
}

[dir="rtl"] .cart-drawer {
  transform: translateX(-105%);
}

.cart-drawer.open {
  transform: translateX(0);
}

.drawer-header {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1px solid #ddd5c9;
}

.drawer-header h2 {
  margin: 4px 0 0;
  line-height: 1;
}

.drawer-header h2 small {
  font-size: 13px;
}

.close-drawer {
  width: 38px;
  height: 38px;
  border: 1px solid #d2c9bc;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
}

.cart-drawer-body {
  overflow-y: auto;
  padding: 10px 26px;
}

.cart-item {
  display: grid;
  grid-template-columns: 79px 1fr auto;
  gap: 13px;
  padding: 16px 0;
  border-bottom: 1px solid #e1dacf;
}

.cart-item-image {
  width: 79px;
  height: 94px;
  object-fit: contain;
  padding: 5px;
  border-radius: 10px;
  background: #ebe4d9;
}

.cart-item h4 {
  margin: 2px 0 3px;
  font-size: 14px;
  line-height: 1.4;
}

.cart-item small {
  color: #8b847a;
  font-size: 10px;
}

.quantity-control {
  width: fit-content;
  display: flex;
  align-items: center;
  margin-top: 12px;
  border: 1px solid #d6cec1;
  border-radius: 8px;
  overflow: hidden;
}

.quantity-control button {
  width: 30px;
  height: 29px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.quantity-control span {
  min-width: 27px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}

.cart-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.cart-item-side strong {
  white-space: nowrap;
}

.remove-item {
  border: 0;
  background: none;
  color: var(--red);
  cursor: pointer;
  font-size: 11px;
}

.cart-drawer-footer {
  padding: 22px 26px 26px;
}

.cart-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.cart-total-row span {
  color: #696159;
}

.cart-total-row strong {
  font-size: 24px;
}

.cart-note {
  margin: 0 0 16px;
  color: #8f887f;
  font-size: 11px;
}

.cart-drawer-footer .button {
  width: 100%;
}

.cart-empty {
  min-height: 100%;
  display: grid;
  place-content: center;
  padding: 40px 20px;
  text-align: center;
}

.cart-empty-icon {
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  border: 1px solid #dcd3c5;
  border-radius: 50%;
}

.cart-empty-icon svg {
  width: 35px;
}

.cart-empty h3 {
  margin: 0 0 7px;
}

.cart-empty p {
  margin: 0 0 20px;
  color: #837c73;
}

/* Product modal */
.modal-layer {
  position: fixed;
  z-index: 300;
  inset: 0;
  visibility: hidden;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  overflow-y: auto;
  backdrop-filter: blur(5px);
  transition: opacity 180ms ease, visibility 180ms ease;
}

.modal-layer.open {
  visibility: visible;
  opacity: 1;
}

.modal-card {
  width: min(980px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border: 1px solid rgba(214, 169, 67, 0.3);
  border-radius: var(--radius-xl);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.4);
  transform: translateY(18px) scale(0.985);
  transition: transform 180ms ease;
}

.modal-layer.open .modal-card {
  transform: translateY(0) scale(1);
}

.modal-close {
  position: absolute;
  z-index: 3;
  top: 17px;
  inset-inline-end: 17px;
  width: 39px;
  height: 39px;
  border: 1px solid #cfc5b7;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  font-size: 24px;
}

.product-modal {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
}

.product-modal-media {
  min-height: 560px;
  display: grid;
  place-items: center;
  padding: 45px;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}

[dir="rtl"] .product-modal-media {
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
}

.product-modal-media img {
  width: 100%;
  max-height: 470px;
  object-fit: contain;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.2));
}

.product-modal-content {
  padding: 54px 45px 42px;
}

.modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 13px;
}

.modal-tag {
  padding: 5px 9px;
  border: 1px solid #d9c99f;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
}

.product-modal-content h2 {
  margin: 0 0 9px;
  font-size: clamp(27px, 4vw, 39px);
  line-height: 1.15;
}

.product-code {
  margin: 0;
  color: #938b80;
  font-size: 12px;
}

.modal-price {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 23px 0;
}

.modal-price strong {
  font-size: 30px;
}

.modal-price del {
  color: #9a9288;
}

.product-description {
  color: #6e675d;
  line-height: 1.8;
}

.product-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 25px;
  margin: 22px 0;
  border-block: 1px solid #ddd5c9;
}

.product-spec {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  color: #787067;
  font-size: 12px;
}

.product-spec strong {
  color: #27231d;
}

.modal-purchase-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 25px;
}

.modal-purchase-row .quantity-control {
  height: 48px;
  margin: 0;
  border-radius: 11px;
}

.modal-purchase-row .quantity-control button {
  width: 39px;
  height: 47px;
}

.modal-purchase-row .button {
  flex: 1;
}

/* Checkout */
.checkout-section {
  padding: 54px 0 90px;
}

.checkout-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 26px;
  align-items: start;
}

.checkout-card h2,
.checkout-summary h2 {
  margin: 4px 0 23px;
  font-size: 24px;
}

.checkout-block + .checkout-block {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid #e2dbd0;
}

.checkout-block-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 17px;
  font-weight: 850;
}

.checkout-block-title b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--gold-light);
  border-radius: 50%;
  font-size: 11px;
}

.payment-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.payment-option {
  position: relative;
  cursor: pointer;
}

.payment-option input {
  position: absolute;
  opacity: 0;
}

.payment-option-content {
  min-height: 95px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 15px;
  border: 1px solid #d8d0c4;
  border-radius: 12px;
  transition: 160ms ease;
}

.payment-option input:checked + .payment-option-content {
  box-shadow: 0 0 0 3px rgba(214, 169, 67, 0.12);
}

.payment-option-content strong {
  margin-bottom: 3px;
}

.payment-option-content small {
  color: #8e867c;
}

.gateway-note {
  display: none;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #e6c777;
  border-radius: 10px;
  background: #fff7df;
  color: #69501d;
  font-size: 12px;
}

.gateway-note.show {
  display: block;
}

.checkout-summary {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  padding: 29px;
  border: 1px solid #ded6ca;
  border-radius: var(--radius-xl);
  background: white;
}

.checkout-items {
  max-height: 370px;
  overflow-y: auto;
  padding-inline-end: 4px;
}

.checkout-item {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid #ebe5db;
}

.checkout-item img {
  width: 58px;
  height: 67px;
  object-fit: contain;
  padding: 3px;
  border-radius: 8px;
  background: #ece5da;
}

.checkout-item strong {
  display: block;
  font-size: 12px;
}

.checkout-item small {
  color: #8d857c;
}

.summary-totals {
  padding: 18px 0;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 9px 0;
  color: #746d63;
  font-size: 13px;
}

.summary-row.total {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #dbd3c7;
  color: #1d1914;
  font-weight: 850;
}

.summary-row.total strong {
  color: var(--red);
  font-size: 25px;
}

.secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 13px 0 0;
  color: #8b847b;
  font-size: 11px;
}

.secure-note svg {
  width: 14px;
}

.order-success {
  max-width: 680px;
  margin: 70px auto 100px;
  padding: 48px;
  border: 1px solid #ded6ca;
  border-radius: var(--radius-xl);
  background: white;
  text-align: center;
  box-shadow: var(--shadow);
}

.success-icon {
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #e5f5eb;
  color: #267b4a;
  font-size: 35px;
}

.order-success h1 {
  margin: 0 0 10px;
}

.order-success p {
  color: #756d63;
}

.order-number {
  display: inline-block;
  margin: 10px 0 23px;
  padding: 10px 16px;
  border: 1px dashed #c8b986;
  border-radius: 9px;
  background: #fff9e9;
  color: #70541b;
  font-weight: 900;
}

/* Admin */
.admin-shell {
  min-height: calc(100vh - 116px);
}

.admin-login {
  min-height: 650px;
  display: grid;
  place-items: center;
  padding: 50px 20px;
}

.admin-login-card {
  width: min(430px, 100%);
  padding: 38px;
  border: 1px solid rgba(214, 169, 67, 0.25);
  border-radius: var(--radius-xl);
  color: white;
}

.admin-login-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.admin-login-brand img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  border-radius: 50%;
}

.admin-login-card h1 {
  margin: 0;
  font-size: 25px;
}

.admin-login-card p {
  margin: 5px 0 0;
  color: #89847d;
}

.admin-login-card .form-field label {
  color: #c9c3b9;
}

.admin-login-card .form-field input {
  border-color: #363638;
  background: #09090a;
  color: white;
}

.admin-login-card .button {
  width: 100%;
  margin-top: 15px;
}

.demo-credential {
  margin-top: 17px;
  padding: 11px;
  border: 1px dashed rgba(214, 169, 67, 0.3);
  border-radius: 9px;
  font-size: 11px;
  text-align: center;
}

.admin-layout {
  display: grid;
}

.admin-sidebar {
  position: sticky;
  display: flex;
  flex-direction: column;
}

.admin-sidebar-title {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-sidebar-title small {
  color: var(--gold);
}

.admin-sidebar-title strong {
  display: block;
  margin-top: 4px;
}

.admin-menu {
  display: flex;
  flex-direction: column;
}

.admin-menu button {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: start;
}

.admin-logout {
  margin-top: auto;
}

.admin-content {
  min-width: 0;
}

.admin-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 27px;
}

.admin-page-head h1 {
  margin: 0;
}

.admin-page-head p {
  margin: 4px 0 0;
}

.admin-actions {
  display: flex;
  gap: 8px;
}

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

.stat-card {
  padding: 22px;
  border: 1px solid #ddd6ca;
  border-radius: var(--radius-lg);
  background: white;
}

.stat-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-card-head span {
  color: #837b72;
  font-size: 12px;
  font-weight: 700;
}

.stat-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
}

.stat-card strong {
  display: block;
  margin-top: 14px;
  font-size: 29px;
}

.admin-grid {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 17px;
  margin-top: 18px;
}

.admin-panel {
  padding: 23px;
  border: 1px solid #ddd6ca;
  border-radius: var(--radius-lg);
  background: white;
}

.admin-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 17px;
}

.admin-panel-head h3 {
  margin: 0;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}

.admin-table th,
.admin-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #eee8df;
  text-align: start;
  font-size: 12px;
}

.admin-table th {
  color: #827a71;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.admin-table tbody tr:hover {
  background: #fbf8f3;
}

.table-product {
  display: flex;
  align-items: center;
  gap: 9px;
}

.table-product img {
  width: 38px;
  height: 45px;
  object-fit: contain;
  padding: 2px;
  border-radius: 6px;
  background: #ece5da;
}

.table-product strong,
.table-product small {
  display: block;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-product small {
  color: #8d857c;
}

.status-badge {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 999px;
  background: #eeeae3;
  color: #59534c;
  font-size: 10px;
  font-weight: 800;
}

.status-badge.new { background: #e8f0ff; color: #2d5d9e; }
.status-badge.processing { background: #fff3d7; color: #8a6114; }
.status-badge.shipping { background: #eee4ff; color: #6840a3; }
.status-badge.done { background: #e2f4e9; color: #287748; }
.status-badge.cancelled { background: #fce4e5; color: #a52a2f; }

.row-actions {
  display: flex;
  gap: 5px;
}

.row-action {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid #d7cfc3;
  border-radius: 8px;
  background: white;
  cursor: pointer;
}

.row-action:hover {
  border-color: var(--gold-dark);
  color: var(--gold-dark);
}

.row-action.danger:hover {
  border-color: var(--red);
  color: var(--red);
}

.row-action svg {
  width: 14px;
}

.low-stock-list {
  display: flex;
  flex-direction: column;
}

.low-stock-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid #eee8df;
}

.low-stock-item img {
  width: 36px;
  height: 43px;
  object-fit: contain;
  padding: 2px;
  border-radius: 6px;
  background: #ede6db;
}

.low-stock-item div {
  min-width: 0;
  flex: 1;
}

.low-stock-item strong,
.low-stock-item small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.low-stock-item strong {
  font-size: 11px;
}

.low-stock-item small {
  color: var(--red);
  font-size: 10px;
}

.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 17px;
}

.admin-search {
  position: relative;
  width: min(340px, 100%);
}

.admin-search input {
  width: 100%;
  height: 42px;
  padding: 8px 13px;
  border: 1px solid #d6cec2;
  border-radius: 10px;
  background: white;
}

.order-status-select {
  height: 34px;
  padding: 4px 7px;
  border: 1px solid #d6cec2;
  border-radius: 8px;
  background: white;
  font-size: 11px;
}

.admin-product-form {
  width: min(850px, 100%);
  padding: 31px;
  background: #faf7f1;
  border-radius: var(--radius-xl);
}

.admin-product-form h2 {
  margin: 0 0 23px;
}

.image-upload {
  min-height: 140px;
  display: grid;
  grid-template-columns: 115px 1fr;
  align-items: center;
  gap: 17px;
  padding: 16px;
  border: 1px dashed #c8bdad;
  border-radius: 12px;
  background: #f4efe7;
}

.image-upload-preview {
  width: 115px;
  height: 125px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: #e5ddd1;
}

.image-upload-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.image-upload input {
  height: auto;
  border: 0;
  background: transparent;
}

.image-upload small {
  display: block;
  margin-top: 7px;
  color: #8d857c;
}

.checkbox-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 47px;
}

.checkbox-field input {
  width: 17px;
  height: 17px;
}

.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.settings-card {
  padding: 25px;
  border: 1px solid #ddd6ca;
  border-radius: var(--radius-lg);
  background: white;
}

.settings-card h3 {
  margin: 0 0 19px;
}

.settings-card .form-field + .form-field {
  margin-top: 14px;
}

/* Footer and utilities */

.footer-main {
  display: grid;
  padding: 58px 0 44px;
}

.footer-brand {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.footer-brand img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  border-radius: 50%;
}

.footer-brand h3 {
  margin: 5px 0 6px;
  color: var(--gold-light);
  font-size: 25px;
  letter-spacing: 0.08em;
}

.footer-brand p {
  max-width: 290px;
  margin: 0;
  color: #918c84;
  font-size: 12px;
  line-height: 1.8;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-column h4 {
  margin: 0 0 10px;
  color: var(--gold-light);
  font-size: 13px;
}

.footer-column a {
  width: fit-content;
  color: #9b968e;
  font-size: 12px;
  transition: color 160ms ease;
}

.social-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.social-row a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 900;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 11px;
}

.toast-region {
  position: fixed;
  z-index: 500;
  inset-inline-end: 22px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.toast {
  min-width: 270px;
  max-width: 380px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border: 1px solid rgba(214, 169, 67, 0.34);
  border-radius: 11px;
  color: white;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.26);
  animation: toastIn 200ms ease;
}

.toast::before {
  content: "✓";
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
}

.toast.error::before {
  content: "!";
  background: var(--red);
  color: white;
}

@keyframes toastIn {
  from { transform: translateY(12px); opacity: 0; }
}

.hidden {
  display: none !important;
}

/* Responsive */
@media (max-width: 1080px) {

  .brand-copy {
    display: none;
  }

  .benefits-grid,
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-column {
    grid-column: 2 / -1;
  }
}

@media (max-width: 840px) {

  .announcement-inner > span:first-child {
    max-width: 63%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-main {
    grid-template-columns: auto 1fr auto;
  }

  .mobile-menu-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
  }

  .brand {
    justify-self: center;
  }

  .desktop-nav,
  .account-button,
  .cart-button > span,
  .search-toggle {
    display: none;
  }

  .cart-button svg {
    margin: auto;
  }

  .cart-button b {
    position: absolute;
  }

  .mobile-nav {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    display: grid;
    grid-template-rows: repeat(7, 0fr);
    visibility: hidden;
    overflow: hidden;
    padding: 0 20px;
    opacity: 0;
    transition: 180ms ease;
  }

  .mobile-nav.open {
    grid-template-rows: repeat(7, 1fr);
    visibility: visible;
    padding-block: 8px;
    opacity: 1;
  }

  .mobile-nav a {
    overflow: hidden;
  }

  .hero-inner {
    align-content: center;
    text-align: center;
  }

  .hero-copy {
    z-index: 2;
  }

  .hero-pill {
    margin-inline: auto;
  }

  .hero h1,
  .hero-description {
    margin-inline: auto;
  }

  .hero-actions,
  .hero-trust {
    justify-content: center;
  }

  .shipping-grid {
    grid-template-columns: 1fr;
  }

  .shipping-card + .shipping-card {
    border-inline-start: 0;
    border-top: 1px solid #e8e2d7;
  }

  .filters-panel {
    position: fixed;
    z-index: 210;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: min(330px, 88%);
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform 200ms ease;
  }

  [dir="rtl"] .filters-panel {
    transform: translateX(105%);
  }

  .filters-panel.open {
    transform: translateX(0);
  }

  .mobile-filter-button {
    display: inline-flex;
  }

  .about-intro,
  .faq-layout,
  .contact-layout,
  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .about-visual {
    min-height: 420px;
  }

  .faq-aside,
  .checkout-summary {
    position: static;
  }

  .admin-sidebar-title {
    text-align: center;
  }

  .admin-sidebar-title small,
  .admin-sidebar-title strong,
  .admin-menu button span {
    display: none;
  }

  .admin-grid {
    grid-template-columns: 1fr;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .product-modal {
    grid-template-columns: 1fr;
  }

  .product-modal-media {
    min-height: 320px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  [dir="rtl"] .product-modal-media {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .product-modal-media img {
    max-height: 270px;
  }
}

@media (max-width: 620px) {

  .announcement-inner {
    font-size: 10px;
  }

  .announcement-meta > span:last-child,
  .announcement-divider {
    display: none;
  }

  .hero-actions {
    flex-direction: column;
  }

  .section-head:not(.center) {
    align-items: flex-start;
    flex-direction: column;
  }

  .categories-grid,
  .products-grid,
  .shop-main .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }

  .product-meta {
    display: block;
  }

  .product-stock {
    display: none;
  }

  .product-old-price {
    font-size: 10px;
  }

  .product-quick-add {
    transform: none;
  }

  .collection-banner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .collection-mark {
    margin-top: 20px;
  }

  .benefits-grid,
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .about-points,
  .form-grid,
  .payment-options {
    grid-template-columns: 1fr;
  }

  .about-visual {
    min-height: 330px;
  }

  .shop-toolbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .shop-sort label {
    display: none;
  }

  .shop-sort select {
    min-width: 130px;
  }

  .contact-form,
  .checkout-card,
  .checkout-summary {
    padding: 23px 18px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .contact-column {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
  }

  .modal-layer {
    padding: 10px;
  }

  .modal-card {
    max-height: calc(100vh - 20px);
  }

  .product-modal-content {
    padding: 35px 21px 27px;
  }

  .product-specs {
    grid-template-columns: 1fr;
  }

  .admin-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-product-form {
    padding: 24px 17px;
  }

  .image-upload {
    grid-template-columns: 1fr;
  }

  .toast-region {
    inset-inline: 12px;
    bottom: 12px;
  }

  .toast {
    min-width: 0;
    width: 100%;
  }
}

/* Rarity foil system: compositor-friendly shine and motion */
.foil-card {
  --foil-sheen: linear-gradient(105deg, transparent 22%, rgba(255, 255, 255, 0.08) 36%, rgba(255, 255, 255, 0.68) 48%, rgba(255, 255, 255, 0.1) 59%, transparent 74%);
  position: relative;
  isolation: isolate;
  contain: paint;
}

.foil-ultra {
  --foil-sheen: linear-gradient(105deg, transparent 20%, rgba(209, 157, 45, 0.08) 32%, rgba(255, 238, 164, 0.84) 46%, rgba(199, 42, 54, 0.16) 56%, transparent 72%);
}

.foil-secret {
  --foil-sheen: linear-gradient(105deg, transparent 18%, rgba(105, 220, 255, 0.18) 31%, rgba(255, 132, 212, 0.63) 41%, rgba(255, 246, 179, 0.86) 49%, rgba(134, 255, 206, 0.55) 57%, rgba(125, 156, 255, 0.2) 66%, transparent 80%);
}

.foil-super {
  --foil-sheen: linear-gradient(105deg, transparent 21%, rgba(136, 194, 255, 0.12) 35%, rgba(238, 249, 255, 0.74) 48%, rgba(169, 215, 255, 0.2) 59%, transparent 75%);
}

.foil-rare {
  --foil-sheen: linear-gradient(105deg, transparent 23%, rgba(196, 207, 222, 0.12) 37%, rgba(255, 255, 255, 0.72) 48%, rgba(184, 197, 216, 0.16) 58%, transparent 73%);
}

.foil-card::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: -55%;
  bottom: -55%;
  left: -82%;
  width: 55%;
  pointer-events: none;
  opacity: 0;
  background: var(--foil-sheen);
  transform: translate3d(-165%, 0, 0) rotate(8deg);
}

.showcase-card.foil-card {
  contain: layout paint;
  backface-visibility: hidden;
  will-change: transform;
}

.showcase-card.foil-card::before {
  animation: acsFoilSweep 6.2s cubic-bezier(0.22, 0.72, 0.24, 1) infinite;
  will-change: transform, opacity;
}

.showcase-card-2.foil-card::before {
  animation-delay: -2.1s;
}

.showcase-card-3.foil-card::before {
  animation-delay: -4.2s;
}

.showcase-card img {
  backface-visibility: hidden;
  transform: translateZ(0);
}

.showcase-card.foil-card img {
  position: relative;
  z-index: 1;
  filter: saturate(1.04) contrast(1.02);
}

.showcase-card.foil-card span {
  z-index: 4;
}

.showcase-card-1 img {
  animation: acsHeroCardIn 650ms cubic-bezier(0.2, 0.75, 0.2, 1) both, acsHeroBreathe 5.8s 900ms ease-in-out infinite;
}

.showcase-card-2 img,
.showcase-card-3 img {
  animation: acsHeroCardIn 760ms 90ms cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

.product-card {
  content-visibility: auto;
  contain-intrinsic-size: 0 520px;
}

.products-grid .product-card {
  animation: acsProductEnter 460ms cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.products-grid .product-card:nth-child(2) { animation-delay: 35ms; }
.products-grid .product-card:nth-child(3) { animation-delay: 70ms; }
.products-grid .product-card:nth-child(4) { animation-delay: 105ms; }
.products-grid .product-card:nth-child(5) { animation-delay: 140ms; }
.products-grid .product-card:nth-child(6) { animation-delay: 175ms; }

.product-media.foil-card::before,
.modal-card-foil.foil-card::before {
  z-index: 3;
}

.product-card:hover .product-media.foil-card::before,
.product-media.foil-card:focus-within::before,
.modal-card-foil.foil-card::before {
  animation: acsFoilQuick 1.15s cubic-bezier(0.2, 0.7, 0.22, 1) both;
}

.hero-showcase.motion-paused .showcase-card::before,
.hero-showcase.motion-paused .showcase-card img {
  animation-play-state: paused;
}

.product-media.foil-card .product-badges,
.product-media.foil-card .product-quick-add {
  z-index: 5;
}

.modal-card-foil {
  position: relative;
  display: grid;
  width: min(100%, 370px);
  place-items: center;
  overflow: hidden;
  border-radius: 13px;
  isolation: isolate;
  contain: paint;
}

.modal-card-foil img {
  position: relative;
  z-index: 1;
}

@keyframes acsFoilSweep {
  0%, 69% { opacity: 0; transform: translate3d(-165%, 0, 0) rotate(8deg); }
  73% { opacity: 0.7; }
  88% { opacity: 0.46; }
  94%, 100% { opacity: 0; transform: translate3d(510%, 0, 0) rotate(8deg); }
}

@keyframes acsFoilQuick {
  0% { opacity: 0; transform: translate3d(-165%, 0, 0) rotate(8deg); }
  28% { opacity: 0.75; }
  100% { opacity: 0; transform: translate3d(510%, 0, 0) rotate(8deg); }
}

@keyframes acsHeroCardIn {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.97); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes acsHeroBreathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -4px, 0) scale(1.008); }
}

@keyframes acsProductEnter {
  from { opacity: 0; transform: translate3d(0, 13px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (hover: none), (update: slow) {
  .product-card:hover .product-media.foil-card::before,
  .product-media.foil-card:focus-within::before {
    animation: none;
  }

}

@media (prefers-reduced-motion: reduce) {
  .showcase-card.foil-card::before,
  .product-media.foil-card::before,
  .modal-card-foil.foil-card::before,
  .showcase-card img,
  .products-grid .product-card {
    animation: none !important;
  }

  .foil-card::before {
    display: none;
  }
}

/* Product pages, community and advanced operations */
.product-detail-page {
  background: #f5f6f8;
}

.product-detail-hero {
  padding: 42px 0 70px;
}

.product-detail-hero .breadcrumb a,
.product-detail-hero .breadcrumb {
  color: #9096a0;
}

.product-detail-layout {
  display: grid;
  grid-template-columns: minmax(360px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}

.product-detail-gallery {
  position: sticky;
  top: calc(var(--header-height) + 20px);
}

.product-detail-main {
  position: relative;
  display: grid;
  min-height: 560px;
  padding: 38px;
  overflow: hidden;
  place-items: center;
}

.product-detail-main > img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 500px;
  object-fit: contain;
  filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.45));
}

.product-detail-thumbs {
  display: flex;
  gap: 9px;
  margin-top: 12px;
  overflow-x: auto;
}

.product-detail-thumbs button {
  flex: 0 0 62px;
  height: 78px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid #30353d;
  border-radius: 9px;
  background: #101319;
  opacity: 0.55;
  cursor: pointer;
}

.product-detail-thumbs button.active {
  border-color: #d9b96f;
  opacity: 1;
}

.product-detail-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-detail-copy {
  padding-top: 22px;
}

.product-detail-copy h1 {
  max-width: 850px;
  margin: 18px 0 12px;
}

.product-rating-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.rating-stars {
  display: inline-flex;
  direction: ltr;
  gap: 2px;
}

.rating-stars i {
  color: #4a4f58;
  font-style: normal;
}

.rating-stars i.filled {
  color: #d8b969;
}

.product-detail-price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 20px 0;
}

.product-detail-price strong {
  font-size: 42px;
}

.product-detail-price del {
  color: #727985;
  font-size: 17px;
}

.product-detail-copy .product-description {
  max-width: 720px;
  font-size: 15px;
  line-height: 1.9;
}

.product-detail-copy .product-spec {
  border-color: #30353d;
}

.product-page-actions {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  gap: 10px;
  margin-top: 24px;
}

.product-page-actions .button svg {
  width: 19px;
}

.product-page-actions .button.active {
  border-color: #a82731;
  color: #f45a67;
}

.product-insight-section {
  padding-bottom: 24px;
}

.product-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.5fr);
  gap: 16px;
}

.price-history-card,
.review-summary-card,
.review-form {
  padding: 27px;
  border: 1px solid #dfe3e8;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(20, 23, 29, 0.05);
}

.section-head.compact {
  padding-bottom: 0;
}

.section-head.compact h2 {
  margin: 4px 0 0;
}

.price-chart {
  height: 190px;
  margin-top: 20px;
}

.price-chart svg {
  width: 100%;
  height: 150px;
  overflow: visible;
}

.price-chart-labels {
  display: flex;
  justify-content: space-between;
  color: #8a9099;
  font-size: 11px;
}

.price-chart-labels b {
  color: #a82731;
}

.review-summary-card {
  display: grid;
  place-content: center;
  text-align: center;
}

.review-score {
  color: #171a20;
  font-size: 58px;
  font-weight: 900;
  line-height: 1;
}

.review-summary-card .rating-stars {
  margin: 10px auto;
  font-size: 20px;
}

.reviews-section {
  padding-top: 32px;
}

.reviews-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 24px;
  align-items: start;
}

.reviews-list {
  display: grid;
  gap: 11px;
}

.review-card {
  padding: 22px;
  border: 1px solid #dfe3e8;
  border-radius: 15px;
  background: #fff;
}

.review-card-top,
.review-card-top > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #e7f4eb;
  color: #287748;
  font-size: 9px;
  font-weight: 800;
}

.verified-badge svg {
  width: 13px;
}

.review-card h3 {
  margin: 15px 0 6px;
}

.review-card p {
  color: #5f6570;
  line-height: 1.75;
}

.review-card > small {
  color: #9298a1;
}

.review-form {
  position: sticky;
  top: calc(var(--header-height) + 18px);
}

.review-form h3 {
  margin-top: 0;
}

.review-form > .button {
  width: 100%;
}

.review-rating-input {
  display: flex;
  direction: rtl;
  justify-content: flex-end;
  margin: 10px 0 18px;
}

.review-rating-input input {
  position: absolute;
  opacity: 0;
}

.review-rating-input span {
  color: #d1d4d9;
  font-size: 31px;
  cursor: pointer;
}

.review-rating-input label:hover span,
.review-rating-input label:hover ~ label span,
.review-rating-input input:checked ~ span,
.review-rating-input label:has(input:checked) ~ label span {
  color: #d8b969;
}

.review-eligibility {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 18px;
  border: 1px solid #dddfe4;
  border-radius: 13px;
  background: #fff;
  color: #767c85;
}

.review-eligibility svg {
  width: 18px;
}

.product-page-loading {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 60px;
  min-height: 720px;
  padding: 80px max(24px, calc((100% - var(--container)) / 2));
  background: #0d1015;
}

.loading-card,
.loading-copy {
  border-radius: 22px;
  background: linear-gradient(100deg, #171a20 30%, #232832 50%, #171a20 70%);
  background-size: 240% 100%;
  animation: loadingSweep 1.4s infinite;
}

@keyframes loadingSweep {
  to { background-position: -200% 0; }
}

.home-community-grid {
  display: grid;
}

.home-community-card {
  position: relative;
  display: block;
  overflow: hidden;
}

.home-community-card::after {
  position: absolute;
  width: 300px;
  height: 300px;
  top: -140px;
  inset-inline-end: -100px;
  border-radius: 50%;
  background: #c6323e;
  filter: blur(70px);
  opacity: 0.25;
}

.deck-studio-card::after {
  background: #d9b96f;
}

.academy-home-card::after {
  background: #4d76d7;
}

@media (max-width: 1080px) {

  .academy-home-card {
    grid-column: 1 / -1;
  }
}

.home-community-card h2 {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 12px 0;
  font-size: clamp(28px, 4vw, 46px);
}

.home-community-card p {
  position: relative;
  z-index: 1;
  max-width: 520px;
  line-height: 1.8;
}

.home-community-card .button {
  position: relative;
  z-index: 1;
  margin-top: 15px;
}

.events-grid {
  display: grid;
  gap: 17px;
}

.event-card {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #dde1e6;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(20, 23, 29, 0.07);
}

.event-date {
  display: grid;
  place-content: center;
  text-align: center;
}

.event-date strong {
  font-size: 46px;
  line-height: 1;
}

.event-date span {
  margin-top: 7px;
  font-weight: 800;
  text-transform: uppercase;
}

.event-card-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 24px;
  padding: 30px;
}

.event-card-content h2,
.event-card-content p,
.event-card-content .event-meta,
.event-card-content .eyebrow {
  grid-column: 1;
}

.event-card-content h2 {
  margin: 4px 0;
  font-size: 30px;
}

.event-card-content p {
  max-width: 700px;
  color: #747a84;
}

.event-card-content time {
  grid-column: 2;
  grid-row: 2;
  color: #676e78;
  font-size: 12px;
  font-weight: 700;
}

.event-card-content > .button {
  grid-column: 2;
  grid-row: 3 / 5;
  align-self: center;
}

.event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 10px;
}

.event-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #555c67;
  font-size: 11px;
}

.event-meta svg {
  width: 16px;
  color: #a82731;
}

.event-registration-form,
.event-registrations-modal {
  position: relative;
  padding: 38px;
}

.event-registration-form > .button {
  width: 100%;
  margin-top: 18px;
}

.custom-deck-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1.25fr);
  gap: 18px;
  align-items: start;
}

.custom-deck-aside,
.custom-deck-form {
  padding: clamp(28px, 4vw, 45px);
  border-radius: 22px;
}

.custom-deck-aside {
  position: sticky;
  top: calc(var(--header-height) + 18px);
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 0, rgba(217, 185, 111, 0.17), transparent 35%),
    #12151b;
  color: #fff;
}

.custom-deck-aside h2 {
  margin: 12px 0;
  font-size: 40px;
}

.custom-deck-aside p {
  color: #9da3ad;
  line-height: 1.8;
}

.custom-process {
  display: grid;
  gap: 8px;
  margin-top: 30px;
}

.custom-process > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid #2d323a;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
}

.custom-process b {
  color: #d9b96f;
}

.custom-deck-form {
  border: 1px solid #dde1e6;
  background: #fff;
  box-shadow: 0 18px 48px rgba(20, 23, 29, 0.06);
}

.custom-deck-form > .button {
  width: 100%;
  margin-top: 18px;
}

.account-custom-requests {
  margin-top: 38px;
  padding-top: 30px;
  border-top: 1px solid #e2ddd5;
}

.account-custom-list {
  display: grid;
  gap: 8px;
}

.account-custom-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid #e0e3e7;
  border-radius: 12px;
}

.account-custom-list small {
  display: block;
  margin-top: 3px;
  color: #8a9099;
}

.community-admin-grid,
.audit-admin-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
}

.admin-events-list {
  display: grid;
  gap: 9px;
}

.admin-event-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 15px;
  border: 1px solid #e0e3e7;
  border-radius: 12px;
}

.admin-event-card h3 {
  margin: 4px 0;
}

.admin-event-card p,
.admin-event-card small {
  margin: 0;
  color: #7f858e;
}

.custom-request-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 18px 0;
}

.custom-request-summary > div {
  padding: 12px;
  border: 1px solid #e0e3e7;
  border-radius: 10px;
}

.custom-request-summary small,
.custom-request-summary strong {
  display: block;
}

.readonly-note {
  padding: 13px;
  border-radius: 10px;
  background: #f1f3f5;
  white-space: pre-wrap;
}

.reports-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.report-wide {
  grid-column: 1 / -1;
}

.report-chart {
  display: flex;
  height: 240px;
  align-items: flex-end;
  gap: 5px;
  padding-top: 20px;
  overflow-x: auto;
}

.report-bar {
  display: grid;
  flex: 1 0 20px;
  height: 100%;
  align-items: end;
  gap: 5px;
}

.report-bar i {
  display: block;
  min-height: 4px;
  border-radius: 5px 5px 2px 2px;
}

.report-bar span {
  font-size: 8px;
  transform: rotate(-50deg);
}

.report-regions {
  display: grid;
  gap: 8px;
}

.report-region {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  padding: 13px;
  border: 1px solid #e1e4e8;
  border-radius: 10px;
}

.report-region small {
  grid-column: 1 / -1;
  color: #8a9099;
}

.report-product {
  display: grid;
  grid-template-columns: 28px 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  border-bottom: 1px solid #eceef1;
}

.report-product > b {
  font-size: 11px;
}

.report-product img {
  width: 44px;
  height: 58px;
  border-radius: 5px;
  object-fit: cover;
}

.report-product small {
  display: block;
  color: #8a9099;
}

.report-product > span {
  font-weight: 800;
}

.status-badge.reviewing,
.status-badge.quoted,
.status-badge.building,
.status-badge.ready,
.status-badge.approved {
  background: #e7eefb;
  color: #355f96;
}

.status-badge.closed {
  background: #e7f4eb;
  color: #287748;
}

@media (max-width: 1120px) {

  .product-detail-layout {
    grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1.25fr);
    gap: 34px;
  }

  .community-admin-grid,
  .audit-admin-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .product-detail-layout,
  .product-insight-grid,
  .reviews-layout,
  .home-community-grid,
  .custom-deck-layout,
  .reports-layout {
    grid-template-columns: 1fr;
  }

  .product-detail-gallery,
  .review-form,
  .custom-deck-aside {
    position: static;
  }

  .product-detail-main {
    min-height: 470px;
  }

  .product-detail-main > img {
    height: 420px;
  }

  .event-card-content {
    grid-template-columns: 1fr;
  }

  .event-card-content time,
  .event-card-content > .button {
    grid-column: 1;
    grid-row: auto;
  }

  .report-wide {
    grid-column: auto;
  }

}

@media (max-width: 620px) {
  .product-detail-hero {
    padding: 28px 0 48px;
  }

  .product-detail-main {
    min-height: 410px;
    padding: 18px;
  }

  .product-detail-main > img {
    height: 380px;
  }

  .product-detail-price strong {
    font-size: 34px;
  }

  .product-page-actions {
    grid-template-columns: auto 1fr;
  }

  .product-page-actions .button:last-child {
    grid-column: 1 / -1;
  }

  .price-history-card,
  .review-summary-card,
  .review-form {
    padding: 20px;
  }

  .review-card-top,
  .review-card-top > div {
    align-items: flex-start;
    flex-direction: column;
  }

  .event-card {
    grid-template-columns: 1fr;
  }

  .event-date {
    min-height: 100px;
  }

  .event-card-content {
    padding: 22px;
  }

  .custom-deck-aside,
  .custom-deck-form,
  .event-registration-form,
  .event-registrations-modal {
    padding: 25px 19px;
  }

  .account-custom-list article,
  .custom-request-summary,
  .ydk-optimizer-controls,
  .ydk-summary {
    grid-template-columns: 1fr;
  }

  .account-custom-list article {
    align-items: start;
  }

  .report-chart {
    height: 190px;
  }
}

/* Customer account */
.account-section {
  min-height: 560px;
  padding: 70px 0 95px;
}

.account-auth-layout {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 18px;
  align-items: stretch;
}

.account-auth-card {
  padding: 34px;
  border: 1px solid #dfe2e6;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 55px rgba(20, 23, 29, 0.07);
}

.account-auth-card h2 {
  margin: 8px 0 5px;
  font-size: 27px;
}

.account-auth-card > p {
  margin: 0 0 23px;
  color: #7a808a;
}

.account-auth-card > .form-field + .form-field {
  margin-top: 15px;
}

.account-auth-card > .button {
  width: 100%;
  margin-top: 20px;
}

.account-login-card {
  border-color: rgba(234, 216, 173, 0.14);
  background:
    radial-gradient(circle at 85% 0, rgba(200, 50, 60, 0.14), transparent 32%),
    #101319;
  color: #fff;
}

.account-login-card h2 {
  color: #f5f5f4;
}

.account-login-card > p {
  color: #878d96;
}

.account-login-card .form-field label {
  color: #bdc1c8;
}

.account-login-card .form-field input {
  border-color: #30343c;
  background: #0b0d11;
  color: #fff;
}

.account-register-card .button-primary {
  background: #171a20;
  color: #fff;
}

.account-guest-note {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: #858b94;
  font-size: 11px;
  text-align: center;
}

.account-dashboard {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 20px;
  align-items: start;
}

.account-profile-card {
  position: sticky;
  top: calc(var(--header-height) + 22px);
  padding: 28px;
  border: 1px solid rgba(234, 216, 173, 0.14);
  border-radius: 19px;
  background:
    radial-gradient(circle at 90% 0, rgba(197, 161, 95, 0.12), transparent 32%),
    #11141a;
  color: #fff;
  box-shadow: 0 22px 55px rgba(20, 23, 29, 0.13);
}

.account-avatar {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border: 1px solid rgba(234, 216, 173, 0.28);
  border-radius: 17px;
  background: rgba(197, 161, 95, 0.09);
  color: var(--gold-light);
  font-size: 25px;
  font-weight: 900;
}

.account-profile-card h2 {
  margin: 7px 0 7px;
  color: #f5f5f4;
  font-size: 23px;
}

.account-profile-card > p {
  margin: 0 0 23px;
  color: #858b95;
  font-size: 12px;
  line-height: 1.7;
}

.account-detail {
  padding: 13px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.account-detail small,
.account-detail strong {
  display: block;
}

.account-detail small {
  color: #6f7580;
  font-size: 9px;
}

.account-detail strong {
  overflow: hidden;
  margin-top: 3px;
  color: #d8dbe0;
  font-size: 12px;
  text-overflow: ellipsis;
}

.account-profile-card > .button {
  width: 100%;
  margin-top: 16px;
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.04);
  color: #e2e4e7;
}

.account-orders-panel {
  min-width: 0;
  padding: 27px;
  border: 1px solid #dfe2e6;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 14px 45px rgba(20, 23, 29, 0.05);
}

.account-orders-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 19px;
}

.account-orders-head h2 {
  margin: 6px 0 2px;
  font-size: 26px;
}

.account-orders-head p {
  margin: 0;
  color: #858b94;
  font-size: 11px;
}

.account-orders-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.account-order-card {
  padding: 16px;
  border: 1px solid #e0e3e7;
  border-radius: 13px;
  background: #fafbfc;
}

.account-order-top,
.account-order-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.account-order-top > div strong,
.account-order-top > div small {
  display: block;
}

.account-order-top > div strong {
  color: #252932;
  font-size: 12px;
}

.account-order-top > div small {
  margin-top: 2px;
  color: #92979f;
  font-size: 9px;
}

.account-order-products {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 13px 0;
  padding: 12px 0;
  border-block: 1px solid #e7e9ed;
}

.account-order-products > div {
  position: relative;
  width: 43px;
  height: 56px;
  padding: 2px;
  border-radius: 6px;
  background: #e6e8ec;
}

.account-order-products img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.account-order-products > div span {
  position: absolute;
  inset-inline-end: -4px;
  bottom: -4px;
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #20242b;
  color: #fff;
  font-size: 7px;
  font-weight: 850;
}

.account-order-products > b {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eceef1;
  color: #666c76;
  font-size: 9px;
}

.account-order-bottom {
  justify-content: flex-start;
  color: #777d87;
  font-size: 10px;
}

.account-order-bottom strong {
  margin-inline-end: auto;
  color: #1f232b;
  font-size: 15px;
}

.footer-admin-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  font-size: 9px;
  transition: 160ms ease;
}

.footer-admin-link:hover {
  border-color: rgba(234, 216, 173, 0.22);
  color: var(--gold-light);
}

@media (max-width: 840px) {
  .account-auth-layout,
  .account-dashboard {
    grid-template-columns: 1fr;
  }

  .account-profile-card {
    position: static;
  }
}

@media (max-width: 620px) {
  .account-section {
    padding: 50px 0 70px;
  }

  .account-auth-card,
  .account-orders-panel {
    padding: 22px 17px;
  }

  .account-register-card .form-grid {
    grid-template-columns: 1fr;
  }

  .account-orders-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .account-orders-head .button {
    width: 100%;
  }

  .footer-bottom {
    padding-block: 14px;
  }
}

/* YGOPRODeck admin importer */
.ygo-import-modal {
  width: min(1120px, 100%);
}

.ygo-importer {
  position: relative;
  padding: 34px;
}

.ygo-import-head {
  display: flex;
  align-items: center;
  gap: 17px;
  padding-inline-end: 50px;
}

.ygo-import-head h2 {
  margin: 5px 0 5px;
  color: #171a20;
  font-size: 28px;
}

.ygo-import-head p {
  margin: 0;
  color: #777d87;
}

.ygo-api-mark {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(234, 216, 173, 0.28);
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 25%, rgba(197, 161, 95, 0.21), transparent 48%),
    #12151a;
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.ygo-api-mark.small {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  font-size: 10px;
}

.ygo-search-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
  margin-top: 25px;
}

.ygo-search-form input {
  min-width: 0;
  height: 50px;
  padding: 10px 15px;
  border: 1px solid #d8dbe0;
  border-radius: 11px;
  outline: 0;
  background: #fff;
  color: #171a20;
}

.ygo-search-form input:focus {
  border-color: #95723a;
  box-shadow: 0 0 0 3px rgba(197, 161, 95, 0.12);
}

.ygo-search-form .button {
  min-width: 120px;
}

.ygo-api-note {
  margin: 8px 3px 0;
  color: #8a9099;
  font-size: 11px;
}

.ygo-import-body {
  min-height: 330px;
  margin-top: 23px;
  padding-top: 22px;
  border-top: 1px solid #e2e5e9;
}

.ygo-empty,
.ygo-loading {
  min-height: 285px;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 30px;
  text-align: center;
}

.ygo-empty > span:first-child {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border: 1px solid #d8dbe0;
  border-radius: 15px;
  background: #f0f2f5;
  color: #7c6337;
}

.ygo-empty > span svg {
  width: 25px;
}

.ygo-empty h3 {
  margin: 0 0 5px;
}

.ygo-empty p,
.ygo-loading p {
  max-width: 560px;
  margin: 0;
  color: #7d828b;
}

.ygo-empty.error > span:first-child {
  border-color: #e9b9bd;
  background: #fff0f1;
  color: var(--red);
  font-weight: 900;
}

.ygo-spinner {
  width: 15px;
  height: 15px;
  display: inline-block;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ygoSpin 0.7s linear infinite;
}

.ygo-spinner.large {
  width: 30px;
  height: 30px;
  border-color: rgba(200, 50, 60, 0.2);
  border-top-color: var(--red);
}

@keyframes ygoSpin {
  to { transform: rotate(360deg); }
}

.ygo-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 14px;
}

.ygo-results-head span {
  color: #898e97;
  font-size: 11px;
}

.ygo-results-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.ygo-result-card {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 11px;
  min-width: 0;
  padding: 11px;
  border: 1px solid #dfe2e6;
  border-radius: 13px;
  background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.ygo-result-card:hover {
  transform: translateY(-2px);
  border-color: #c9b381;
  box-shadow: 0 12px 28px rgba(20, 23, 29, 0.08);
}

.ygo-result-image {
  width: 70px;
  height: 98px;
  display: grid;
  place-items: center;
  overflow: hidden;
  grid-row: 1 / 3;
  border-radius: 8px;
  background: #e7e9ed;
}

.ygo-result-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ygo-result-image svg {
  width: 25px;
}

.ygo-result-copy {
  min-width: 0;
}

.ygo-result-copy h3 {
  overflow: hidden;
  margin: 6px 0 2px;
  color: #1b1e24;
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ygo-result-copy p,
.ygo-result-copy small {
  display: block;
  overflow: hidden;
  margin: 0;
  color: #7d828b;
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ygo-result-copy small {
  margin-top: 4px;
  color: #9a7a42;
  font-weight: 750;
}

.ygo-result-card > .button {
  min-height: 33px;
  grid-column: 2;
  padding: 5px 10px;
  font-size: 10px;
}

.ygo-frame {
  display: inline-flex;
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid #d7dbe0;
  border-radius: 999px;
  background: #eef0f3;
  color: #565c66;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ygo-frame-effect,
.ygo-frame-effect_pendulum { background: #f6e8d5; border-color: #dec095; color: #855c27; }
.ygo-frame-normal,
.ygo-frame-normal_pendulum { background: #f7efd7; border-color: #ddca8c; color: #80651c; }
.ygo-frame-ritual,
.ygo-frame-ritual_pendulum { background: #e1eef9; border-color: #9ebfdc; color: #356585; }
.ygo-frame-fusion,
.ygo-frame-fusion_pendulum { background: #eee4f6; border-color: #bca1d0; color: #6e488a; }
.ygo-frame-synchro,
.ygo-frame-synchro_pendulum { background: #f3f4f5; border-color: #bcc1c8; color: #4b5159; }
.ygo-frame-xyz,
.ygo-frame-xyz_pendulum { background: #292c32; border-color: #555c67; color: #f0f1f2; }
.ygo-frame-link { background: #e0e9f5; border-color: #94afd0; color: #315d91; }
.ygo-frame-spell { background: #dff1eb; border-color: #89bca9; color: #2b7560; }
.ygo-frame-trap { background: #f2dfeb; border-color: #c68db0; color: #833c68; }
.ygo-frame-token,
.ygo-frame-skill { background: #eee8df; border-color: #c5b49c; color: #66533a; }

.ygo-back {
  margin-bottom: 15px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8b2a32;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
}

.ygo-card-detail {
  display: grid;
  grid-template-columns: 255px 1fr;
  gap: 27px;
  align-items: start;
}

.ygo-card-preview {
  position: sticky;
  top: 0;
}

.ygo-selected-image {
  width: 100%;
  min-height: 340px;
  display: grid;
  place-items: center;
  padding: 13px;
  border: 1px solid #d8dbe0;
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 30%, rgba(197, 161, 95, 0.12), transparent 42%),
    #e9ebee;
}

.ygo-selected-image img {
  width: 100%;
  height: 100%;
  max-height: 365px;
  object-fit: contain;
  filter: drop-shadow(0 12px 14px rgba(16, 18, 22, 0.18));
}

.ygo-art-label {
  margin: 12px 0 7px;
  color: #696f79;
  font-size: 10px;
  font-weight: 800;
}

.ygo-artworks {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.ygo-artworks button {
  width: 48px;
  height: 67px;
  flex: 0 0 auto;
  overflow: hidden;
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 7px;
  background: #e4e6e9;
  cursor: pointer;
}

.ygo-artworks button.active {
  border-color: var(--red);
}

.ygo-artworks img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.ygo-card-info {
  min-width: 0;
}

.ygo-card-title h2 {
  margin: 8px 0 4px;
  color: #171a20;
  font-size: 27px;
}

.ygo-card-title p {
  margin: 0;
  color: #8a9099;
  font-size: 11px;
}

.ygo-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 17px;
}

.ygo-stats > div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid #e0e3e7;
  border-radius: 9px;
  background: #f4f5f7;
}

.ygo-stats small,
.ygo-stats strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ygo-stats small {
  color: #8b9099;
  font-size: 8px;
}

.ygo-stats strong {
  margin-top: 2px;
  color: #343842;
  font-size: 10px;
}

.ygo-description {
  max-height: 76px;
  overflow-y: auto;
  margin: 15px 0;
  padding: 12px;
  border-inline-start: 2px solid #ccb172;
  background: #f6f3ec;
  color: #646a73;
  font-size: 11px;
  line-height: 1.7;
}

.ygo-prints-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ygo-prints-head h3 {
  margin: 0;
  font-size: 15px;
}

.ygo-prints-head span {
  min-width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e9ebee;
  color: #555b64;
  font-size: 9px;
  font-weight: 850;
}

.ygo-prints {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid #dfe2e6;
  border-radius: 11px;
  background: #fff;
}

.ygo-print-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(100px, 0.7fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-bottom: 1px solid #eceef1;
}

.ygo-print-row:last-child {
  border-bottom: 0;
}

.ygo-print-row[hidden] {
  display: none;
}

.variant-empty {
  margin: 0;
  padding: 14px 12px;
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
}

.ygo-print-row > div {
  min-width: 0;
}

.ygo-print-row strong,
.ygo-print-row span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ygo-print-row strong {
  color: #343842;
  font-size: 10px;
}

.ygo-print-row div span {
  margin-top: 2px;
  color: #92969d;
  font-size: 8px;
}

.ygo-listed {
  padding: 4px 7px;
  border-radius: 999px;
  background: #e5f3e9;
  color: #2d7348;
  font-size: 8px;
  font-weight: 850;
}

.ygo-print-row .button {
  min-height: 32px;
  padding: 5px 9px;
  font-size: 9px;
}

.ygo-attribution {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 15px;
  font-size: 9px;
}

.ygo-attribution a {
  color: #7d6234;
  font-weight: 800;
}

.imported-source-banner {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: -7px 0 21px;
  padding: 11px 13px;
  border: 1px solid #d9cba9;
  border-radius: 11px;
  background: #f7f3e9;
}

.imported-source-banner div {
  min-width: 0;
}

.imported-source-banner strong,
.imported-source-banner small {
  display: block;
}

.imported-source-banner strong {
  color: #594722;
  font-size: 11px;
}

.imported-source-banner small {
  margin-top: 3px;
  color: #82775f;
  font-size: 9px;
  line-height: 1.5;
}

@media (max-width: 920px) {
  .ygo-results-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ygo-card-detail {
    grid-template-columns: 210px 1fr;
  }

  .ygo-print-row {
    grid-template-columns: minmax(150px, 1fr) minmax(95px, 0.7fr) auto;
  }

  .ygo-listed {
    display: none;
  }
}

@media (max-width: 620px) {
  .admin-actions {
    width: 100%;
  }

  .ygo-importer {
    padding: 25px 15px;
  }

  .ygo-import-head {
    align-items: flex-start;
    padding-inline-end: 35px;
  }

  .ygo-import-head .ygo-api-mark {
    display: none;
  }

  .ygo-import-head h2 {
    font-size: 22px;
  }

  .ygo-import-head p {
    font-size: 11px;
  }

  .ygo-search-form {
    grid-template-columns: 1fr;
  }

  .ygo-results-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .ygo-results-grid {
    grid-template-columns: 1fr;
  }

  .ygo-card-detail {
    grid-template-columns: 1fr;
  }

  .ygo-card-preview {
    position: static;
  }

  .ygo-selected-image {
    width: min(250px, 100%);
    min-height: 300px;
    margin-inline: auto;
  }

  .ygo-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ygo-print-row {
    grid-template-columns: 1fr auto;
  }

  .ygo-print-row > div:nth-child(2) {
    grid-column: 1;
  }

  .ygo-print-row .button {
    grid-column: 2;
    grid-row: 1 / 3;
  }
}

@media (max-width: 390px) {
  .categories-grid,
  .products-grid,
  .shop-main .products-grid {
    grid-template-columns: 1fr;
  }

}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   ACS VISUAL SYSTEM V2 — modern premium TCG storefront
   ========================================================= */
:root {
  --black: #08090c;
  --ink: #0d0f13;
  --white: #ffffff;
}

.brand-copy strong {
  font-size: 21px;
}

.brand-copy small {
  font-size: 7px;
}

.desktop-nav a::after {
  bottom: 16px;
  height: 1px;
  background: var(--gold-light);
}

.desktop-nav a:hover,
.desktop-nav a.active {
  color: #fff;
}

.icon-button,
.cart-button {
  border-color: rgba(255, 255, 255, 0.08);
}

.global-search {
  border-top-color: rgba(255, 255, 255, 0.05);
}

.section-dark::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
}

.section-dark .section-kicker,
.section-dark .eyebrow {
  color: var(--gold-light);
}

.section-title {
  margin-top: 10px;
}

.section-subtitle {
  line-height: 1.75;
}

.button-primary {
  background: #f5f1e8;
  color: #111318;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
}

.button-primary:hover {
  background: #fff;
}

.button-red {
  background: linear-gradient(135deg, #d63c46, #b72832);
  color: #fff;
  box-shadow: 0 12px 30px rgba(190, 43, 53, 0.2);
}

/* V2 hero */

.hero::after {
  inset-inline-end: -13%;
  bottom: -55%;
  width: 70%;
  border-color: rgba(197, 161, 95, 0.11);
  box-shadow:
    0 0 0 55px rgba(197, 161, 95, 0.018),
    0 0 0 110px rgba(197, 161, 95, 0.01);
}

.hero-inner {
  grid-template-columns: 1fr 0.92fr;
}

.hero-pill {
  padding: 8px 13px;
  border-color: rgba(234, 216, 173, 0.2);
  backdrop-filter: blur(10px);
}

.hero-pill i {
  width: 6px;
  height: 6px;
}

.hero h1 {
  max-width: 700px;
  margin: 27px 0 20px;
}

.hero-actions {
  margin-top: 34px;
}

.hero-actions .button-primary {
  background: linear-gradient(135deg, #d8404a, #b72832);
  color: #fff;
  box-shadow: 0 14px 35px rgba(190, 43, 53, 0.26);
}

.hero-actions .button-primary:hover {
  background: linear-gradient(135deg, #e34a54, #c12d38);
}

.hero-trust {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.trust-item {
  color: #a7abb2;
}

.trust-item svg {
  color: #cfb476;
}

.hero-visual {
  min-height: 580px;
}

.hero-logo-glow {
  width: 100%;
  background: radial-gradient(circle, rgba(197, 161, 95, 0.14), transparent 62%);
  filter: blur(24px);
}

.hero-showcase {
  position: relative;
  width: min(510px, 100%);
  height: 520px;
  perspective: 1200px;
}

.showcase-card {
  position: absolute;
  width: 235px;
  height: 330px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  transition: transform 280ms ease, border-color 280ms ease;
}

.showcase-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 5px;
}

.showcase-card span {
  position: absolute;
  inset-inline: 12px;
  bottom: 12px;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 10px;
  text-align: center;
}

.showcase-card-1 {
  z-index: 3;
  top: 79px;
  inset-inline-start: 136px;
  transform: rotate(-1deg) translateZ(30px);
}

.showcase-card-2 {
  z-index: 2;
  top: 107px;
  inset-inline-start: 30px;
  transform: rotate(-12deg);
  opacity: 0.78;
}

.showcase-card-3 {
  z-index: 1;
  top: 107px;
  inset-inline-end: 28px;
  transform: rotate(12deg);
  opacity: 0.78;
}

[dir="ltr"] .showcase-card-2 {
  transform: rotate(12deg);
}

[dir="ltr"] .showcase-card-3 {
  transform: rotate(-12deg);
}

.showcase-card-1:hover {
  transform: rotate(0) translateY(-9px) translateZ(30px);
  border-color: rgba(234, 216, 173, 0.68);
}

.showcase-card-2:hover {
  z-index: 4;
  opacity: 1;
  transform: rotate(-5deg) translateY(-8px);
}

.showcase-card-3:hover {
  z-index: 4;
  opacity: 1;
  transform: rotate(5deg) translateY(-8px);
}

/* Delivery information */

.shipping-card {
  min-height: 78px;
}

.shipping-card + .shipping-card {
  border-color: rgba(255, 255, 255, 0.07);
}

/* Categories */

.category-card {
  border-color: rgba(255, 255, 255, 0.07);
}

.category-card:hover {
  border-color: rgba(234, 216, 173, 0.34);
}

.category-card::before {
  background:
    linear-gradient(to top, rgba(11, 13, 17, 0.98) 8%, rgba(11, 13, 17, 0.5) 62%, rgba(11, 13, 17, 0.2)),
    radial-gradient(circle at 75% 15%, var(--category-color, #6b4b18), #111318 63%);
}

.category-card::after {
  top: -36px;
  inset-inline-end: -40px;
  border: 1px solid rgba(234, 216, 173, 0.11);
  transform: none;
  box-shadow:
    0 0 0 26px rgba(234, 216, 173, 0.025),
    0 0 0 52px rgba(234, 216, 173, 0.014);
}

[dir="ltr"] .category-card::after {
  transform: none;
}

.category-card .category-icon {
  top: 19px;
  inset-inline-start: 18px;
  border-color: rgba(234, 216, 173, 0.22);
}

/* Products */

.product-media::after {
  opacity: 0.4;
  background-image:
    linear-gradient(rgba(67, 72, 82, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 72, 82, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

.product-badges {
  top: 11px;
  inset-inline-start: 11px;
}

.badge {
  padding: 5px 9px;
  background: #16191f;
}

.product-quick-add {
  inset-inline-end: 12px;
  bottom: 12px;
  border-radius: 11px;
}

.product-meta {
  color: #8a9099;
}

.product-name {
  margin-top: 7px;
}

.product-price-row {
  border-top-color: #eceef1;
}

.product-old-price {
  color: #9da1a8;
}

/* Promotional banner */
.collection-banner {
  border-color: rgba(234, 216, 173, 0.14);
}

.collection-banner::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0 65%, rgba(255, 255, 255, 0.04) 65.2%, transparent 65.4%),
    linear-gradient(60deg, transparent 0 70%, rgba(197, 161, 95, 0.05) 70.2%, transparent 70.4%);
  background-size: 140px 140px;
}

.collection-banner::after {
  bottom: -75px;
  font-size: 220px;
}

.collection-copy h2 {
  font-size: clamp(34px, 4vw, 52px);
}

.collection-copy p {
  line-height: 1.8;
}

.collection-mark {
  width: min(275px, 100%);
  border-radius: 50%;
}

.benefits-grid {
  border-color: rgba(255, 255, 255, 0.07);
}

.benefit-icon {
  border-color: rgba(234, 216, 173, 0.18);
  border-radius: 12px;
  background: rgba(197, 161, 95, 0.06);
}

/* Internal pages */

.page-hero::before {
  border-color: rgba(234, 216, 173, 0.08);
  box-shadow:
    0 0 0 42px rgba(234, 216, 173, 0.014),
    0 0 0 84px rgba(234, 216, 173, 0.008);
}

.breadcrumb {
  color: #747a84;
}

.filters-panel,
.contact-form,
.checkout-card,
.checkout-summary,
.admin-panel,
.stat-card,
.settings-card {
  border-color: #dfe2e6;
  background: #fff;
  box-shadow: 0 8px 30px rgba(20, 23, 29, 0.035);
}

.filter-group {
  border-top-color: #eceef1;
}

.filter-group select,
.filter-group input,
.form-field input,
.form-field select,
.form-field textarea {
  border-color: #d8dbe0;
  background: #f9fafb;
}

.filter-group select:focus,
.filter-group input:focus,
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: #9b7b43;
  box-shadow: 0 0 0 3px rgba(197, 161, 95, 0.12);
}

.shop-sort select {
  border-color: #d8dbe0;
  background: #fff;
}

.about-point {
  border-color: #dfe2e6;
  box-shadow: 0 8px 24px rgba(20, 23, 29, 0.03);
}

.about-point b {
  color: var(--red);
}

.faq-list,
.faq-item {
  border-color: #d8dbe0;
}

.contact-info {
  background:
    radial-gradient(circle at 85% 10%, rgba(200, 50, 60, 0.15), transparent 32%),
    #0d0f13;
}

.contact-method {
  border-color: rgba(255, 255, 255, 0.07);
}

.contact-method-icon {
  border-color: rgba(234, 216, 173, 0.17);
  color: var(--gold-light);
}

/* Cart and modal */
.cart-drawer {
  background: #f3f4f6;
}

.drawer-header,
.cart-item,
.cart-drawer-footer {
  border-color: #dfe2e6;
}

.cart-item-image,
.checkout-item img,
.table-product img,
.low-stock-item img {
  background: #e8eaee;
}

.quantity-control {
  border-color: #d2d6dc;
}

.modal-card {
  background: #f7f8f9;
  border-color: rgba(234, 216, 173, 0.16);
}

.product-modal-media {
  background:
    radial-gradient(circle at center, rgba(197, 161, 95, 0.11), transparent 50%),
    linear-gradient(145deg, #e9ebee, #dfe2e6);
}

.payment-option-content {
  border-color: #d8dbe0;
  background: #f9fafb;
}

.payment-option input:checked + .payment-option-content {
  border-color: #95723a;
  background: #fbf7ee;
}

.checkout-block-title b {
  background: #16191f;
}

/* Admin */
.admin-shell {
  background: #eef0f3;
}

.admin-menu button:hover,
.admin-menu button.active {
  background: rgba(197, 161, 95, 0.09);
  color: var(--gold-light);
}

.admin-login-card {
  border-color: rgba(234, 216, 173, 0.16);
}

/* Footer */
.site-footer {
  border-top-color: rgba(255, 255, 255, 0.06);
}

.toast {
  border-color: rgba(234, 216, 173, 0.16);
  background: #15181e;
}

.toast::before {
  background: var(--red);
  color: #fff;
}

/* V2 responsive refinements */
@media (max-width: 1080px) {

  .hero-showcase {
    transform: scale(0.88);
  }
}

@media (max-width: 840px) {

  .brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .hero h1 {
    max-width: 660px;
  }

  .hero-visual {
    inset-inline-end: 50%;
  }

}

@media (max-width: 620px) {

  .hero-pill {
    font-size: 10px;
  }

  .hero-actions {
    margin-top: 27px;
  }

  .collection-mark {
    width: 190px;
  }

}

/* V3 final cascade — keep the premium layer above legacy theme rules */

.hero-trust {
  padding-top: 0;
  border-top: 0;
}

.shipping-grid {
  gap: 5px;
  padding: 6px;
  overflow: visible;
  border-color: rgba(234, 216, 173, 0.12);
}

.shipping-card {
  border: 1px solid transparent;
  border-radius: 13px;
}

.shipping-card + .shipping-card {
  border-inline-start-color: transparent;
}

.category-card::before {
  background:
    linear-gradient(to top, rgba(8, 10, 14, 0.99) 5%, rgba(8, 10, 14, 0.64) 55%, rgba(8, 10, 14, 0.16)),
    radial-gradient(circle at 76% 10%, color-mix(in srgb, var(--category-color) 88%, white 12%), #111318 64%);
}

.category-card:hover::after {
  opacity: 1;
  transform: scale(1.06);
}

.product-card {
  border-color: #dfe3e8;
}

.benefits-grid {
  padding: 6px;
  border-radius: 20px;
}

@media (max-width: 840px) {
  .hero,
  .hero-inner {
    min-height: 750px;
  }

  .hero-copy {
    padding-bottom: 180px;
  }

  .shipping-grid {
    gap: 3px;
  }

  .shipping-card + .shipping-card {
    border-top-color: transparent;
  }
}

@media (max-width: 620px) {

  .hero,
  .hero-inner {
    min-height: auto;
  }

  .hero-copy {
    width: 100%;
  }

  .hero h1 {
    max-width: 100%;
    margin-top: 22px;
  }

  .shipping-grid {
    gap: 0;
    padding: 4px;
  }

  .shipping-card {
    min-height: 68px;
  }

  .categories-grid {
    width: auto;
    margin-inline: -12px;
    padding: 2px 12px 16px;
    scrollbar-width: none;
  }

  .benefits-grid {
    padding: 5px;
  }
}

/* V3 component details */
body {
  overflow-x: clip;
}

.brand img,
.icon-button,
.cart-button {
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.hero {
  overflow: clip;
  border-bottom: 1px solid rgba(234, 216, 173, 0.08);
}

.hero::before {
  opacity: 0.5;
  background:
    linear-gradient(116deg, transparent 0 49.8%, rgba(255, 255, 255, 0.035) 50%, transparent 50.2%),
    linear-gradient(64deg, transparent 0 49.8%, rgba(197, 161, 95, 0.05) 50%, transparent 50.2%),
    radial-gradient(circle, rgba(255, 255, 255, 0.14) 0 1px, transparent 1.4px);
  background-size: 160px 160px, 160px 160px, 34px 34px;
  mask-image: radial-gradient(circle at 50% 48%, black, transparent 82%);
}

.hero h1 {
  text-wrap: balance;
  text-shadow: 0 16px 42px rgba(0, 0, 0, 0.23);
}

.hero-description {
  text-wrap: pretty;
}

.hero-actions .button {
  min-width: 175px;
  border-radius: 12px;
}

.hero-actions .button::after {
  content: "←";
  font-size: 17px;
  transition: transform 180ms ease;
}

[dir="ltr"] .hero-actions .button::after {
  content: "→";
}

.hero-actions .button:hover::after {
  transform: translateX(-4px);
}

[dir="ltr"] .hero-actions .button:hover::after {
  transform: translateX(4px);
}

.trust-item {
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.028);
}

.hero-showcase::before,
.hero-showcase::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

.hero-showcase::before {
  inset: 42px 14px 0;
  border: 1px solid rgba(234, 216, 173, 0.11);
  box-shadow: 0 0 0 35px rgba(197, 161, 95, 0.018), 0 0 0 70px rgba(197, 161, 95, 0.008);
}

.hero-showcase::after {
  width: 310px;
  height: 310px;
  inset-inline-start: 100px;
  top: 108px;
  border: 1px dashed rgba(234, 216, 173, 0.1);
}

.showcase-card-1 {
  box-shadow: 0 36px 72px rgba(0, 0, 0, 0.52), 0 0 32px rgba(197, 161, 95, 0.11);
}

.showcase-card-2,
.showcase-card-3 {
  opacity: 0.66;
  filter: saturate(0.88);
}

.showcase-card-2:hover,
.showcase-card-3:hover {
  filter: saturate(1);
}

.shipping-card {
  overflow: hidden;
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.shipping-card::before {
  position: absolute;
  inset-block: 18px;
  inset-inline-start: 0;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(var(--red-bright), var(--gold));
  opacity: 0.68;
}

.section-head:not(.center) {
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(23, 27, 34, 0.09);
}

.section-title {
  text-wrap: balance;
}

.text-link {
  min-height: 39px;
  padding: 8px 13px;
  border: 1px solid rgba(143, 38, 48, 0.13);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.text-link:hover {
  border-color: rgba(143, 38, 48, 0.26);
  background: #fff;
}

.category-card::after {
  transition: transform 280ms ease, opacity 280ms ease;
}

.category-count {
  position: absolute;
  top: 22px;
  inset-inline-end: 19px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.category-arrow {
  position: absolute;
  inset-inline-end: 17px;
  bottom: 17px;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  transition: transform 180ms ease, background-color 180ms ease;
}

.category-arrow::before {
  content: "←";
}

[dir="ltr"] .category-arrow::before {
  content: "→";
}

.category-card:hover .category-arrow {
  transform: translateX(-4px);
}

[dir="ltr"] .category-card:hover .category-arrow {
  transform: translateX(4px);
}

.category-card p {
  max-width: calc(100% - 38px);
}

.product-card::before {
  content: "";
  position: absolute;
  z-index: 8;
  inset-inline: 18px;
  top: 0;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, rgba(29, 34, 43, 0.22), transparent);
}

.product-card:has(.foil-ultra)::before {
  background: linear-gradient(90deg, transparent, #d9b35e, transparent);
}

.product-card:has(.foil-secret)::before,
.product-card:has(.foil-prismatic)::before,
.product-card:has(.foil-quarter)::before,
.product-card:has(.foil-collector)::before,
.product-card:has(.foil-ghost)::before {
  background: linear-gradient(90deg, transparent, #85dfff, #f79fe5, #ffe19c, #8ff4ca, transparent);
}

.product-card:has(.foil-super)::before,
.product-card:has(.foil-rare)::before {
  background: linear-gradient(90deg, transparent, #c8d9ed, #fff, #abc6e5, transparent);
}

.badge.featured {
  border: 1px solid rgba(234, 216, 173, 0.28);
  backdrop-filter: blur(8px);
}

.product-name {
  transition: color 160ms ease;
}

.product-card:hover .product-name {
  color: #9a2630;
}

.product-price {
  letter-spacing: -0.04em;
}

.product-quick-add {
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.collection-banner {
  isolation: isolate;
}

.collection-mark,
.benefit-card,
.benefit-icon {
  transition: transform 220ms ease, filter 220ms ease, background-color 220ms ease;
}

.collection-banner:hover .collection-mark {
  transform: translateY(-5px) rotate(-2deg);
}

.benefit-card:hover .benefit-icon {
  transform: rotate(-4deg) scale(1.04);
  background: rgba(197, 161, 95, 0.11);
}

.filters-panel,
.contact-form,
.checkout-card,
.checkout-summary,
.admin-panel,
.stat-card,
.settings-card {
  border-radius: 18px;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid #d9b96f;
  outline-offset: 3px;
}

/* ACS player tools, preorder operations and true-to-rarity foil rendering */
.badge.preorder,
.preorder-tag,
.product-stock.preorder-stock {
  border-color: rgba(240, 190, 78, 0.45);
  background: #19150c;
  color: #f0c65e;
}

.waitlist-add {
  background: #252a33;
}

.waitlist-add svg {
  width: 18px;
  height: 18px;
}

.preorder-release {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0;
  padding: 12px 15px;
  border: 1px solid rgba(184, 139, 47, 0.28);
  border-radius: 10px;
  background: #fff9e9;
  color: #6b511a;
}

[data-foil-surface].foil-card {
  --foil-x: 50%;
  --foil-y: 50%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --foil-opacity: 0.58;
  --foil-clip: inset(5% round 4px);
  --foil-pattern: radial-gradient(circle at var(--foil-x) var(--foil-y), rgba(255,255,255,.92) 0 3%, rgba(255,255,255,.15) 12%, transparent 32%), linear-gradient(115deg, transparent 20%, rgba(255,255,255,.5) 42%, transparent 63%);
  transform-style: preserve-3d;
}

[data-foil-surface].foil-card::before {
  inset: 0;
  width: auto;
  opacity: var(--foil-opacity);
  background: var(--foil-pattern);
  background-position: var(--foil-x) var(--foil-y);
  background-size: 180% 180%, 170% 170%;
  clip-path: var(--foil-clip);
  mix-blend-mode: screen;
  transform: translateZ(2px);
  transition: opacity 140ms ease, background-position 90ms linear;
  animation: none;
}

[data-foil-surface].foil-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  background: repeating-linear-gradient(117deg, transparent 0 8px, rgba(255,255,255,.19) 9px, transparent 10px 17px);
  background-position: var(--foil-x) var(--foil-y);
  clip-path: var(--foil-clip);
  mix-blend-mode: color-dodge;
}

[data-foil-surface].foil-card:has(.physical-foil-layer)::before,
[data-foil-surface].foil-card:has(.physical-foil-layer)::after {
  display: none;
}

.physical-foil-layer {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: auto;
  height: calc(100% - 48px);
  aspect-ratio: 421 / 614;
  pointer-events: none;
  opacity: var(--foil-opacity);
  background: var(--foil-pattern);
  background-position: var(--foil-x) var(--foil-y);
  background-size: 180% 180%, 170% 170%;
  clip-path: var(--foil-clip);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) translateZ(3px);
  transition: opacity 140ms ease, background-position 90ms linear;
}

.physical-foil-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(117deg, transparent 0 8px, rgba(255,255,255,.18) 9px, transparent 10px 17px);
  mix-blend-mode: color-dodge;
}

.product-detail-main .physical-foil-layer {
  height: 500px;
}

.showcase-card .physical-foil-layer {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.product-detail-main[data-foil-surface] {
  transition: transform 180ms ease, box-shadow 180ms ease;
  transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  box-shadow: calc((50% - var(--foil-x)) / 7) 28px 58px rgba(4, 6, 10, .25);
}

.foil-rare {
  --foil-opacity: .62;
  --foil-clip: polygon(7% 5%, 93% 5%, 93% 15%, 7% 15%);
  --foil-pattern: linear-gradient(100deg, transparent 18%, rgba(215,226,239,.25) 32%, #fff 48%, rgba(155,184,218,.38) 60%, transparent 78%);
}

.foil-super {
  --foil-opacity: .66;
  --foil-clip: polygon(7% 18%, 93% 18%, 93% 65%, 7% 65%);
  --foil-pattern: radial-gradient(circle at var(--foil-x) var(--foil-y), #fff 0 2%, rgba(145,211,255,.72) 12%, transparent 34%), conic-gradient(from 25deg at var(--foil-x) var(--foil-y), rgba(112,190,255,.5), rgba(255,255,255,.75), rgba(183,130,255,.42), rgba(115,243,219,.42), rgba(112,190,255,.5));
}

.foil-ultra {
  --foil-opacity: .72;
  --foil-clip: polygon(6% 5%, 94% 5%, 94% 65%, 6% 65%);
  --foil-pattern: radial-gradient(circle at var(--foil-x) var(--foil-y), rgba(255,250,210,.95) 0 3%, rgba(255,202,73,.42) 15%, transparent 34%), linear-gradient(118deg, transparent 12%, rgba(255,220,93,.75) 34%, rgba(255,255,255,.86) 48%, rgba(217,156,41,.45) 61%, transparent 82%);
}

.foil-gold {
  --foil-opacity: .76;
  --foil-clip: inset(4% round 3px);
  --foil-pattern: radial-gradient(circle at var(--foil-x) var(--foil-y), #fffbd4 0 2%, rgba(255,208,62,.68) 14%, transparent 35%), repeating-linear-gradient(125deg, rgba(94,55,4,.06) 0 5px, rgba(255,223,105,.64) 6px, rgba(255,251,210,.18) 8px, transparent 12px);
}

.foil-secret {
  --foil-opacity: .72;
  --foil-clip: polygon(6% 5%, 94% 5%, 94% 66%, 6% 66%);
  --foil-pattern: radial-gradient(circle at var(--foil-x) var(--foil-y), rgba(255,255,255,.98), transparent 25%), repeating-linear-gradient(128deg, rgba(90,225,255,.18) 0 5px, rgba(255,120,221,.62) 7px, rgba(255,244,153,.72) 9px, rgba(98,255,200,.5) 11px, transparent 15px 22px);
}

.foil-ultimate {
  --foil-opacity: .57;
  --foil-clip: inset(4% round 3px);
  --foil-pattern: radial-gradient(circle at var(--foil-x) var(--foil-y), rgba(255,248,208,.8), transparent 30%), repeating-radial-gradient(ellipse at center, rgba(79,52,12,.24) 0 1px, rgba(255,223,145,.25) 2px, transparent 4px 8px);
  filter: contrast(1.035) saturate(.96);
}

.foil-collector {
  --foil-opacity: .7;
  --foil-clip: inset(3.5% round 3px);
  --foil-pattern: radial-gradient(circle at var(--foil-x) var(--foil-y), rgba(255,255,255,.95), transparent 27%), repeating-conic-gradient(from 12deg at var(--foil-x) var(--foil-y), rgba(105,216,255,.45) 0 4deg, rgba(250,116,223,.4) 4deg 8deg, rgba(255,232,123,.42) 8deg 12deg, rgba(116,243,196,.4) 12deg 16deg);
}

.foil-ghost {
  --foil-opacity: .7;
  --foil-clip: polygon(7% 18%, 93% 18%, 93% 65%, 7% 65%);
  --foil-pattern: radial-gradient(circle at var(--foil-x) var(--foil-y), rgba(255,255,255,.97), rgba(201,226,242,.7) 16%, rgba(219,210,255,.35) 29%, transparent 48%), linear-gradient(110deg, rgba(255,255,255,.55), rgba(177,205,226,.28), rgba(255,255,255,.6));
  filter: saturate(.7) contrast(1.06);
}

.foil-quarter {
  --foil-opacity: .82;
  --foil-clip: inset(3% round 4px);
  --foil-pattern: radial-gradient(circle at var(--foil-x) var(--foil-y), #fff 0 2%, rgba(255,255,255,.18) 20%, transparent 34%), repeating-linear-gradient(118deg, rgba(82,219,255,.28) 0 3px, rgba(250,102,224,.53) 4px 7px, rgba(255,231,104,.62) 8px 11px, rgba(88,248,191,.48) 12px 15px, rgba(135,143,255,.4) 16px 19px, transparent 20px 27px);
}

.condition-report-section {
  background: #0f1217;
  color: #fff;
}

.condition-report-section .section-head p,
.condition-report-section .section-kicker {
  color: #aeb4bf;
}

.condition-grade {
  padding: 10px 16px;
  border: 1px solid rgba(233, 200, 119, .4);
  border-radius: 999px;
  color: #e9c877;
}

.condition-report-grid {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) 1.2fr;
  gap: 34px;
}

.condition-copy-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.condition-copy-gallery button {
  overflow: hidden;
  padding: 0;
  border: 1px solid #303641;
  border-radius: 12px;
  background: #181c23;
  cursor: zoom-in;
}

.condition-copy-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 240ms ease;
}

.condition-copy-gallery button:hover img {
  transform: scale(1.035);
}

.condition-checklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.condition-checklist article {
  padding: 17px;
  border: 1px solid #2a303a;
  border-radius: 12px;
  background: #151920;
}

.condition-checklist article.full {
  grid-column: 1 / -1;
}

.condition-checklist span {
  color: #e9c877;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.condition-checklist p {
  margin: 8px 0 0;
  color: #d6d9df;
  line-height: 1.7;
}

.condition-upload-previews {
  display: grid;
  grid-template-columns: repeat(6, 82px);
  gap: 8px;
  margin-bottom: 12px;
}

.condition-upload-previews img {
  width: 82px;
  height: 98px;
  border: 1px solid #d9dde3;
  border-radius: 8px;
  object-fit: cover;
}

.condition-report-form {
  padding: 18px;
  border: 1px solid #dadde2;
  border-radius: 14px;
  background: #f5f6f8;
}

.condition-report-form h3 {
  margin: 0 0 14px;
}

.reservation-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid rgba(52, 148, 98, .24);
  border-radius: 11px;
  background: #eefaf3;
  color: #236640;
}

.reservation-banner.expired {
  border-color: rgba(188, 48, 58, .25);
  background: #fff0f1;
  color: #a7212d;
}

.reservation-banner > span svg {
  width: 20px;
}

.reservation-banner div {
  display: grid;
  gap: 2px;
}

.reservation-banner small {
  color: inherit;
}

.academy-page,
.simulator-page {
  background: #f4f5f7;
}

.academy-tool-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 24px;
}

.academy-tool-card,
.academy-advisor-card {
  min-height: 410px;
  padding: 38px;
  border-radius: 22px;
}

.academy-tool-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  text-decoration: none;
}

.academy-tool-card::before {
  content: "5";
  position: absolute;
  top: -58px;
  inset-inline-end: 20px;
  font-size: 310px;
  font-weight: 900;
}

.academy-tool-card h2,
.academy-advisor-card h2 {
  margin: 8px 0 12px;
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.04;
}

.academy-tool-card p {
  max-width: 520px;
  line-height: 1.8;
}

.academy-tool-card .button {
  margin-top: 20px;
}

.academy-advisor-card {
  background: #fff;
  box-shadow: 0 18px 55px rgba(13, 17, 24, .08);
}

.academy-advisor-card p {
  color: #737a86;
}

.advisor-fields {
  display: grid;
  grid-template-columns: 1.15fr .8fr .65fr;
  gap: 10px;
  margin: 24px 0 14px;
}

.advisor-results {
  width: min(1280px, calc(100% - 32px));
  margin: 0 auto 65px;
}

.advisor-summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
}

.advisor-summary strong {
  font-size: 30px;
}

.advisor-summary small {
  margin-inline-start: auto;
}

.academy-library {
  background: #fff;
}

.academy-article-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.academy-article {
  position: relative;
  overflow: hidden;
  min-height: 290px;
  padding: 30px;
  border: 1px solid #e0e3e8;
  border-radius: 18px;
  background: #f8f9fa;
}

.article-number {
  position: absolute;
  top: 16px;
  inset-inline-end: 22px;
  font-size: 78px;
  font-weight: 900;
}

.academy-article h2 {
  position: relative;
  max-width: 80%;
  margin: 14px 0;
  font-size: 28px;
}

.academy-article p {
  position: relative;
  color: #646b76;
  line-height: 1.85;
}

.academy-article > div {
  display: flex;
  gap: 6px;
  margin-top: 20px;
}

.academy-article > div span {
  padding: 5px 8px;
  border-radius: 5px;
  background: #e9ebee;
  color: #5e6570;
  font-size: 9px;
  font-weight: 800;
}

.simulator-layout {
  display: grid;
  grid-template-columns: 350px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.simulator-input-card,
.simulator-workspace {
  padding: 26px;
  border: 1px solid #e0e3e8;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 16px 45px rgba(15, 19, 27, .06);
}

.simulator-input-card {
  position: sticky;
  top: 118px;
}

.simulator-input-card h2 {
  margin: 8px 0 18px;
  font-size: 42px;
}

.simulator-workspace-head,
.sample-hand .section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.simulator-workspace-head h2 {
  margin: 4px 0 0;
}

.simulator-role-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.simulator-role-row {
  display: grid;
  grid-template-columns: 48px 1fr 112px;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 9px;
  border: 1px solid #e4e6ea;
  border-radius: 10px;
}

.simulator-role-row img {
  width: 48px;
  height: 66px;
  border-radius: 4px;
  object-fit: cover;
}

.simulator-role-row div {
  min-width: 0;
}

.simulator-role-row strong,
.simulator-role-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simulator-role-row small {
  margin-top: 4px;
  color: #8a9099;
  font-size: 9px;
}

.simulator-role-row select {
  width: 100%;
}

.simulator-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 24px;
}

.simulator-stats article {
  padding: 18px;
  border-radius: 12px;
  background: #eff9f3;
  color: #276741;
}

.simulator-stats article.danger {
  background: #fff0f1;
  color: #9d2631;
}

.simulator-stats span,
.simulator-stats strong {
  display: block;
}

.simulator-stats span {
  min-height: 30px;
  font-size: 11px;
}

.simulator-stats strong {
  margin-top: 8px;
  font-size: 28px;
}

.sample-hand {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid #e1e4e9;
}

.sample-hand > div:last-child {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
}

.sample-hand article {
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 9px;
  background: #15181e;
}

.sample-hand article.starter { border-color: #41b978; }
.sample-hand article.handTrap { border-color: #4d91df; }
.sample-hand article.brick { border-color: #d54855; }

.sample-hand img {
  display: block;
  width: 100%;
  aspect-ratio: 421 / 614;
  object-fit: cover;
}

.sample-hand article span {
  display: block;
  overflow: hidden;
  padding: 8px;
  color: #fff;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.simulator-empty {
  display: grid;
  min-height: 500px;
  place-content: center;
  text-align: center;
}

.simulator-empty b {
  color: #e5e7eb;
  font-size: 180px;
  line-height: .8;
}

.forecast-alert {
  background: #fff3f3;
}

.forecast-alert td:first-child {
  box-shadow: inset 3px 0 #c72d3a;
}

[dir="rtl"] .forecast-alert td:first-child {
  box-shadow: inset -3px 0 #c72d3a;
}

.admin-head-actions,
.print-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.print-order-actions {
  margin-top: 18px;
}

.notification-error {
  display: block;
  max-width: 280px;
  margin-top: 4px;
  color: #a8202c;
}

@media (hover: none), (prefers-reduced-motion: no-preference) {
  [data-foil-surface].foil-card::before {
    animation: acsLivingFoil 5.8s ease-in-out infinite alternate;
  }

  .physical-foil-layer {
    animation: acsLivingFoil 5.8s ease-in-out infinite alternate;
  }
}

@keyframes acsLivingFoil {
  from { background-position: 15% 20%; opacity: .34; }
  to { background-position: 85% 75%; opacity: var(--foil-opacity); }
}

@media (max-width: 960px) {
  .academy-tool-grid,
  .condition-report-grid,
  .simulator-layout {
    grid-template-columns: 1fr;
  }

  .simulator-input-card {
    position: static;
  }

  .advisor-fields {
    grid-template-columns: 1fr 1fr;
  }

  .product-detail-main .physical-foil-layer {
    height: 420px;
  }
}

@media (max-width: 680px) {
  .product-detail-main .physical-foil-layer {
    height: 380px;
  }
  .academy-tool-card,
  .academy-advisor-card {
    min-height: 0;
    padding: 25px 20px;
  }

  .academy-article-grid,
  .simulator-role-list,
  .condition-checklist,
  .advisor-fields {
    grid-template-columns: 1fr;
  }

  .academy-article {
    min-height: 0;
    padding: 24px 20px;
  }

  .academy-article h2 {
    max-width: 88%;
    font-size: 23px;
  }

  .simulator-input-card,
  .simulator-workspace {
    padding: 18px 14px;
  }

  .simulator-workspace-head {
    align-items: stretch;
    flex-direction: column;
  }

  .simulator-role-row {
    grid-template-columns: 42px minmax(0, 1fr) 96px;
  }

  .simulator-role-row img {
    width: 42px;
    height: 58px;
  }

  .simulator-stats {
    grid-template-columns: 1fr 1fr;
  }

  .sample-hand > div:last-child {
    grid-template-columns: repeat(5, 115px);
    overflow-x: auto;
    padding-bottom: 8px;
  }

  .condition-copy-gallery {
    grid-template-columns: 1fr 1fr;
  }

  .condition-upload-previews {
    grid-template-columns: repeat(3, 82px);
  }

  .advisor-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .advisor-summary small {
    margin-inline-start: 0;
  }
}

@media (max-width: 620px) {

  .hero-trust {
    justify-content: center;
  }

  .trust-item {
    min-height: 34px;
    padding: 7px 9px;
    font-size: 9px;
  }

  .shipping-card::before {
    inset-block: 15px;
  }

  .section-head:not(.center) {
    gap: 16px;
    padding-bottom: 16px;
  }

  .text-link {
    min-height: 36px;
    padding: 7px 11px;
  }

  .categories-grid::-webkit-scrollbar {
    display: none;
  }

}

/* Production storefront additions */
.product-media {
  isolation: isolate;
}

.product-wishlist {
  position: absolute;
  z-index: 7;
  top: 13px;
  inset-inline-end: 13px;
  display: grid;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  opacity: 0.78;
  backdrop-filter: blur(10px);
  transition: transform 160ms ease, opacity 160ms ease, color 160ms ease, background 160ms ease;
}

.product-wishlist svg {
  width: 18px;
  height: 18px;
}

.product-wishlist:hover,
.product-wishlist.active {
  transform: translateY(-2px) scale(1.04);
  opacity: 1;
  color: #fff;
  background: #a81f2a;
}

.product-wishlist.active svg {
  fill: currentColor;
}

.product-badges:not(:empty) + img + .product-wishlist {
  top: 54px;
}

.product-gallery {
  display: flex;
  width: min(310px, 100%);
  gap: 8px;
  margin-top: 15px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.product-gallery button {
  flex: 0 0 54px;
  height: 68px;
  padding: 2px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #11141a;
  cursor: pointer;
  opacity: 0.56;
}

.product-gallery button.active {
  border-color: #d9b96f;
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(217, 185, 111, 0.15);
}

.product-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flip-card-button {
  margin-top: 12px;
  padding: 8px 13px;
  border: 1px solid rgba(217, 185, 111, 0.36);
  border-radius: 999px;
  background: rgba(217, 185, 111, 0.08);
  color: #ead8ad;
  cursor: pointer;
}

#modalProductImage {
  transition: transform 260ms ease, opacity 130ms ease;
}

#modalProductImage.flipping {
  transform: rotateY(90deg) scale(0.98);
  opacity: 0.25;
}

.product-variants {
  margin-top: 18px;
}

.product-variants h3 {
  margin: 0 0 9px;
  font-size: 13px;
}

.product-variant-list {
  display: grid;
  gap: 7px;
}

.product-variant-row {
  display: grid;
  align-items: center;
  gap: 13px;
  padding: 10px 12px;
  border: 1px solid #e2ddd4;
  border-radius: 10px;
}

.product-variant-row small {
  display: block;
  margin-top: 2px;
  color: #777169;
}

.product-variant-row > span {
  min-width: 28px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #ece7df;
  text-align: center;
  font-size: 11px;
}

.modal-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 12px;
}

.modal-secondary-actions .button {
  gap: 7px;
}

.modal-secondary-actions .button.active {
  border-color: #a81f2a;
  color: #a81f2a;
}

.coupon-entry {
  padding: 16px 0;
  border-top: 1px solid #e4ded5;
  border-bottom: 1px solid #e4ded5;
}

.coupon-entry > label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
}

.coupon-entry > div {
  display: flex;
  gap: 8px;
}

.coupon-entry input {
  min-width: 0;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #d8d1c7;
  border-radius: 9px;
  text-transform: uppercase;
}

.guest-tracking-card {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #f7f2e8, #fff);
}

.guest-tracking-card .form-grid {
  grid-template-columns: 1fr 1fr;
}

.guest-tracking-card .button {
  max-width: 260px;
}

.account-wishlist {
  margin-top: 38px;
  padding-top: 30px;
  border-top: 1px solid #e2ddd5;
}

.wishlist-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.wishlist-grid .product-card-content {
  padding: 14px;
}

.wishlist-grid .product-name {
  font-size: 14px;
}

.account-order-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee8e0;
  font-size: 12px;
}

.restock-alert-form {
  position: relative;
  width: min(620px, 100%);
  padding: 36px;
}

.restock-alert-form h2 {
  margin: 7px 0 24px;
}

.restock-alert-form > .button {
  width: 100%;
  margin-top: 18px;
}

.ydk-file {
  display: grid;
  min-height: 132px;
  padding: 18px;
  place-content: center;
  border: 1px dashed rgba(217, 185, 111, 0.43);
  border-radius: 13px;
  text-align: center;
  cursor: pointer;
}

.ydk-file input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ydk-file span {
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.ydk-file b {
  margin-top: 5px;
  font-size: 10px;
}

.coupon-form {
  padding: 0 0 22px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e2ddd5;
}

.coupon-form > .button {
  margin-top: 14px;
}

.status-badge.confirmed,
.status-badge.delivered {
  background: #e2f4e9;
  color: #287748;
}

.status-badge.shipped {
  background: #e6efff;
  color: #315e9c;
}

.status-badge.awaitingPayment,
.status-badge.expired {
  background: #fff1d9;
  color: #875d13;
}

.discovery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.discovery-card {
  position: relative;
  overflow: hidden;
  padding: 19px;
}

.discovery-card::before {
  position: absolute;
  width: 180px;
  height: 180px;
  top: -120px;
  inset-inline-end: -80px;
  border-radius: 50%;
  background: var(--discovery-tone, #d9b96f);
  filter: blur(55px);
  opacity: 0.22;
}

.discovery-card.red { --discovery-tone: #c6323e; }
.discovery-card.blue { --discovery-tone: #477fbb; }

.discovery-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
}

.discovery-head h3 {
  margin: 0;
  font-size: 18px;
}

.discovery-head a {
  font-size: 11px;
}

.discovery-list {
  position: relative;
  display: grid;
  gap: 7px;
}

.discovery-product {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  background: rgba(255, 255, 255, 0.035);
  color: inherit;
  text-align: start;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}

.discovery-product:hover {
  transform: translateX(calc(var(--direction, 1) * -2px));
}

.discovery-thumb {
  display: block;
  width: 48px;
  height: 67px;
  overflow: hidden;
  border-radius: 6px;
}

.discovery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discovery-product strong,
.discovery-product small {
  display: block;
}

.discovery-product strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discovery-product small {
  overflow: hidden;
  margin-top: 4px;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discovery-product > b {
  color: #ead8ad;
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .discovery-grid {
    grid-template-columns: 1fr;
  }

  .discovery-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wishlist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {

  .discovery-list,
  .guest-tracking-card .form-grid,
  .wishlist-grid,
  #ydkForm,
  .ydk-summary {
    grid-template-columns: 1fr;
  }

  .ydk-modal,
  .restock-alert-form {
    padding: 28px 20px;
  }

  .ydk-file {
    min-height: 95px;
  }

  .account-order-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .page-hero h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .page-hero p {
    font-size: 13px;
  }

  .shop-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .shop-toolbar > div,
  .shop-sort {
    width: 100%;
  }

  .shop-toolbar > div:first-child {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }

  .shop-results-count {
    grid-column: 1 / -1;
  }

  .shop-sort select {
    width: 100%;
    min-width: 0;
  }

}

@media (prefers-reduced-motion: reduce) {
  #modalProductImage,
  .product-wishlist,
  .discovery-product {
    transition: none;
  }
}
/* ACS buylist and collection-language refresh */
.hero h1 .gold-text {
  display: inline-block;
  font-size: .76em;
  line-height: 1.14;
  letter-spacing: -.045em;
}

.showcase-card:not(button) {
  cursor: default;
}

.sell-process-strip {
  position: relative;
  overflow: hidden;
  padding: 34px 0 44px;
}

.sell-process-strip::after {
  position: absolute;
  inset-inline-end: -90px;
  top: -170px;
  width: 410px;
  height: 410px;
  border: 1px solid rgba(224, 194, 123, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(224, 194, 123, .025), 0 0 0 110px rgba(224, 194, 123, .018);
}

.sell-only-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 26px;
  padding: 9px 14px;
  border: 1px solid rgba(224, 194, 123, .25);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.sell-only-badge svg {
  width: 17px;
  height: 17px;
}

.sell-process-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.sell-process-grid article {
  position: relative;
  min-height: 150px;
  padding: 25px 24px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
}

.sell-process-grid b {
  position: absolute;
  inset-inline-end: 20px;
  top: 16px;
  color: rgba(227, 201, 132, .22);
  font-size: 42px;
}

.sell-process-grid h3 {
  margin: 20px 0 8px;
  font-size: 20px;
}

.sell-process-grid p {
  max-width: 330px;
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
}

.sell-card-layout {
  display: grid;
  grid-template-columns: 355px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.sell-search-panel,
.sell-offer-workspace,
.sell-track-form,
.tracked-card-offer {
  border: 1px solid #e0e2e6;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(17, 23, 33, .07);
}

.sell-search-panel {
  position: sticky;
  top: 118px;
  padding: 25px;
}

.sell-search-panel h2 {
  margin: 8px 0 18px;
}

.sell-search-form {
  display: grid;
  gap: 9px;
}

.sell-search-form input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #d9dde3;
  border-radius: 11px;
  background: #f8f9fb;
}

.sell-search-results {
  display: grid;
  gap: 8px;
  max-height: 560px;
  margin-top: 18px;
  overflow: auto;
}

.sell-card-result {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  width: 100%;
  padding: 9px;
  border: 1px solid #eceef1;
  border-radius: 12px;
  background: #fff;
  color: #171a20;
  text-align: start;
  cursor: pointer;
}

.sell-card-result img {
  width: 48px;
  height: 68px;
  object-fit: contain;
}

.sell-card-result span {
  min-width: 0;
}

.sell-card-result strong,
.sell-card-result small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sell-card-result small {
  margin-top: 3px;
  font-size: 10px;
}

.sell-card-result > b {
  grid-column: 1 / -1;
  font-size: 10px;
}

.sell-offer-workspace {
  overflow: hidden;
}

.sell-no-card {
  min-height: 430px;
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 45px;
  text-align: center;
}

.sell-no-card b {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  font-size: 34px;
}

.sell-no-card h2 {
  margin: 18px 0 7px;
}

.sell-no-card p {
  margin: 0;
  color: #848a94;
}

.sell-selected-card {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  padding: 31px;
  border-bottom: 1px solid #e7e8eb;
}

.sell-selected-visual {
  position: relative;
  height: 340px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  overflow: hidden;
}

.sell-selected-visual > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 7px;
  object-fit: contain;
}

.sell-selected-visual .physical-foil-layer {
  width: auto;
  height: calc(100% - 14px);
}

.sell-selected-copy h2 {
  margin: 8px 0 6px;
  font-size: 34px;
}

.sell-selected-copy p {
  margin: 0;
}

.sell-art-choices {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}

.sell-art-choices button {
  width: 58px;
  height: 82px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  cursor: pointer;
}

.sell-art-choices img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-offer-form {
  padding: 31px;
}

.sell-price-hint {
  margin-top: -16px;
  color: #9a742f;
}

.sell-photo-previews {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.sell-photo-previews img {
  width: 82px;
  height: 82px;
  border: 1px solid #e1e3e7;
  border-radius: 9px;
  object-fit: cover;
}

.sell-agreement {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #555d68;
  font-size: 13px;
  line-height: 1.7;
}

.sell-agreement input {
  flex: 0 0 auto;
  margin-top: 5px;
}

.sell-track-section {
  background: #f1f2f4;
}

.sell-track-layout {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 24px;
  align-items: start;
}

.sell-track-form {
  padding: 28px;
}

.sell-track-form h2 {
  margin: 8px 0 22px;
}

.tracked-card-offer {
  display: grid;
  grid-template-columns: 155px minmax(0, 1fr);
  gap: 25px;
  padding: 24px;
}

.tracked-card-offer > img {
  width: 155px;
  height: 218px;
  object-fit: contain;
  border-radius: 10px;
  background: #101318;
}

.tracked-card-offer h3 {
  margin: 7px 0 12px;
  font-size: 25px;
}

.offer-status-row,
.offer-prices {
  display: flex;
  align-items: center;
  gap: 13px;
}

.offer-status-row {
  justify-content: space-between;
}

.offer-prices {
  margin-top: 18px;
}

.offer-prices > span {
  flex: 1;
  padding: 13px;
  border: 1px solid #e4e6e9;
  border-radius: 11px;
}

.offer-prices small,
.offer-prices strong {
  display: block;
}

.offer-prices small {
  color: #818791;
}

.offer-prices strong {
  margin-top: 4px;
  font-size: 21px;
}

.acs-offer-price {
  border-color: #dbc17e !important;
  background: #fff9e9;
}

.offer-admin-note,
.dropoff-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 9px;
  background: #f3f5f7;
  color: #4e5661;
  line-height: 1.7;
}

.offer-negotiation {
  margin-top: 16px;
}

.offer-negotiation ol {
  display: grid;
  gap: 7px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}

.offer-negotiation li {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 8px;
  background: #f4f5f7;
  font-size: 12px;
}

.offer-negotiation li.acs {
  background: #fff7df;
}

.offer-response-actions {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e2e4e8;
}

.offer-response-actions > div,
.offer-response-actions label {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.offer-response-actions label {
  align-items: flex-end;
}

.offer-response-actions label span {
  width: 100%;
  color: #686f79;
  font-size: 12px;
}

.offer-response-actions input {
  flex: 1;
  min-width: 130px;
  min-height: 39px;
  padding: 0 11px;
  border: 1px solid #d7dae0;
  border-radius: 8px;
}

.status-badge.countered {
  background: #e8eefb;
  color: #31548e;
}

.dropoff-note {
  background: #e9f5ed;
  color: #28613a;
}

.account-offers-list {
  display: grid;
  gap: 15px;
}

.account-card-offers {
  margin-top: 32px;
}

.admin-card-offer-head {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) 1.25fr;
  gap: 26px;
  margin: 20px 0 24px;
}

.admin-offer-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.admin-offer-gallery img {
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 1px solid #e1e3e6;
  border-radius: 10px;
  object-fit: contain;
  background: #f5f6f7;
}

.status-badge.offered,
.status-badge.dropoff_scheduled {
  background: #fff4d8;
  color: #8a6112;
}

.status-badge.accepted,
.status-badge.received,
.status-badge.paid {
  background: #e5f5ea;
  color: #216238;
}

.status-badge.declined,
.status-badge.cancelled {
  background: #fde8ea;
  color: #9d2933;
}

@media (max-width: 1050px) {
  .sell-card-layout,
  .sell-track-layout {
    grid-template-columns: 1fr;
  }

  .sell-search-panel {
    position: static;
  }

  .sell-search-results {
    grid-template-columns: repeat(2, 1fr);
    max-height: 420px;
  }
}

@media (max-width: 700px) {
  .hero h1 .gold-text {
    font-size: .7em;
  }

  .sell-process-grid,
  .sell-selected-card,
  .tracked-card-offer,
  .admin-card-offer-head {
    grid-template-columns: 1fr;
  }

  .sell-process-grid {
    gap: 10px;
  }

  .sell-process-grid article {
    min-height: 125px;
  }

  .sell-card-layout {
    gap: 14px;
  }

  .sell-search-panel,
  .card-offer-form,
  .sell-track-form {
    padding: 20px;
  }

  .sell-search-results {
    grid-template-columns: 1fr;
  }

  .sell-selected-card {
    gap: 20px;
    padding: 20px;
  }

  .sell-selected-visual {
    height: 385px;
  }

  .sell-selected-copy h2 {
    font-size: 27px;
  }

  .tracked-card-offer > img {
    width: 150px;
    height: 210px;
    justify-self: center;
  }
}

/* ACS Smart Tools, Club and advanced operations */
.tools-page,
.club-page {
  background:
    radial-gradient(circle at 12% 18%, rgba(182, 135, 54, .1), transparent 28rem),
    radial-gradient(circle at 88% 62%, rgba(151, 28, 36, .08), transparent 30rem),
    #f5f3ee;
}

.tools-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr);
  gap: 22px;
  align-items: start;
}

.tool-panel {
  overflow: hidden;
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid #ded9ce;
  border-radius: 24px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 22px 60px rgba(23, 21, 17, .07);
}

.scanner-tool,
.want-list-tool {
  grid-column: span 2;
}

.tool-panel-head {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-bottom: 24px;
}

.tool-panel-head h2 {
  margin: 4px 0 0;
  font-size: clamp(22px, 3vw, 34px);
}

.tool-number {
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 18px;
  font-weight: 900;
}

.scanner-workspace {
  display: grid;
  grid-template-columns: minmax(300px, .74fr) minmax(0, 1.26fr);
  gap: 30px;
}

.scanner-controls {
  display: grid;
  gap: 15px;
}

.camera-drop {
  position: relative;
  display: grid;
  min-height: 150px;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px dashed #bca36f;
  border-radius: 18px;
  cursor: pointer;
}

.camera-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.camera-drop > span {
  font-size: 36px;
}

.camera-preview {
  width: 100%;
  max-height: 230px;
  object-fit: contain;
  border-radius: 15px;
  background: #111;
}

.condition-score-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 16px;
}

.condition-score {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  color: #52504a;
  font-size: 11px;
  font-weight: 800;
}

.condition-score input {
  grid-column: 1 / -1;
}

.condition-score b {
  color: #946c25;
}

.tool-empty {
  display: grid;
  min-height: 360px;
  place-items: center;
  align-content: center;
  padding: 35px;
  border: 1px solid #e2ddd2;
  border-radius: 20px;
  text-align: center;
}

.tool-empty.small {
  min-height: 180px;
}

.tool-empty > span {
  font-size: 58px;
}

.tool-empty h3 {
  margin: 12px 0 6px;
}

.tool-empty p {
  max-width: 510px;
  margin: 0;
}

.scanner-result-card {
  display: grid;
  grid-template-columns: minmax(180px, 270px) 1fr;
  gap: 28px;
  min-height: 100%;
  align-items: center;
  padding: 22px;
  border-radius: 20px;
  background: #0f1011;
  color: #fff;
}

.scanner-result-card h2 {
  margin: 8px 0;
  font-size: clamp(24px, 3vw, 38px);
}

.scanner-result-card p {
  color: #aaa69e;
}

.scanner-card-visual {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 18px 40px #0008, 0 0 0 1px #dbb35c88;
}

.scanner-card-visual img {
  display: block;
  width: 100%;
}

.scanner-card-visual .physical-foil-layer {
  opacity: .55;
}

.smart-valuation {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 20px 0;
}

.smart-valuation > div {
  display: grid;
  gap: 4px;
  padding: 13px;
  border: 1px solid #ffffff18;
  border-radius: 13px;
  background: #ffffff0a;
}

.smart-valuation small,
.smart-valuation em {
  color: #aaa69f;
  font-size: 9px;
  font-style: normal;
}

.smart-valuation strong {
  color: #e7c174;
  font-size: 18px;
}

.smart-valuation .credit {
  border-color: #b9904366;
  background: #b9904314;
}

.want-list-form {
  display: grid;
  grid-template-columns: minmax(200px, .35fr) minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
}

.want-list-form textarea {
  min-height: 155px;
}

.want-list-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 24px 0 14px;
}

.want-list-summary > div {
  display: grid;
  gap: 4px;
  padding: 15px;
  border-radius: 14px;
  background: #121314;
  color: #fff;
}

.want-list-summary strong {
  color: #e3b966;
  font-size: 23px;
}

.want-list-summary span {
  color: #aaa69e;
  font-size: 10px;
}

.want-list-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.want-list-results article {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 9px;
  border: 1px solid #e2ddd2;
  border-radius: 13px;
}

.want-list-results article.available {
  border-color: #b4c9b6;
  background: #f4faf4;
}

.want-list-results article.missing {
  background: #faf6f5;
}

.want-list-results img {
  width: 44px;
  height: 62px;
  object-fit: cover;
  border-radius: 4px;
}

.want-list-results div {
  min-width: 0;
}

.want-list-results strong,
.want-list-results small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.want-list-results small {
  margin-top: 3px;
  color: #77736b;
  font-size: 9px;
}

.want-list-results button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 9px;
  background: #171819;
  color: #e5bc68;
  cursor: pointer;
}

.want-list-results > article > span {
  color: #9b4a4f;
  font-size: 8px;
  font-weight: 900;
}

.tool-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.deck-validator-tool,
.grading-guide {
  min-height: 300px;
}

.deck-validator-tool p {
  color: #6e6a63;
  line-height: 1.9;
}

.grading-steps {
  display: grid;
  gap: 8px;
}

.grading-steps div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px;
  border-radius: 12px;
  background: #f3f0e9;
}

.grading-steps b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
}

.club-rank-section {
  padding: 34px 0 0;
}

.rank-pass {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  overflow: hidden;
  padding: clamp(25px, 4vw, 46px);
  border: 1px solid #c69b4d66;
  border-radius: 26px;
  background: radial-gradient(circle at 90% 10%, #d8a74b38, transparent 34%), linear-gradient(135deg, #111214, #262018);
  box-shadow: 0 26px 65px #1b160f33;
  color: #fff;
}

.rank-pass::after {
  position: absolute;
  inset-inline-end: -50px;
  bottom: -75px;
  width: 250px;
  height: 250px;
  border: 35px solid #d8ad5f0c;
  border-radius: 50%;
  content: "";
}

.rank-pass.gold {
  background: radial-gradient(circle at 90% 10%, #ffca5c55, transparent 34%), linear-gradient(135deg, #16120b, #493511);
}

.rank-pass.legend {
  background: radial-gradient(circle at 90% 10%, #cf232e55, transparent 34%), linear-gradient(135deg, #120e0e, #4b1117);
}

.rank-pass h2 {
  margin: 6px 0;
  color: #e8bd67;
  font-size: clamp(32px, 5vw, 62px);
}

.rank-pass p {
  margin: 0;
  color: #aaa69e;
}

.rank-pass > div > span {
  letter-spacing: .22em;
  font-size: 10px;
  font-weight: 900;
}

.rank-numbers {
  display: flex;
  align-items: center;
  gap: 30px;
}

.rank-numbers div {
  display: grid;
  gap: 5px;
}

.rank-numbers small {
  color: #aaa69e;
}

.rank-numbers strong {
  color: #fff;
  font-size: 25px;
}

.rank-progress {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 4px;
  background: #ffffff0d;
}

.rank-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #9e2028, #e3bd72);
}

.club-login-callout {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 25px 30px;
  border-radius: 22px;
  background: #121314;
  color: #fff;
}

.club-login-callout h2 {
  flex: 1;
  margin: 0;
}

.club-login-callout > span {
  font-weight: 900;
}

.auction-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.auction-card {
  overflow: hidden;
  border: 1px solid #ddd7ca;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 50px #1a18140e;
}

.auction-image {
  position: relative;
  display: grid;
  height: 310px;
  place-items: center;
  overflow: hidden;
}

.auction-image > img {
  width: 170px;
  max-height: 265px;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 40px #000a;
}

.auction-image > span {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  padding: 6px 10px;
  border-radius: 99px;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}

.auction-content {
  padding: 20px;
}

.auction-content > small {
  color: #9b7a42;
  font-weight: 800;
}

.auction-content h3 {
  min-height: 48px;
  margin: 7px 0 14px;
  font-size: 19px;
}

.auction-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.auction-stats div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  border-radius: 10px;
  background: #f4f1eb;
}

.auction-stats span {
  color: #777269;
  font-size: 8px;
}

.auction-stats strong {
  overflow: hidden;
  color: #171819;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auction-bid-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 13px;
}

.auction-bid-form input {
  min-width: 0;
  border: 1px solid #d8d2c6;
  border-radius: 10px;
  padding: 0 12px;
}

.club-services {
  padding-top: 0;
}

.club-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.club-service-card {
  display: grid;
  align-content: start;
  gap: 11px;
  padding: 25px;
  border: 1px solid #ddd8ce;
  border-radius: 20px;
  background: #fff;
}

.club-service-card h2 {
  margin: 4px 0;
}

.club-service-card p {
  margin: 0;
  color: #77736b;
}

.club-service-card input {
  min-height: 47px;
  border: 1px solid #ddd6c9;
  border-radius: 11px;
  padding: 0 13px;
}

.install-service {
  background: #111214;
  color: #fff;
}

.install-service p {
  color: #aaa69e;
}

.install-service > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.certificate-mini {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 3px;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  background: #edf6ed;
  color: #285c31;
}

.certificate-mini img {
  width: 64px;
  height: 64px;
  border-radius: 5px;
}

.certificate-mini span {
  display: grid;
  gap: 3px;
}

.product-certificate-badge {
  display: inline-grid;
  gap: 2px;
  margin: 4px 0 12px;
  padding: 9px 12px;
  border: 1px solid #b98e42;
  border-radius: 10px;
  background: linear-gradient(135deg, #171714, #302716);
  color: #fff;
  text-decoration: none;
}

.product-certificate-badge span {
  color: #d9ad5d;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .16em;
}

.product-certificate-badge strong {
  font-size: 10px;
}

.certificate-mini small {
  font-size: 8px;
}

.showcase-section {
  padding-top: 0;
}

.showcase-community-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.showcase-card-community {
  overflow: hidden;
  border: 1px solid #ded8cb;
  border-radius: 20px;
  background: #fff;
}

.showcase-cover {
  position: relative;
  height: 230px;
  background: #111;
}

.showcase-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.showcase-cover span {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  padding: 6px 9px;
  border-radius: 99px;
  background: #111d;
  color: #e2ba69;
  font-size: 8px;
  font-weight: 900;
}

.showcase-card-community > div:last-child {
  padding: 18px;
}

.showcase-card-community h3 {
  margin: 5px 0 8px;
}

.showcase-card-community p {
  min-height: 42px;
  color: #77736b;
  font-size: 12px;
}

.showcase-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #eee9df;
  padding-top: 12px;
}

.showcase-footer span {
  color: #9b7a42;
  font-size: 9px;
  font-weight: 900;
}

.showcase-footer button {
  border: 0;
  background: transparent;
  color: #928f88;
  cursor: pointer;
}

.showcase-footer button.liked {
  color: #a51f28;
}

.publish-showcase-form {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 28px;
  margin-top: 24px;
  padding: clamp(24px, 4vw, 40px);
  border-radius: 24px;
  background: #121314;
  color: #fff;
}

.publish-showcase-form p {
  color: #aaa69e;
}

.publish-showcase-form .form-field label {
  color: #cbc7bd;
}

.publish-showcase-form input,
.publish-showcase-form textarea {
  border-color: #ffffff1c;
  background: #ffffff0c;
  color: #fff;
}

.account-rank-mini {
  display: grid;
  gap: 5px;
  margin: 15px 0;
  padding: 14px;
  border: 1px solid #b78e4866;
  border-radius: 14px;
  background: linear-gradient(135deg, #161719, #2d2418);
  color: #fff;
  text-decoration: none;
}

.account-rank-mini span,
.account-rank-mini small {
  color: #c8a159;
  font-size: 9px;
}

.account-assets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.account-assets-grid article {
  display: grid;
  gap: 4px;
  padding: 15px;
  border-radius: 13px;
  background: #f2efe8;
}

.account-assets-grid strong {
  color: #9f2028;
  font-size: 25px;
}

.payout-choice > div {
  display: flex;
  gap: 8px;
}

.payout-choice > div label {
  flex: 1;
  cursor: pointer;
}

.payout-choice input {
  position: absolute;
  opacity: 0;
}

.payout-choice span {
  display: grid;
  min-height: 50px;
  place-items: center;
  border: 1px solid #d8d2c7;
  border-radius: 11px;
  font-weight: 800;
}

.payout-choice input:checked + span {
  border-color: #a62028;
  background: #a620280d;
  color: #9c1e26;
}

.sell-smart-prices {
  display: flex;
  gap: 8px;
  margin-top: 9px;
}

.sell-smart-prices span {
  padding: 7px 10px;
  border-radius: 9px;
  background: #f0ece3;
}

.operations-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.operation-card {
  min-width: 0;
}

.compact-operation-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}

.compact-operation-form input,
.compact-operation-form select {
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--admin-line, #ddd);
  border-radius: 8px;
  padding: 0 10px;
}

.admin-showcase-list {
  display: grid;
  gap: 8px;
}

.admin-showcase-review {
  display: grid;
  grid-template-columns: 55px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--admin-line, #ddd);
  border-radius: 10px;
}

.admin-showcase-review img {
  width: 55px;
  height: 55px;
  border-radius: 8px;
  object-fit: cover;
}

.admin-showcase-review small {
  display: block;
  margin-top: 4px;
  color: var(--admin-muted, #777);
}

.admin-showcase-review > div:last-child {
  display: flex;
  gap: 5px;
}

.staff-admin-form {
  margin-bottom: 18px;
}

.staff-permissions > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.staff-permissions label {
  cursor: pointer;
}

.staff-permissions input {
  position: absolute;
  opacity: 0;
}

.staff-permissions span {
  display: block;
  padding: 7px 10px;
  border: 1px solid var(--admin-line, #ddd);
  border-radius: 8px;
  font-size: 9px;
}

.staff-permissions input:checked + span {
  border-color: #ab2831;
  background: #ab283116;
  color: #b63840;
}

@media (max-width: 1120px) {

  .auction-grid,
  .showcase-community-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .tools-grid,
  .operations-admin-grid {
    grid-template-columns: 1fr;
  }

  .scanner-tool,
  .want-list-tool {
    grid-column: auto;
  }

  .scanner-workspace,
  .publish-showcase-form {
    grid-template-columns: 1fr;
  }

  .want-list-form {
    grid-template-columns: 1fr;
  }

  .club-services-grid {
    grid-template-columns: 1fr 1fr;
  }

  .install-service {
    grid-column: span 2;
  }
}

@media (max-width: 650px) {
  .tool-panel {
    padding: 18px;
    border-radius: 18px;
  }

  .scanner-result-card {
    grid-template-columns: 1fr;
  }

  .scanner-card-visual {
    width: min(230px, 72%);
    margin: auto;
  }

  .smart-valuation,
  .want-list-summary,
  .account-assets-grid {
    grid-template-columns: 1fr;
  }

  .want-list-results {
    grid-template-columns: 1fr;
  }

  .auction-grid,
  .showcase-community-grid,
  .club-services-grid {
    grid-template-columns: 1fr;
  }

  .install-service {
    grid-column: auto;
  }

  .rank-pass {
    grid-template-columns: 1fr;
  }

  .rank-numbers {
    justify-content: space-between;
  }

  .club-login-callout {
    align-items: flex-start;
    flex-direction: column;
  }

  .auction-image {
    height: 280px;
  }

  .condition-score-grid,
  .compact-operation-form {
    grid-template-columns: 1fr;
  }

  .tool-actions,
  .payout-choice > div {
    flex-direction: column;
  }
}

/* ===== Tournament desk, live board and the player match page ===== */

.tour-head-panel .form-field {
  max-width: 460px;
}

.tour-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.tour-stat {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tour-stat small {
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tour-stat strong {
  color: var(--gold-light);
  font-size: 1.15rem;
}

.tour-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.tour-announce {
  background: rgba(214, 169, 67, 0.14);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-top: 14px;
  color: var(--gold-light);
}

.tour-champion {
  background: linear-gradient(120deg, rgba(214, 169, 67, 0.24), rgba(184, 32, 37, 0.16));
  border: 1px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 1.1rem;
  color: var(--gold-light);
}

.tour-table td,
.tour-table th {
  white-space: nowrap;
}

.tour-table .tour-player {
  white-space: normal;
  min-width: 140px;
  font-weight: 600;
}

.tour-table .pts {
  font-weight: 700;
  color: var(--gold-light);
}

.tour-table tr.row-open td {
  background: rgba(214, 169, 67, 0.06);
}

.tour-table tr.row-conflict td {
  background: rgba(225, 58, 63, 0.14);
}

.tour-table tr.row-dropped td {
  opacity: 0.5;
}

.tour-table tr.me td {
  background: rgba(214, 169, 67, 0.18);
}

.tour-flag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.72rem;
  color: var(--muted);
}

.tour-flag.danger {
  border-color: var(--red-bright);
  color: var(--red-bright);
}

.tour-code {
  font-family: "Consolas", "Courier New", monospace;
  letter-spacing: 0.14em;
  background: rgba(214, 169, 67, 0.16);
  border-radius: 6px;
  padding: 2px 8px;
  color: var(--gold-light);
}

.tour-hint {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 10px 0 0;
}

.tour-check {
  display: inline-flex;
  cursor: pointer;
}

.tour-check input {
  width: 22px;
  height: 22px;
  accent-color: var(--gold);
  cursor: pointer;
}

.customer-lookup-form {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.customer-lookup-form .form-field {
  flex: 1 1 260px;
  margin: 0;
}

/* Player-facing */

.event-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.event-card-actions .button {
  flex: 1 1 auto;
}

/* These two modals carry their own dark surface, so the light modal card behind them steps aside. */
.modal-card.tour-board-wrap,
.modal-card.tour-code-wrap {
  width: min(720px, 100%);
  background: transparent;
  border: none;
  box-shadow: none;
}

.event-code-modal,
.tour-board-modal {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  color: var(--cream);
  position: relative;
  width: 100%;
}

.event-code-value {
  margin: 18px 0;
  text-align: center;
}

.event-code-value code {
  font-family: "Consolas", "Courier New", monospace;
  font-size: 2.4rem;
  letter-spacing: 0.34em;
  color: var(--gold-light);
  background: rgba(214, 169, 67, 0.12);
  border: 1px dashed var(--gold);
  border-radius: var(--radius-md);
  padding: 14px 20px 14px 34px;
  display: inline-block;
}

.tour-board-modal h3 {
  margin: 22px 0 10px;
  color: var(--gold-light);
}

.player-code-layout {
  display: flex;
  justify-content: center;
}

.player-code-card {
  max-width: 480px;
  width: 100%;
}

.player-match-layout {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.player-match-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px;
  color: var(--cream);
}

.player-match-card.bye {
  text-align: center;
  border-color: var(--gold);
}

.player-versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
  text-align: center;
}

.player-versus small {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.player-versus strong {
  font-size: 1.25rem;
  color: var(--gold-light);
}

.player-vs {
  font-weight: 800;
  color: var(--red-bright);
  letter-spacing: 0.1em;
}

.player-result-line {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold-light);
}

.player-result-line.danger {
  color: var(--red-bright);
}

.player-report-form {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 8px;
}

.player-report-form select {
  font-size: 1.2rem;
  text-align: center;
}

.player-report-state {
  text-align: center;
  color: var(--muted);
  font-size: 0.86rem;
  margin: 10px 0 0;
}

.player-rank-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.player-rank-strip > div {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px;
  text-align: center;
}

.player-rank-strip small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.player-rank-strip strong {
  font-size: 1.3rem;
  color: var(--gold-light);
}

.account-tournaments {
  margin-top: 28px;
}

.account-tournament-list {
  display: grid;
  gap: 12px;
}

.account-tournament-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}

.account-tournament-card h3 {
  margin: 4px 0;
}

.account-tournament-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

@media (max-width: 700px) {
  .tour-controls .button {
    flex: 1 1 100%;
  }

  .player-versus {
    grid-template-columns: 1fr;
  }

  .player-rank-strip {
    gap: 8px;
  }

  .player-rank-strip > div {
    padding: 10px 6px;
  }

  .player-rank-strip strong {
    font-size: 1.05rem;
  }

  .player-rank-strip .tour-code {
    padding: 2px 4px;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
  }

  .event-code-value code {
    font-size: 1.7rem;
    letter-spacing: 0.2em;
  }

  .account-tournament-card {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ===== WhatsApp one-time codes ===== */

.auth-tabs {
  display: flex;
  gap: 6px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 16px;
}

.auth-tabs button {
  flex: 1;
  border: none;
  background: transparent;
  padding: 9px 10px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
  color: var(--muted);
}

.auth-tabs button.active {
  background: var(--white);
  color: #191815;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.otp-input {
  font-family: "Consolas", "Courier New", monospace;
  font-size: 1.5rem;
  letter-spacing: 0.5em;
  text-align: center;
  direction: ltr;
}

.button-link {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: none;
  border: none;
  color: var(--red);
  font: inherit;
  font-size: 0.86rem;
  text-decoration: underline;
  cursor: pointer;
}

.verify-phone-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  background: linear-gradient(120deg, rgba(214, 169, 67, 0.16), rgba(184, 32, 37, 0.1));
  border: 1px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin-top: 24px;
}

.verify-phone-banner h3 {
  margin: 4px 0;
}

.verify-phone-banner p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 52ch;
}

.verify-phone-banner small {
  display: block;
  margin-top: 6px;
  font-weight: 600;
}

.verify-phone-action {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.verify-phone-action .otp-input {
  width: 150px;
  font-size: 1.1rem;
  letter-spacing: 0.3em;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.tour-flag.verified {
  border-color: #2f8f4e;
  color: #2f8f4e;
}

.otp-modal .otp-step[hidden] {
  display: none !important;
}

@media (max-width: 700px) {
  .verify-phone-banner {
    flex-direction: column;
    align-items: stretch;
  }

  .verify-phone-action .otp-input {
    flex: 1;
  }
}

/* ===== Round clock ===== */

.round-clock {
  font-family: "Consolas", "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.04em;
  direction: ltr;
  display: inline-block;
  color: var(--gold-light);
}

.round-clock.is-warning {
  color: #e0a03c;
}

.round-clock.is-expired {
  color: var(--red-bright);
  animation: clock-flash 1.4s ease-in-out infinite;
}

.round-clock.is-paused,
.round-clock.is-idle {
  color: var(--muted);
}

@keyframes clock-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .round-clock.is-expired {
    animation: none;
  }
}

.round-clock-note {
  margin-inline-start: 8px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.tour-timer {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-top: 14px;
}

.tour-timer-face {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}

.tour-timer-face small {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tour-timer-face strong {
  font-size: 2rem;
  line-height: 1.1;
}

.tour-timer-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.tour-timer-presets,
.tour-timer-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tour-timer-presets span {
  color: var(--muted);
  font-size: 0.76rem;
  margin-inline-end: 4px;
}

.player-clock-bar {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 14px 20px;
}

.player-clock-bar small {
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.player-clock-bar .round-clock {
  font-size: 2.4rem;
}

.tour-board-modal .player-clock-bar {
  background: var(--panel-2);
  margin-bottom: 4px;
}

@media (max-width: 700px) {
  .tour-timer {
    flex-direction: column;
    align-items: stretch;
  }

  .tour-timer-presets .button,
  .tour-timer-actions .button {
    flex: 1;
  }

  .player-clock-bar .round-clock {
    font-size: 2rem;
  }
}

/* ===== Big screen ===== */

.tv-shell {
  background: radial-gradient(circle at 50% 0%, #1b1b22 0%, var(--black) 70%);
  color: var(--cream);
  padding: 40px clamp(20px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.tv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}

.tv-head h1 {
  margin: 4px 0 0;
  font-size: clamp(1.8rem, 4vw, 3rem);
  color: var(--gold-light);
}

.tv-clock .round-clock {
  font-size: clamp(2rem, 5vw, 3.6rem);
}

.tv-announce {
  background: rgba(214, 169, 67, 0.14);
  border: 1px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  font-size: clamp(1rem, 2vw, 1.4rem);
  color: var(--gold-light);
}

.tv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 16px;
  flex: 1;
  align-content: start;
}

.tv-table {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tv-table-no {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.tv-versus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: clamp(1.1rem, 2.2vw, 1.9rem);
}

.tv-versus strong {
  color: var(--gold-light);
  flex: 1;
}

.tv-versus strong:last-child {
  text-align: end;
}

.tv-versus em {
  font-style: normal;
  font-weight: 800;
  color: var(--red-bright);
  letter-spacing: 0.1em;
}

.tv-blank {
  flex: 1;
  color: rgba(255, 255, 255, 0.16);
  letter-spacing: 0.3em;
}

@keyframes tv-pop {
  0% { transform: scale(0.86); opacity: 0; }
  60% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}

.tv-progress {
  text-align: center;
  color: var(--muted);
  letter-spacing: 0.2em;
}

.tv-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.tv-countdown {
  text-align: center;
}

.tv-pick {
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tv-pick-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .tv-pop, .tv-count-number { animation: none; }
}

/* ===== Reporting your own result ===== */

.player-report-ask {
  text-align: center;
  font-weight: 700;
  margin: 0 0 12px;
}

.report-choice {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 12px;
}

.report-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.report-option span {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  border: 2px solid var(--line);
  font-size: 1.6rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.report-option input:checked + span {
  border-color: var(--gold);
  background: rgba(214, 169, 67, 0.18);
  color: var(--gold-light);
}

.report-option input:focus-visible + span {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}

.player-report-hint {
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0 0 14px;
}

.tv-waiting {
  margin: auto;
  text-align: center;
}

.tv-waiting strong {
  display: block;
  font-size: clamp(4rem, 16vw, 12rem);
  line-height: 1;
  color: var(--gold-light);
}

.tv-waiting span {
  color: var(--muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.tv-pick-list .button small {
  opacity: 0.6;
  font-size: 0.75rem;
}

/* ===== The cinematic reveal ===== */

.tv-cinema {
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.tv-cinema::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: conic-gradient(from 0deg, transparent 0 12%, rgba(214, 169, 67, 0.09) 14%, transparent 16% 100%);
  animation: tv-sweep 6s linear infinite;
  pointer-events: none;
}

@keyframes tv-sweep {
  to { transform: rotate(360deg); }
}

.tv-reveal-one {
  position: relative;
  z-index: 1;
  width: min(1100px, 92vw);
}

.tv-duel {
  display: grid;
}

.tv-duelist {
  font-weight: 800;
  line-height: 1.05;
  color: var(--gold-light);
  text-shadow: 0 0 40px rgba(214, 169, 67, 0.35);
}

@keyframes tv-in-left {
  from { transform: translateX(-14%); opacity: 0; }
}

@keyframes tv-in-right {
  from { transform: translateX(14%); opacity: 0; }
}

.tv-vs {
  font-weight: 900;
  color: var(--red-bright);
  letter-spacing: 0.2em;
}

@keyframes tv-vs-pop {
  from { transform: scale(0.2) rotate(-12deg); opacity: 0; }
}

.tv-bye {
  font-size: clamp(1.1rem, 3vw, 2rem);
  color: var(--gold);
  letter-spacing: 0.1em;
}

.tv-count-number {
  font-weight: 900;
  line-height: 1;
  color: var(--gold-light);
  text-shadow: 0 0 70px rgba(214, 169, 67, 0.45);
  animation: tv-count 460ms cubic-bezier(0.2, 1, 0.3, 1);
}

@keyframes tv-count {
  0% { transform: scale(2.6); opacity: 0; filter: blur(14px); }
  45% { opacity: 1; filter: blur(0); }
  100% { transform: scale(1); opacity: 1; }
}

.tv-sealed {
  opacity: 0.35;
}

.tv-sealed .tv-blank {
  letter-spacing: 0.35em;
  color: rgba(255, 255, 255, 0.2);
}

.tv-result {
  font-size: 0.82rem;
  color: var(--gold);
  letter-spacing: 0.06em;
}

.button-xl {
  font-size: 1.15rem;
  padding: 16px 34px;
}

@media (prefers-reduced-motion: reduce) {
  .tv-cinema::before,
  .tv-duelist.left, .tv-duelist.right, .tv-vs, .tv-count-number { animation: none; }
}

/* ===== Big screen: take the whole display ===== */

body.tv-mode {
  overflow: hidden;
  background: #05050a;
}

body.tv-mode .page-shell,
body.tv-mode main#app {
  margin: 0;
  padding: 0;
}

.tv-shell {
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
}

/* The cinema stage fills the viewport rather than sitting in the page flow. */
.tv-cinema {
  position: fixed;
  inset: 0;
  z-index: 9000;
  min-height: 0;
  padding: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(214, 169, 67, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, #14141d 0%, #05050a 70%);
}

/* A slow vignette so the centre reads first. */
.tv-cinema::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.65) 100%);
}

.tv-countdown,
.tv-reveal-one {
  position: relative;
  z-index: 2;
  width: min(1400px, 94vw);
  text-align: center;
}

.tv-countdown .eyebrow,
.tv-reveal-one .eyebrow {
  font-size: clamp(0.8rem, 1.6vw, 1.3rem);
  letter-spacing: 0.32em;
  color: var(--gold);
  opacity: 0.8;
}

.tv-count-number {
  font-size: min(48vh, 40vw);
  margin: 2vh 0;
}

.tv-countdown p {
  font-size: clamp(1rem, 2.2vw, 1.8rem);
  color: var(--muted);
  letter-spacing: 0.18em;
  margin: 0;
}

/* Each pairing gets the full stage. */
.tv-duel {
  margin-top: 4vh;
  gap: 2vh;
}

.tv-duelist {
  font-size: min(11vh, 8vw);
  padding: 0 2vw;
  text-wrap: balance;
}

.tv-vs {
  font-size: min(5vh, 4vw);
  position: relative;
}

.tv-vs::before,
.tv-vs::after {
  content: "";
  position: absolute;
  top: 50%;
  width: min(24vw, 260px);
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(214, 169, 67, 0.55));
}

.tv-vs::before { inset-inline-end: calc(50% + 4.5em); transform: scaleX(-1); }
.tv-vs::after  { inset-inline-start: calc(50% + 4.5em); }

.tv-reveal-one .tv-progress {
  margin-top: 5vh;
  font-size: clamp(0.9rem, 1.8vw, 1.4rem);
  letter-spacing: 0.4em;
  color: var(--gold);
  opacity: 0.75;
}

@media (max-width: 700px) {
  .tv-vs::before, .tv-vs::after { display: none; }
}

/* ===== Time called ===== */

.time-call {
  position: fixed;
  z-index: 10000;
  inset-inline: 0;
  top: 8vh;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: time-call-in 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.time-call strong {
  background: linear-gradient(135deg, rgba(214, 169, 67, 0.96), rgba(184, 32, 37, 0.94));
  color: #17130a;
  font-size: clamp(1.4rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.5em 1.2em;
  border-radius: 999px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55), 0 0 0 6px rgba(214, 169, 67, 0.18);
}

.time-call.out {
  animation: time-call-out 700ms ease-in forwards;
}

@keyframes time-call-in {
  from { opacity: 0; transform: translateY(-40px) scale(0.9); }
}

@keyframes time-call-out {
  to { opacity: 0; transform: translateY(-24px); }
}

/* ===== Tournament home ===== */

.tour-home .container { max-width: 860px; }

.tour-home-hero {
  text-align: center;
  padding: 6vh 0 4vh;
}

.tour-home-hero h1 {
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  margin: 8px 0 10px;
}

.tour-home-hero p {
  color: var(--muted);
  margin: 0;
}

.tour-home-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  color: var(--cream);
  text-align: center;
}

.tour-home-card.is-live {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(214, 169, 67, 0.3), 0 24px 70px rgba(0, 0, 0, 0.35);
}

.tour-home-card h2 { margin: 6px 0 4px; color: var(--gold-light); }
.tour-home-card p { margin: 0; color: var(--muted); font-size: 0.9rem; }

.tour-home-stats {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin: 20px 0 6px;
  flex-wrap: wrap;
}

.tour-home-stats small {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tour-home-stats strong { font-size: 1.5rem; color: var(--gold-light); }

.tour-home-clock {
  margin: 14px 0 4px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
}

.tour-home-clock small {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tour-home-clock .round-clock { font-size: 1.9rem; }

.tour-home-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 18px;
}

.tour-home-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.tour-home-tile {
  display: grid;
  gap: 4px;
  justify-items: center;
  text-align: center;
  padding: 20px 14px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: var(--white);
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, border-color 160ms ease;
}

.tour-home-tile:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
}

.tour-home-tile svg { width: 26px; height: 26px; opacity: 0.7; }
.tour-home-tile small { color: var(--muted); font-size: 0.78rem; }

@media (prefers-reduced-motion: reduce) {
  .time-call, .time-call.out, .tour-home-tile { animation: none; transition: none; }
}

/* ===== Reveal polish ===== */

/* The stage brightens as a pairing lands, then settles. */
.tv-reveal-one {
  animation: stage-flash 900ms ease-out;
}

@keyframes stage-flash {
  0% { filter: brightness(2.2); }
  30% { filter: brightness(1.15); }
  100% { filter: brightness(1); }
}

.tv-duelist {
  animation-fill-mode: backwards;
}

/* Names arrive with a little blur, as if racking into focus. */
@keyframes tv-in-left {
  from { transform: translateX(-16%) scale(0.96); opacity: 0; filter: blur(10px); }
  to { transform: none; opacity: 1; filter: blur(0); }
}

@keyframes tv-in-right {
  from { transform: translateX(16%) scale(0.96); opacity: 0; filter: blur(10px); }
  to { transform: none; opacity: 1; filter: blur(0); }
}

.tv-duelist.left { animation: tv-in-left 620ms cubic-bezier(0.16, 1, 0.3, 1); }
.tv-duelist.right { animation: tv-in-right 620ms 200ms backwards cubic-bezier(0.16, 1, 0.3, 1); }

/* The VS lands last and hard. */
.tv-vs {
  animation: tv-vs-pop 460ms 420ms backwards cubic-bezier(0.2, 1.6, 0.35, 1);
}

@keyframes tv-vs-pop {
  from { transform: scale(2.4) rotate(-8deg); opacity: 0; filter: blur(6px); }
  to { transform: none; opacity: 1; filter: blur(0); }
}

.tv-vs::before, .tv-vs::after {
  animation: rule-draw 520ms 640ms backwards ease-out;
  transform-origin: inline-start;
}

@keyframes rule-draw {
  from { opacity: 0; transform: scaleX(0); }
}

.tv-vs::before { transform-origin: inline-end; }

/* Tables settling into the grid after the reveal. */
.tv-table { animation: table-settle 420ms backwards ease-out; }

@keyframes table-settle {
  from { opacity: 0; transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
  .tv-reveal-one, .tv-duelist.left, .tv-duelist.right, .tv-vs,
  .tv-vs::before, .tv-vs::after, .tv-table { animation: none; }
}

/* =========================================================
   ACS LIGHT — white surfaces, one blue, quiet type
   Sits last so it settles every layer above it. The earlier token names are pointed at the
   new palette, so rules that still read --gold or --red come out blue. The big screen keeps
   its dark stage, because it runs in a dim room, and only trades its gold for blue.
   ========================================================= */
:root {
  --bg: #ffffff;
  --bg-soft: #f5f5f7;
  --bg-tint: #f3f7ff;
  --surface: #ffffff;
  --blue: #1f5bd8;
  --blue-hover: #1749b5;
  --blue-soft: #eaf1ff;
  --blue-line: #c8d8fb;
  --danger: #d70015;
  --danger-soft: #fff1f2;
  --success: #1a7f45;
  --success-soft: #e9f7ef;
  --warning: #a35a00;
  --warning-soft: #fff4e5;
  --focus-ring: 0 0 0 4px rgba(31, 91, 216, 0.2);
  --radius-sm: 10px;
  --container: min(1200px, calc(100% - 40px));

  --gold: var(--blue);
  --gold-light: var(--blue);
  --gold-dark: var(--navy);
  --red: var(--blue);
  --red-bright: #3f74e6;
  --cream: #ffffff;
  --paper: var(--bg-soft);
  --muted: var(--text-3);
  --line: var(--hairline);
  --shadow: var(--shadow-md);
  --panel: #ffffff;
  --panel-2: var(--bg-soft);
}

.tv-shell,
.tv-cinema {
  --panel: #16161c;
  --panel-2: #1e1e26;
  --gold: #8fb0ff;
  --gold-light: #c2d3ff;
  --gold-dark: #5b82e0;
  --red: #5b8def;
  --red-bright: #8fb0ff;
  --cream: #f5f5f7;
  --line: rgba(143, 176, 255, 0.22);
}

/* ---------- Base ---------- */
html,
body {
  background: var(--bg);
}

body {
  color: var(--text);
  font-size: 16px;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

[dir="ltr"] body {
  letter-spacing: -0.008em;
}

::selection {
  background: rgba(31, 91, 216, 0.16);
  color: var(--text);
}

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

.skip-link {
  background: var(--blue);
  color: #fff;
}

/* Arabic joins its letters, so tightened tracking pulls words apart. */
[dir="rtl"] :is(h1, h2, h3, h4, .section-title, .hero h1, .page-hero h1, .section-kicker, .eyebrow) {
  letter-spacing: 0;
}

/* ---------- Header ---------- */
.announcement-bar {
  letter-spacing: 0;
}

.language-switch {
  color: var(--blue);
  font-weight: 600;
}

.site-header {
  color: var(--text);
  box-shadow: none;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.header-main {
  height: var(--header-height);
  gap: 28px;
}

.brand {
  gap: 10px;
}

.brand img {
  width: 40px;
  height: 40px;
  border: 0;
  box-shadow: 0 1px 4px rgba(13, 42, 107, 0.18);
}

.brand:hover img {
  transform: none;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(13, 42, 107, 0.28);
}

.brand-copy strong {
  color: var(--navy);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.brand-copy small {
  color: var(--text-3);
  letter-spacing: 0.08em;
}

.desktop-nav a {
  font-size: 14px;
  transition: color 160ms ease;
}

.desktop-nav a::after {
  content: none;
}

.icon-button,
.cart-button {
  border: 0;
  background: transparent;
  color: var(--text);
}

.icon-button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}

.icon-button:hover,
.cart-button:hover {
  border-color: transparent;
  background: var(--bg-soft);
  color: var(--text);
}

.cart-button {
  min-height: 38px;
  padding: 6px 8px 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

[dir="ltr"] .cart-button {
  padding: 6px 14px 6px 8px;
}

.cart-button b {
  min-width: 24px;
  height: 24px;
}

.mobile-menu-button span {
  background: var(--text);
}

.mobile-nav {
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.06);
}

.mobile-nav a {
  padding: 13px 6px;
  border-bottom: 1px solid var(--hairline);
  color: var(--text);
  font-size: 15px;
}

.mobile-nav a.active {
  color: var(--blue);
}

.global-search {
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--hairline);
  color: var(--text);
}

.global-search-inner input {
  background: transparent;
  color: var(--text);
}

.global-search-inner svg {
  color: var(--text-3);
}

.global-search-inner button {
  color: var(--blue);
}

/* ---------- Buttons ---------- */
.button {
  padding: 10px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow: none;
  font-size: 15px;
  letter-spacing: 0;
}

.button:hover {
  transform: none;
}

.button-sm {
  padding: 6px 15px;
  border-radius: 999px;
  font-size: 13px;
}

.button-red,
.button-primary,
.hero-actions .button-primary,
.account-register-card .button-primary {
  border-color: transparent;
  background: var(--blue);
  color: #fff;
  box-shadow: none;
}

.button-red:hover,
.button-primary:hover,
.hero-actions .button-primary:hover,
.account-register-card .button-primary:hover {
  background: var(--blue-hover);
  color: #fff;
}

.button-light-outline {
  border-color: transparent;
}

.button:focus-visible {
  box-shadow: var(--focus-ring);
  outline: none;
}

/* An icon with no size of its own grew to fill the button, which is what made the shop's filter buttons tower on a phone. */
.button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.button-sm svg {
  width: 16px;
  height: 16px;
}

/* ---------- Forms ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  box-shadow: var(--focus-ring);
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-3);
}

input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: var(--blue);
}

/* Form fields stretch their inputs; a checkbox stretched to the screen width pushed the staff form off a phone. */
.form-field input[type="checkbox"],
.form-field input[type="radio"] {
  width: auto;
  min-height: 0;
  flex: 0 0 auto;
}

.form-field label {
  color: var(--text-2);
  font-weight: 600;
}

/* ---------- Shared sections ---------- */

.section-kicker,
.eyebrow {
  color: var(--blue);
}

.section-title {
  color: var(--text);
  letter-spacing: -0.025em;
}

.section-subtitle {
  color: var(--text-2);
}

.text-link {
  color: var(--blue);
  font-weight: 500;
}

.text-link:hover {
  color: var(--blue-hover);
}

.section-dark {
  color: var(--text);
}

.section-dark::before {
  content: none;
}

.section-dark .section-kicker,
.section-dark .eyebrow,
.section-dark .text-link {
  color: var(--blue);
}

.section-dark .section-title {
  color: var(--text);
}

.section-dark .section-subtitle {
  color: var(--text-2);
}

.muted {
  color: var(--text-3);
}

/* ---------- Home hero ---------- */
.hero {
  min-height: 0;
  color: var(--text);
}

.hero::before,
.hero::after,
.hero-logo-glow {
  content: none;
  display: none;
}

.hero-inner {
  gap: 56px;
}

.hero-pill {
  color: var(--navy);
  font-weight: 600;
}

.hero-pill i {
  background: var(--blue);
  box-shadow: none;
}

.hero h1 {
  color: var(--text);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

[dir="rtl"] .hero h1 {
  line-height: 1.16;
}

.hero h1 .gold-text {
  background: linear-gradient(90deg, var(--navy), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--blue);
  -webkit-text-fill-color: transparent;
}

.hero h1 .red-mark {
  color: var(--blue);
}

.hero-description {
  color: var(--text-2);
  line-height: 1.7;
}

.hero-trust .trust-item {
  border-color: transparent;
  color: var(--text-2);
}

.hero-trust .trust-item svg {
  color: var(--blue);
}

.showcase-card {
  background: #fff;
}

.showcase-card img {
  background: #fff;
}

/* ---------- Shipping strip ---------- */
.shipping-grid {
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--text);
}

.shipping-card {
  border-color: transparent;
  background: transparent;
}

.shipping-card::before {
  content: none;
}

.shipping-card:hover {
  transform: none;
  border-color: transparent;
  background: var(--bg-soft);
}

.shipping-card svg {
  color: var(--blue);
}

.shipping-card strong {
  color: var(--text);
}

.shipping-card small {
  color: var(--text-3);
}

.shipping-card b {
  color: var(--navy);
}

/* ---------- Categories ---------- */
.category-card {
  color: var(--text);
  box-shadow: none;
  transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}

.category-card::before,
.category-card::after {
  content: none;
}

.category-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.category-card .category-icon {
  border: 0;
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.category-count {
  color: var(--text-3);
}

.category-card h3 {
  color: var(--text);
}

.category-arrow {
  border: 0;
  background: #fff;
  color: var(--blue);
  box-shadow: var(--shadow-sm);
}

.category-card:hover .category-arrow {
  background: var(--blue);
  color: #fff;
}

/* ---------- Product cards ---------- */
.product-card {
  background: #fff;
}

.product-media {
  border-bottom: 0;
}

.product-media::after {
  content: none;
}

.badge {
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  font-weight: 600;
  letter-spacing: 0;
}

.badge.gold {
  background: var(--blue-soft);
  color: var(--blue);
}

.badge.red {
  background: var(--danger-soft);
  color: var(--danger);
}

.badge.featured {
  background: var(--navy);
  color: #fff;
}

.badge.preorder {
  background: var(--warning-soft);
  color: var(--warning);
}

.product-wishlist,
.product-quick-add {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.product-wishlist svg,
.product-quick-add svg {
  width: 18px;
  height: 18px;
}

.product-wishlist:hover {
  color: var(--danger);
}

.product-wishlist.active {
  color: var(--danger);
}

.product-quick-add {
  color: #fff;
}

.product-quick-add:hover {
  background: var(--blue-hover);
}

/* ---------- Discovery columns ---------- */
.discovery-card {
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--text);
}

.discovery-card::before {
  content: none;
}

.discovery-head h3 {
  color: var(--text);
}

.discovery-head a {
  color: var(--blue);
}

.discovery-product strong,
.discovery-product b {
  color: var(--text);
}

.discovery-product small {
  color: var(--text-3);
}

.discovery-product:hover {
  background: var(--bg-soft);
}

.discovery-thumb {
  background: var(--bg-soft);
}

/* ---------- Collection banner ---------- */
.collection-banner {
  border: 0;
}

.collection-banner::before {
  content: none;
}

.collection-banner:hover .collection-mark {
  filter: drop-shadow(0 30px 48px rgba(13, 42, 107, 0.3));
}

/* ---------- Community tiles ---------- */
.home-community-card {
  background: var(--bg-soft);
  color: var(--text);
  transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}

.home-community-card::after {
  content: none;
}

.home-community-card:hover {
  transform: translateY(-3px);
  background: #fff;
  box-shadow: var(--shadow-lg);
}

.home-community-card h2 {
  color: var(--text);
}

.home-community-card p {
  color: var(--text-2);
}

/* ---------- Why ACS ---------- */

.benefit-card:hover {
  transform: translateY(-2px);
  background: #fff;
}

.benefit-icon,
.benefit-card:hover .benefit-icon {
  border: 0;
  color: var(--blue);
}

.benefit-card h3 {
  color: var(--text);
}

.benefit-card p {
  color: var(--text-2);
}

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

.footer-brand img {
  box-shadow: 0 2px 10px rgba(13, 42, 107, 0.2);
}

.footer-brand h3,
.footer-column h4 {
  letter-spacing: 0;
}

.social-row a {
  border: 1px solid var(--hairline);
}

/* ---------- Inner page hero ---------- */
.page-hero {
  color: var(--text);
}

.page-hero::before {
  content: none;
}

.page-hero h1 {
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.page-hero p {
  color: var(--text-2);
}

.breadcrumb,
.breadcrumb a,
.product-detail-hero .breadcrumb,
.product-detail-hero .breadcrumb a {
  color: var(--text-3);
}

.breadcrumb a:hover {
  color: var(--blue);
}

/* ---------- Product page ---------- */
.product-detail-hero {
  color: var(--text);
}

.product-detail-main {
  border: 1px solid var(--hairline);
}

.product-detail-copy .product-spec,
.product-detail-copy .product-variant-row {
  border-color: var(--hairline);
  background: var(--bg-soft);
}

.product-detail-copy .product-spec span,
.product-detail-copy .product-variant-row small {
  color: var(--text-3);
}

.product-detail-copy .product-spec strong,
.product-detail-copy .product-variants h3,
.product-detail-copy .product-variant-row strong {
  color: var(--text);
}

.product-detail-copy .product-variant-row > span {
  background: #fff;
  color: var(--text);
}

.product-detail-copy h1 {
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.product-detail-copy .product-description {
  color: var(--text-2);
}

.product-detail-copy .product-specs {
  border-color: var(--hairline);
}

.product-rating-summary {
  color: var(--text-3);
}

.product-detail-price strong {
  letter-spacing: -0.02em;
}

.product-detail-price del,
.product-old-price {
  color: var(--text-3);
}

/* ---------- Dark panels across the shop, brought into the light ---------- */
.account-login-card,
.admin-login-card,
.contact-info,
.custom-deck-aside,
.club-login-callout,
.install-service,
.publish-showcase-form {
  border: 1px solid var(--hairline);
  background: var(--bg-soft);
  color: var(--text);
  box-shadow: none;
}

.account-login-card h2,
.admin-login-card h1,
.contact-info h2,
.contact-info h3,
.custom-deck-aside h2,
.custom-deck-aside h3,
.club-login-callout h2,
.install-service h2,
.publish-showcase-form h2 {
  color: var(--text);
}

.account-login-card > p,
.admin-login-card p,
.contact-info > p,
.custom-deck-aside p,
.install-service p,
.publish-showcase-form p,
.club-service-card p {
  color: var(--text-2);
}

.account-login-card .form-field label,
.admin-login-card .form-field label,
.publish-showcase-form .form-field label {
  color: var(--text-2);
}

.account-login-card .form-field input,
.admin-login-card .form-field input,
.publish-showcase-form input,
.publish-showcase-form textarea {
  border-color: var(--hairline-strong);
  background: #fff;
  color: var(--text);
}

.club-login-callout > span {
  color: var(--blue);
}

.admin-login {
  background: radial-gradient(60% 50% at 50% 0%, rgba(31, 91, 216, 0.09), transparent 70%), var(--bg-soft);
}

.admin-login-card {
  background: #fff;
  box-shadow: var(--shadow-lg);
}

.about-visual {
  background: radial-gradient(circle at 50% 44%, rgba(31, 91, 216, 0.14), transparent 55%), var(--bg-soft);
}

.about-visual::before {
  border-color: rgba(31, 91, 216, 0.14);
}

.event-date {
  background: var(--blue-soft);
  color: var(--navy);
}

.sell-process-strip {
  background: var(--bg-soft);
  color: var(--text);
}

.tool-number {
  background: var(--blue-soft);
  color: var(--blue);
}

.camera-drop {
  border-color: var(--blue-line);
  background: var(--bg-tint);
  color: var(--text);
}

.camera-drop > span {
  color: var(--blue);
}

.camera-drop small {
  color: var(--text-3);
}

.auction-image {
  background: radial-gradient(circle, #ffffff 0%, var(--bg-soft) 70%);
}

.auction-image > span {
  background: var(--danger);
}

/* ---------- Empty states and small marks ---------- */
.empty-state .empty-icon {
  background: var(--blue-soft);
  color: var(--blue);
}

.cart-empty-icon {
  border-color: var(--blue-line);
  background: var(--bg-tint);
  color: var(--blue);
}

.modal-tag {
  border-color: var(--blue-line);
  background: var(--bg-tint);
  color: var(--navy);
}

.price-chart-labels b,
.event-meta svg {
  color: var(--blue);
}

.demo-credential {
  border-color: var(--blue-line);
  color: var(--text-2);
}

.ygo-attribution {
  color: var(--text-3);
}

.ygo-attribution a,
.auction-content > small,
.condition-score b {
  color: var(--blue);
}

.condition-score input {
  accent-color: var(--blue);
}

.tool-empty {
  border-color: var(--hairline);
  background: var(--bg-soft);
}

.tool-empty > span {
  color: var(--blue);
}

.tool-empty p {
  color: var(--text-2);
}

.ydk-file {
  border-color: var(--blue-line);
  background: var(--bg-tint);
}

.ydk-file span {
  color: var(--blue);
}

.ydk-file b {
  color: var(--text-2);
}

.sell-no-card b {
  background: var(--blue-soft);
  color: var(--blue);
}

/* ---------- Sell page steps ---------- */
.sell-process-strip::after {
  content: none;
}

.sell-only-badge {
  border-color: var(--blue-line);
  background: #fff;
  color: var(--navy);
}

.sell-only-badge svg {
  color: var(--blue);
}

.sell-process-grid article {
  border-color: var(--hairline);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.sell-process-grid b,
.custom-process b {
  color: var(--blue);
}

.grading-steps b {
  background: var(--blue);
  color: #fff;
}

.drawer-header h2 small {
  color: var(--text-3);
}

.sell-process-grid h3 {
  color: var(--text);
}

.sell-process-grid p {
  color: var(--text-2);
}

/* ---------- Academy ---------- */
.academy-tool-card {
  border: 1px solid var(--hairline);
  background: linear-gradient(135deg, var(--bg-tint) 0%, #e3ecff 100%);
  color: var(--text);
}

.academy-tool-card::before {
  color: rgba(31, 91, 216, 0.07);
}

.academy-tool-card h2,
.academy-tool-card h3 {
  color: var(--navy);
}

.academy-tool-card p {
  color: var(--text-2);
}

.academy-tool-card .eyebrow {
  color: var(--blue);
}

.article-number {
  color: var(--blue-soft);
}

/* ---------- Admin ---------- */
.admin-sidebar {
  color: var(--text);
}

.stat-icon {
  background: var(--blue-soft);
  color: var(--blue);
}

.stat-icon.red {
  background: var(--danger-soft);
  color: var(--danger);
}

.admin-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border: 1px solid var(--blue-line);
  border-radius: 14px;
  background: var(--bg-tint);
  color: var(--navy);
  font-weight: 600;
}

.contact-message-text {
  max-width: 460px;
  margin: 4px 0 0;
  color: var(--text-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.social-row a[hidden],
.footer-column a[hidden] {
  display: none;
}

.report-bar i {
  background: linear-gradient(#7aa2ff, var(--blue));
}

.report-bar span {
  color: var(--text-3);
}

.visits-panel {
  margin-bottom: 18px;
}

.visits-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 22px;
  align-items: end;
}

.visits-layout .report-chart {
  height: 180px;
}

.visits-note {
  margin: 12px 0 0;
  font-size: 12px;
}

@media (max-width: 840px) {
  .visits-layout {
    grid-template-columns: 1fr;
  }
}

/* ---------- Sell page: the chosen card and the list ---------- */
.sell-selected-card {
  border-bottom-color: var(--hairline);
  background: linear-gradient(135deg, var(--bg-tint) 0%, #e3ecff 100%);
  color: var(--text);
}

.sell-selected-visual {
  background: rgba(255, 255, 255, 0.65);
}

.sell-selected-copy h2 {
  color: var(--text);
}

.sell-selected-copy p {
  color: var(--text-2);
}

.sell-art-choices button {
  border-color: var(--hairline);
  background: #fff;
}

.sell-art-choices button.active {
  border-color: var(--blue);
  box-shadow: var(--focus-ring);
}

.sell-card-result:hover {
  border-color: var(--blue-line);
  background: var(--bg-tint);
}

.sell-card-result > b {
  color: var(--blue);
}

.sell-card-result small {
  color: var(--text-3);
}

.sell-item-form {
  border-bottom: 1px solid var(--hairline);
}

.sell-list {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}

.sell-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.sell-list-head h3,
.sell-contact-title {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 18px;
}

.sell-list-head span {
  color: var(--text-2);
  font-weight: 600;
}

.sell-list-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--bg-soft);
}

.sell-list-item img {
  width: 44px;
  height: 64px;
  border-radius: 6px;
  object-fit: cover;
}

.sell-list-item small {
  display: block;
  color: var(--text-3);
}

.sell-list-hint {
  margin: 10px 0 0;
  font-size: 12px;
}

/* ---------- Free delivery ---------- */
.free-delivery-progress {
  margin: 10px 0 14px;
}

.free-delivery-progress p {
  margin: 0 0 8px;
  color: var(--text-2);
  font-size: 13px;
}

.free-delivery-progress strong {
  color: var(--blue);
}

.free-delivery-progress span {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--blue-soft);
}

.free-delivery-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
  transition: width 0.3s ease;
}

.cart-note.free-delivery-done,
.free-delivery-note {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--success);
  font-weight: 600;
}

.free-delivery-note {
  justify-content: center;
  margin: 10px auto 0;
  color: var(--blue);
  font-size: 14px;
}

.free-delivery-done svg,
.free-delivery-note svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* ---------- WhatsApp orders ---------- */
.whatsapp-order {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  padding: 10px 16px;
  border: 1px solid #bfe8cf;
  border-radius: 999px;
  background: #effaf3;
  color: #137a3f;
  font-weight: 700;
  text-decoration: none;
}

.whatsapp-order:hover {
  background: #e2f6ea;
}

.whatsapp-order svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.google-signin-block {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

.google-signin-block > span {
  color: var(--text-3);
  font-size: 13px;
}

#googleSignIn {
  width: 100%;
  max-width: 340px;
  min-height: 44px;
  display: flex;
  justify-content: center;
}

/* Admin: counter sale */
.counter-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.counter-results {
  display: grid;
  gap: 8px;
  max-height: 60vh;
  overflow: auto;
}

.counter-result {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.counter-result:hover {
  border-color: var(--blue);
}

.counter-result img,
.counter-line img {
  width: 44px;
  height: 60px;
  border-radius: 6px;
  object-fit: contain;
  background: var(--bg-soft);
}

.counter-result span,
.counter-line > div:first-of-type {
  display: grid;
  min-width: 0;
}

.counter-result small,
.counter-line small {
  color: var(--text-3);
  font-size: 12px;
}

.counter-result b {
  color: var(--blue);
}

.counter-lines {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

/* Two rows, so a long card name gets the whole width: the name, then quantity and line total. */
.counter-line {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}

.counter-line img {
  grid-row: 1 / 3;
}

.counter-line > div:first-of-type {
  grid-column: 2 / 4;
}

.counter-line .quantity-control {
  grid-column: 2;
  justify-self: start;
}

.counter-line > b {
  grid-column: 3;
}

.counter-sale .summary-totals {
  margin: 14px 0;
}

.counter-last {
  flex-wrap: wrap;
  gap: 10px;
}

@media (max-width: 860px) {
  .counter-layout {
    grid-template-columns: 1fr;
  }
}

.market-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px dashed var(--blue-line);
  border-radius: 12px;
  background: var(--bg-tint);
  font-size: 13px;
}

.market-hint small {
  flex-basis: 100%;
}

/* Post picture: picking products */
.post-maker h2 {
  margin: 0 0 10px;
}

.post-pick-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  max-height: 46vh;
  overflow: auto;
  padding: 2px;
}

.post-pick {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.post-pick:has(input:checked) {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px var(--blue-soft);
}

.post-pick input {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.post-pick img {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  object-fit: contain;
  background: var(--bg-soft);
}

.post-pick span {
  display: grid;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.post-pick small {
  color: var(--blue);
}

.story-preview.post-preview {
  aspect-ratio: 4 / 5;
}

/* Limited-time offers and coming soon */
.sale-countdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 12px;
  font-weight: 600;
}

.sale-countdown.page {
  margin: 10px 0 4px;
  padding: 6px 12px;
  font-size: 14px;
}

.sale-fields .form-grid {
  margin-top: 6px;
}

.soon-item {
  display: grid;
  gap: 8px;
}

.soon-when {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 700;
}

.soon-when small {
  margin-inline-start: auto;
  color: var(--text-3);
  font-weight: 500;
}

.soon-when svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* The links page the Instagram bio points at */
.links-page {
  display: grid;
  justify-items: center;
  padding: 32px 16px 64px;
  background: linear-gradient(180deg, var(--bg-tint), var(--bg) 60%);
}

.links-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(460px, 100%);
  text-align: center;
}

.links-badge {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
}

.links-card h1 {
  margin: 4px 0 0;
  font-size: 24px;
}

.links-card > p {
  margin: 0;
  color: var(--text-2);
}

.links-perk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  font-size: 13px;
  font-weight: 700;
}

.links-perk svg,
.links-button svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.links-list {
  display: grid;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}

.links-button {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 12px 18px;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: var(--text);
  text-align: start;
  text-decoration: none;
}

.links-button span {
  display: grid;
}

.links-button small {
  color: var(--text-3);
  font-size: 12px;
}

.links-button.primary {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.links-button.primary small {
  color: rgba(255, 255, 255, 0.8);
}

.links-button.chat {
  border-color: #bfe8cf;
  background: #effaf3;
  color: #137a3f;
}

.policy-body {
  max-width: 760px;
}

.policy-body h2 {
  margin: 28px 0 8px;
  font-size: 20px;
}

.policy-body p {
  margin: 0 0 12px;
  color: var(--text-2);
  line-height: 1.8;
}

.settings-wide {
  grid-column: 1 / -1;
}

/* Checkout: transfer payment and the offers consent */
.checkout-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
}

.checkout-consent input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--blue);
}

.transfer-box {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--blue-line);
  border-radius: 16px;
  background: var(--bg-tint);
}

.transfer-box[hidden] {
  display: none;
}

.transfer-details {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.7;
  white-space: pre-line;
  overflow-wrap: anywhere;
  user-select: all;
}

.transfer-box p.muted {
  margin: 0;
  font-size: 13px;
}

.transfer-success {
  max-width: 460px;
  margin: 18px auto 0;
  text-align: start;
}

.transfer-review {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--blue-line);
  border-radius: 14px;
  background: var(--bg-tint);
}

.transfer-review img {
  width: 110px;
  height: 110px;
  border-radius: 10px;
  object-fit: cover;
}

.transfer-review small {
  display: block;
  color: var(--text-3);
}

.paid-note {
  display: block;
  color: var(--success);
  font-weight: 700;
}

.courier-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin-top: 16px;
}

.courier-form .form-field {
  margin: 0;
}

.consent-note {
  margin: 8px 0 0;
  font-size: 12px;
}

.courier-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-tint);
  color: var(--navy);
}

.courier-info svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

@media (max-width: 560px) {
  .courier-form {
    grid-template-columns: 1fr;
  }
}

/* Account: referral code */
.referral-card {
  display: grid;
  gap: 8px;
  margin: 14px 0;
  padding: 16px;
  border: 1px solid var(--blue-line);
  border-radius: 16px;
  background: var(--bg-tint);
  text-align: start;
}

.referral-card > strong {
  color: var(--navy);
  font-size: 16px;
}

.referral-card p {
  margin: 0;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.6;
}

.referral-code {
  display: flex;
  align-items: center;
  gap: 8px;
}

.referral-code code {
  flex: 1 1 auto;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff;
  color: var(--blue);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  direction: ltr;
}

.client-error-message {
  display: block;
  color: var(--danger);
  overflow-wrap: anywhere;
}

.client-errors-panel small {
  display: block;
  overflow-wrap: anywhere;
}

.client-errors-panel details {
  margin-top: 6px;
}

.client-errors-panel pre {
  max-height: 180px;
  overflow: auto;
  margin: 6px 0;
  padding: 10px;
  border-radius: 10px;
  background: var(--bg-soft);
  font-size: 11px;
  white-space: pre-wrap;
  direction: ltr;
  text-align: left;
}

.backups-note {
  margin: -4px 0 12px;
  font-size: 12px;
}

/* Admin: message a customer on WhatsApp */
.chat-customer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 4px 10px;
  border: 1px solid #bfe8cf;
  border-radius: 999px;
  background: #effaf3;
  color: #137a3f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
}

.chat-customer:hover {
  background: #e2f6ea;
}

.chat-customer svg,
.chat-row-action svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

td > .chat-customer,
.low-stock-item .chat-customer {
  display: flex;
  width: max-content;
}

.chat-row-action {
  border-color: #bfe8cf;
  background: #effaf3;
  color: #137a3f;
}

.customer-chat-panel {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #bfe8cf;
  border-radius: 14px;
  background: #f6fcf8;
}

.customer-chat-panel > strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
}

.customer-chat-panel > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.customer-chat-panel .chat-customer {
  padding: 7px 14px;
  font-size: 13px;
}

.custom-request-admin-form > .chat-customer,
.admin-card-offer-head .chat-customer {
  margin: 10px 0 4px;
}

.product-detail-copy .whatsapp-order,
.story-owner-button {
  max-width: 420px;
}

.story-owner-button {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
}

.story-owner-button svg {
  width: 19px;
}

/* ---------- Story picture ---------- */
.story-modal {
  width: min(460px, calc(100vw - 32px));
}

.story-maker h2 {
  margin: 0 0 4px;
}

.story-preview {
  display: grid;
  place-items: center;
  aspect-ratio: 9 / 16;
  max-height: 56vh;
  margin: 14px auto;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: var(--bg-soft);
}

.story-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.story-preview .loading-card {
  width: 70%;
  height: 70%;
}

.story-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.story-actions .button {
  flex: 1 1 160px;
}

.story-actions svg {
  width: 18px;
  height: 18px;
}

/* ---------- Visit sources ---------- */
.visit-sources {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.visit-sources h4 {
  margin: 0 0 10px;
  font-size: 15px;
}

.source-link {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid var(--blue-line);
  border-radius: 14px;
  background: var(--bg-tint);
}

.source-link > div {
  display: grid;
  flex: 1 1 auto;
  gap: 4px;
  min-width: 0;
}

.source-link code {
  overflow: hidden;
  color: var(--navy);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  text-align: start;
}

.source-link small {
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.5;
}

.source-link .button {
  flex: 0 0 auto;
}

/* ---------- Konami importer ---------- */
.konami-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}

.konami-filters button {
  padding: 7px 14px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: #fff;
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.konami-filters button.active {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--blue);
}

.konami-image img {
  object-fit: contain;
  background: #fff;
}

.konami-card .badge {
  margin-inline-start: 6px;
}

.bulk-results {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.bulk-results:empty {
  display: none;
}

.bulk-results li {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--text-2);
}

.bulk-results li.good {
  background: var(--success-soft);
  color: var(--success);
}

.bulk-results li.bad {
  background: var(--danger-soft);
  color: var(--danger);
}

/* A grid item grows to its widest table unless told it may shrink, which pushed the whole
   admin sideways on a phone. With this the table scrolls inside its own panel instead. */
.admin-grid > *,
.admin-panel,
.admin-content > * {
  min-width: 0;
}

.report-product > b {
  color: var(--blue);
}

.report-product > span {
  color: var(--text);
}

/* ---------- Tournament screens a player holds ---------- */
.event-code-modal,
.tour-board-modal,
.player-match-card,
.tour-home-card {
  border: 1px solid var(--hairline);
  color: var(--text);
}

.report-option span {
  color: var(--text);
}

/* ---------- Status colours stay semantic ---------- */
.out-of-stock,
.danger,
.row-action.danger,
.toast.error,
.player-result-line.danger {
  color: var(--danger);
}

.in-stock {
  color: var(--success);
}

.low-stock,
.preorder-stock {
  color: var(--warning);
}

/* ---------- Phone layout ---------- */
@media (max-width: 840px) {

  .hero-visual {
    position: relative;
    inset: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: 400px;
    transform: none;
    opacity: 1;
  }

  [dir="ltr"] .hero-visual {
    transform: none;
  }

  .hero-showcase {
    transform: scale(0.78);
    transform-origin: top center;
  }

  .mobile-nav {
    background: rgba(255, 255, 255, 0.98);
  }

  /* The count was positioned against the header, so it sat in the corner of the screen. */
  .cart-button {
    position: relative;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
  }

  .cart-button b {
    top: -2px;
    inset-inline-end: -2px;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    box-shadow: 0 0 0 2px #fff;
  }
}

@media (max-width: 620px) {

  .hero-visual {
    display: grid;
    height: 330px;
  }

  .hero-showcase {
    transform: scale(0.64);
  }

}

/* ---------- Phone tab bar and buy bar ---------- */
.tab-bar,
.product-buy-bar {
  display: none;
}

@media (max-width: 840px) {
  /* The basket moves to the tab bar, so the header keeps search instead. */
  .header-actions .search-toggle {
    display: grid;
  }

  .header-actions .cart-button {
    display: none;
  }

  .tab-bar {
    position: fixed;
    z-index: 150;
    inset-inline: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--hairline);
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }

  .tab-bar a,
  .tab-bar button {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--text-3);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
  }

  .tab-bar svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.7;
  }

  .tab-bar b {
    position: absolute;
    top: 0;
    inset-inline-start: calc(50% + 4px);
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--blue);
    box-shadow: 0 0 0 2px #fff;
    color: #fff;
    font-size: 10px;
  }

  .tab-bar b[hidden] {
    display: none;
  }

  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  body.tv-mode {
    padding-bottom: 0;
  }

  .product-buy-bar {
    position: fixed;
    z-index: 140;
    inset-inline: 10px;
    bottom: calc(70px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 10px 10px 16px;
    border: 1px solid var(--hairline);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow-lg);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }

  [dir="ltr"] .product-buy-bar {
    padding: 10px 16px 10px 10px;
  }

  .product-buy-bar > div {
    display: grid;
    min-width: 0;
  }

  .product-buy-bar small {
    overflow: hidden;
    color: var(--text-3);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .product-buy-bar strong {
    color: var(--text);
    font-size: 18px;
  }

  .product-buy-bar .button {
    flex: 0 0 auto;
  }

  body:has(.product-buy-bar) {
    padding-bottom: calc(140px + env(safe-area-inset-bottom));
  }

  .toast-region {
    bottom: calc(80px + env(safe-area-inset-bottom));
  }

  body:has(.product-buy-bar) .toast-region {
    bottom: calc(150px + env(safe-area-inset-bottom));
  }
}

/* Two cards a row reads as a shop on a phone; one per row was a scroll of single posters. */
@media (max-width: 390px) {
  .products-grid,
  .shop-main .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* Categories scroll sideways on a phone; a column template would only add empty tracks. */
}

/* =========================================================
   ACS 2026 — the same blue and white, with more character
   ---------------------------------------------------------
   The shop's own Arabic font, a card-shop look (card backs,
   holo accents, a deep navy band and footer), tighter spacing
   so the home page is shorter, and product cards that put the
   card first. Everything below overrides the layers above and
   carries its own phone rules at the end.
   ========================================================= */

@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/plex-arabic-400.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/plex-arabic-600.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/plex-arabic-700.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/plex-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20AA, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/plex-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20AA, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/plex-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20AA, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --font: "Plex Arabic", system-ui, -apple-system, "SF Arabic", "Segoe UI", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --canvas: #f6f8fc;
  --text: #101828;
  --text-2: #475467;
  --text-3: #7a8699;
  --navy: #0b1f4d;
  --blue-deep: #1748b8;
  --violet: #6a4fe0;
  --holo: linear-gradient(120deg, #7cc4ff 0%, #a78bfa 45%, #f9a8d4 70%, #fcd34d 100%);
  --hairline: rgba(16, 24, 40, 0.08);
  --hairline-strong: #d5dbe6;
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.07);
  --shadow-lg: 0 18px 44px rgba(13, 42, 107, 0.14);
  --shadow-blue: 0 10px 24px rgba(31, 91, 216, 0.28);
  --header-height: 68px;
}

body {
  font-family: var(--font);
  background: #fff;
  line-height: 1.65;
}

/* ---------- Header ---------- */
.announcement-bar {
  border-bottom: 0;
  background: linear-gradient(90deg, var(--navy), #17378a 60%, var(--navy));
  color: rgba(255, 255, 255, 0.88);
  font-size: 12.5px;
}

.announcement-inner {
  min-height: 34px;
}

.announcement-bar .language-switch {
  color: #fff;
}

.announcement-divider {
  background: rgba(255, 255, 255, 0.3);
}

.site-header {
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid var(--hairline);
}

.desktop-nav {
  gap: 4px;
}

.desktop-nav a {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--text-2);
  font-weight: 600;
}

.desktop-nav a:hover {
  background: var(--canvas);
  color: var(--text);
}

.desktop-nav a.active {
  background: var(--blue-soft);
  color: var(--blue);
}

.search-toggle .search-hint {
  display: none;
}

.cart-button {
  background: var(--blue);
  color: #fff;
  box-shadow: var(--shadow-blue);
}

.cart-button:hover {
  background: var(--blue-deep);
  color: #fff;
}

.cart-button b {
  background: #fff;
  color: var(--blue);
}

/* On a wide screen the search sits in the header as a field, as most shops have it. */
@media (min-width: 1100px) {
  .search-toggle {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    width: auto;
    min-width: 230px;
    height: 40px;
    justify-content: flex-start;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--canvas);
    color: var(--text-3);
  }

  .search-toggle svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
  }

  .search-toggle .search-hint {
    display: inline;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
  }

  .search-toggle:hover {
    border-color: var(--blue-line);
    background: #fff;
    color: var(--text-2);
  }
}

/* ---------- Buttons ---------- */
.button {
  min-height: 46px;
  font-weight: 700;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.button-red,
.button-primary,
.hero-actions .button-primary {
  background: linear-gradient(180deg, #2a66e4, var(--blue));
  box-shadow: var(--shadow-blue);
}

.button-red:hover,
.button-primary:hover,
.hero-actions .button-primary:hover {
  background: linear-gradient(180deg, var(--blue), var(--blue-deep));
  transform: translateY(-1px);
}

.button-light-outline {
  border: 1px solid var(--hairline-strong);
  background: #fff;
  color: var(--text);
}

.button-light-outline:hover {
  border-color: var(--blue-line);
  background: var(--blue-soft);
  color: var(--blue);
}

.button-sm {
  min-height: 36px;
}

/* ---------- Section heads ---------- */
.section {
  padding: 72px 0;
}

.section-head {
  margin-bottom: 28px;
}

.section-kicker,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.section-head .section-kicker {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--blue-soft);
}

.section-title {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  line-height: 1.2;
}

.section-subtitle {
  max-width: 620px;
  font-size: 16px;
}

/* ---------- Home hero ---------- */
.hero {
  background:
    radial-gradient(40% 55% at 22% 45%, rgba(31, 91, 216, 0.16), transparent 70%),
    radial-gradient(30% 40% at 12% 85%, rgba(106, 79, 224, 0.12), transparent 70%),
    radial-gradient(35% 40% at 85% 10%, rgba(124, 196, 255, 0.18), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, var(--canvas) 100%);
}

[dir="ltr"] .hero {
  background:
    radial-gradient(40% 55% at 78% 45%, rgba(31, 91, 216, 0.16), transparent 70%),
    radial-gradient(30% 40% at 88% 85%, rgba(106, 79, 224, 0.12), transparent 70%),
    radial-gradient(35% 40% at 15% 10%, rgba(124, 196, 255, 0.18), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, var(--canvas) 100%);
}

.hero-inner {
  min-height: 600px;
}

.hero-copy {
  padding: 56px 0 72px;
}

.hero-pill {
  border: 1px solid var(--blue-line);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-sm);
}

.hero h1 {
  font-size: clamp(42px, 5.6vw, 72px);
  font-weight: 700;
}

.hero-description {
  max-width: 560px;
  font-size: 18px;
}

.hero-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(560px, 100%);
  margin: 26px 0 16px;
  padding: 6px;
  padding-inline-start: 18px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(13, 42, 107, 0.12);
}

.hero-search:focus-within {
  border-color: var(--blue);
  box-shadow: 0 14px 36px rgba(13, 42, 107, 0.12), var(--focus-ring);
}

.hero-search > svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--text-3);
  stroke-width: 2;
}

.hero-search input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]) {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 16px;
}

.hero-search input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus {
  box-shadow: none;
}

.hero-search .button {
  flex: 0 0 auto;
  min-height: 46px;
  padding-inline: 26px;
}

.hero-actions {
  gap: 10px;
}

.hero-actions .button {
  min-height: 40px;
  padding: 8px 18px;
  font-size: 14px;
}

.hero-trust {
  flex-wrap: wrap;
  margin-top: 22px;
  gap: 8px;
}

/* A grid track sized to its widest child let the badges push the hero past a phone's edge. */
.hero-copy {
  min-width: 0;
}

.hero-trust .trust-item {
  padding: 6px 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 600;
}

/* The fanned cards get a holo edge, the way foil catches the light. */
.showcase-card {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(13, 42, 107, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.showcase-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 17px;
  background: var(--holo);
  opacity: 0.85;
}

.showcase-card span {
  border: 0;
  background: rgba(11, 31, 77, 0.78);
  color: #fff;
  font-weight: 600;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ---------- Delivery strip ---------- */
.shipping-strip {
  position: relative;
  z-index: 3;
  margin-top: -28px;
}

.shipping-grid {
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(13, 42, 107, 0.1);
}

.shipping-card {
  padding: 16px 22px;
}

.shipping-card svg {
  padding: 8px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--blue-soft);
}

.shipping-card b {
  font-size: 18px;
}

/* ---------- Categories: compact tiles in each category's colour ---------- */
.categories-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.category-card {
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon count" "title title" "desc desc";
  align-items: center;
  gap: 4px 12px;
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: #fff;
}

.category-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  width: auto;
  height: 4px;
  border-radius: 0;
  background: var(--category-color, var(--blue));
  opacity: 0.85;
}

.category-card:hover {
  border-color: color-mix(in srgb, var(--category-color, var(--blue)) 35%, transparent);
  background: #fff;
}

.category-card .category-icon {
  position: static;
  grid-area: icon;
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--category-color, var(--blue)) 12%, #fff);
  color: var(--category-color, var(--blue));
  box-shadow: none;
}

.category-card .category-icon svg {
  width: 22px;
  height: 22px;
}

.category-card .category-count {
  position: static;
  grid-area: count;
  justify-self: end;
  align-self: start;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--canvas);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
}

.category-card h3 {
  grid-area: title;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.category-card p {
  grid-area: desc;
  margin: 0;
  color: var(--text-3);
  font-size: 13px;
}

.category-card .category-arrow {
  display: none;
}

/* ---------- Product cards: the card first ---------- */
.products-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.product-card {
  border: 1px solid var(--hairline);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}

.product-card:hover {
  transform: translateY(-4px);
  border-color: var(--blue-line);
  box-shadow: var(--shadow-lg);
}

.product-media {
  aspect-ratio: 4 / 5;
  padding: 22px 22px 18px;
  background:
    radial-gradient(70% 55% at 50% 38%, rgba(31, 91, 216, 0.1), transparent 70%),
    linear-gradient(180deg, #f3f6fc 0%, #e9eef8 100%);
}

.product-media img {
  filter: drop-shadow(0 14px 16px rgba(11, 31, 77, 0.22));
}

.product-card:hover .product-media img {
  transform: translateY(-4px) scale(1.02);
}

.product-badges .badge {
  padding: 4px 9px;
  font-size: 11px;
}

.product-wishlist {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.92);
}

.product-quick-add {
  width: 42px;
  height: 42px;
  background: linear-gradient(180deg, #2a66e4, var(--blue));
  box-shadow: var(--shadow-blue);
}

.product-card-content {
  padding: 14px 16px 16px;
}

.product-meta {
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11.5px;
}

.product-meta > span:first-child {
  min-width: 0;
  padding: 2px 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--canvas);
  color: var(--text-2);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-name {
  display: -webkit-box;
  min-height: 2.7em;
  margin: 0 0 4px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.product-set {
  margin: 0;
  overflow: hidden;
  color: var(--text-3);
  font-size: 12.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-price-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}

.product-price {
  color: var(--navy);
  font-size: 19px;
  font-weight: 700;
}

/* ---------- Discovery lists ---------- */
.discovery-card {
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}

.discovery-product {
  border-radius: 12px;
}

/* ---------- Collection banner: a deep navy band ---------- */
.collection-banner {
  min-height: 300px;
  padding: 48px 56px;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(50% 80% at 80% 50%, rgba(124, 196, 255, 0.28), transparent 70%),
    radial-gradient(40% 60% at 10% 100%, rgba(106, 79, 224, 0.35), transparent 70%),
    linear-gradient(120deg, var(--navy) 0%, #163a96 100%);
  color: #fff;
  box-shadow: 0 24px 60px rgba(11, 31, 77, 0.28);
}

.collection-banner::after {
  color: rgba(255, 255, 255, 0.05);
}

.collection-copy .section-kicker {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #cfe0ff;
}

.collection-copy h2 {
  color: #fff;
}

.collection-copy p {
  color: rgba(255, 255, 255, 0.78);
}

.collection-copy .button-primary {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.collection-copy .button-primary:hover {
  background: var(--blue-soft);
  color: var(--navy);
}

.collection-mark {
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.35));
}

/* ---------- Community tiles: one accent each ---------- */
.home-community-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

/* Two wide tiles on top, three below: five tiles with no hole in the grid. */
.home-community-grid > .home-community-card {
  grid-column: span 2;
}

.home-community-grid > .deck-studio-card,
.home-community-grid > .academy-home-card {
  grid-column: span 3;
}

.home-community-card {
  --tile: var(--blue);
  min-height: 0;
  padding: 26px;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  background:
    radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--tile) 14%, transparent), transparent 60%),
    #fff;
}

[dir="rtl"] .home-community-card {
  background:
    radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--tile) 14%, transparent), transparent 60%),
    #fff;
}

.home-community-card:hover {
  border-color: color-mix(in srgb, var(--tile) 35%, transparent);
  background-color: #fff;
}

.deck-studio-card { --tile: #6a4fe0; }
.academy-home-card { --tile: #0b8da0; }
.events-home-card { --tile: #e0482d; }
.tools-home-card { --tile: #1f5bd8; }
.club-home-card { --tile: #c48a00; }

.home-community-card .eyebrow {
  color: var(--tile);
}

.home-community-grid .home-community-card h2 {
  margin: 8px 0 6px;
  font-size: 22px;
  line-height: 1.3;
}

.home-community-card p {
  margin: 0 0 18px;
  font-size: 14px;
}

.home-community-card .button {
  min-height: 38px;
  padding: 6px 16px;
  border: 0;
  background: color-mix(in srgb, var(--tile) 10%, #fff);
  color: var(--tile);
  box-shadow: none;
  font-size: 13px;
}

.home-community-card:hover .button {
  background: var(--tile);
  color: #fff;
}

/* ---------- Why ACS: four quiet points ---------- */
.section-dark {
  background: var(--canvas);
}

.benefits-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  border: 0;
  background: transparent;
  overflow: visible;
}

.benefit-card {
  min-height: 0;
  padding: 24px;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: #fff;
  box-shadow: none;
}

.benefit-icon,
.benefit-card:hover .benefit-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--blue-soft), #efe9ff);
}

.benefit-card h3 {
  margin: 14px 0 6px;
  font-size: 17px;
}

.benefit-card p {
  margin: 0;
  font-size: 14px;
}

/* ---------- Footer: a navy close ---------- */
.site-footer {
  border-top: 0;
  background:
    radial-gradient(40% 60% at 90% 0%, rgba(124, 196, 255, 0.14), transparent 70%),
    linear-gradient(180deg, var(--navy) 0%, #081634 100%);
  color: rgba(255, 255, 255, 0.72);
}

.footer-main {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.5fr) minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 32px;
}

.footer-main > .contact-column {
  grid-column: auto;
}

/* Eleven quick links read better as two short columns than one long one. */
.footer-main > .footer-column:nth-child(2) {
  display: block;
  columns: 2;
  column-gap: 24px;
}

.footer-main > .footer-column:nth-child(2) h4 {
  column-span: all;
}

.footer-main > .footer-column:nth-child(2) a {
  display: block;
  margin-bottom: 10px;
  break-inside: avoid;
}

.footer-brand h3,
.footer-column h4 {
  color: #fff;
}

.footer-brand p,
.footer-column a {
  color: rgba(255, 255, 255, 0.66);
}

.footer-column a:hover {
  color: #fff;
}

.footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

.footer-admin-link {
  color: rgba(255, 255, 255, 0.45);
}

.social-row a {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.social-row a:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* ---------- Inner pages ---------- */
.page-hero {
  padding: 40px 0 34px;
  background:
    radial-gradient(40% 90% at 85% 0%, rgba(31, 91, 216, 0.1), transparent 70%),
    linear-gradient(180deg, #fff 0%, var(--canvas) 100%);
  border-bottom: 1px solid var(--hairline);
}

[dir="rtl"] .page-hero {
  background:
    radial-gradient(40% 90% at 15% 0%, rgba(31, 91, 216, 0.1), transparent 70%),
    linear-gradient(180deg, #fff 0%, var(--canvas) 100%);
}

.page-hero h1 {
  font-size: clamp(30px, 3.6vw, 44px);
}

/* The page header already gives room; the content starts close under it. */
.page-hero + .section,
.page-hero + section {
  padding-top: 32px;
}

/* ---------- Shop ---------- */
.shop-shell {
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 24px;
}

.filters-panel {
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.shop-main .products-grid {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

/* ---------- Product page ---------- */
.product-detail-hero {
  background: linear-gradient(180deg, var(--canvas) 0%, #fff 70%);
}

.product-detail-main {
  border-radius: 24px;
  background:
    radial-gradient(70% 55% at 50% 40%, rgba(31, 91, 216, 0.12), transparent 70%),
    linear-gradient(180deg, #f3f6fc 0%, #e9eef8 100%);
  box-shadow: var(--shadow-md);
}

.product-detail-price strong {
  color: var(--navy);
  font-weight: 700;
}

.product-detail-copy h1 {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.2;
}

/* Four facts as small tiles, not a table with white seams. */
.product-detail-copy .product-specs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 20px 0;
  border: 0;
}

.product-detail-copy .product-spec {
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--canvas);
}

.product-detail-copy .product-variant-row {
  border-radius: 14px;
}

.product-trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-width: 520px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.product-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: #fff;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}

.product-trust svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.8;
}

/* ---------- Cart drawer ---------- */
.cart-item {
  border-radius: 16px;
}

.cart-drawer-footer {
  border-top: 1px solid var(--hairline);
  background: var(--canvas);
}

/* ---------- Phone tab bar ---------- */
.tab-bar a.active {
  color: var(--blue);
}

.tab-bar a.active svg {
  padding: 3px 10px;
  width: 44px;
  border-radius: 999px;
  background: var(--blue-soft);
}

/* ---------- Calm for people who asked for it ---------- */
@media (prefers-reduced-motion: reduce) {
  .product-card,
  .product-card:hover,
  .product-card:hover .product-media img,
  .button-primary:hover,
  .category-card:hover,
  .home-community-card:hover {
    transform: none;
    transition: none;
  }
}

/* ---------- Games: Yu-Gi-Oh!, Pokémon, Magic, Digimon ----------
   Each game carries its colour in --game, set inline from the GAMES list in app.js. */
.game-chips,
.sealed-games {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.game-chips {
  margin: 0 0 14px;
}

.sealed-games {
  margin: 0 0 12px;
}

.game-chip {
  --game: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.game-chip::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--game);
}

.game-chip:hover {
  border-color: var(--game);
}

.game-chip.active {
  border-color: var(--game);
  background: var(--game);
  color: #fff;
}

.game-chip.active::before {
  background: #fff;
}

.product-badges .game-tag {
  --game: var(--blue);
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--game);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

/* Releases with no box photo: the game's colours with the set's logo, symbol or top card. */
.ygo-result-image.sealed-tile {
  position: relative;
  padding: 6px;
  background: linear-gradient(160deg, var(--game), var(--game-deep, #0b1f4d));
  color: #fff;
}

.ygo-result-image.sealed-tile img {
  object-fit: contain;
  background: transparent;
}

.ygo-result-image.sealed-tile img[src*="svgs.scryfall.io"] {
  width: 60%;
  height: 50%;
  filter: invert(1);
}

.ygo-result-image.sealed-tile img[src*="digimoncard.io"] {
  border-radius: 4px;
}

.ygo-result-image.sealed-tile b {
  max-width: 100%;
  font-size: 12px;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  text-align: center;
}

.ygo-result-image.sealed-tile img[src*="digimoncard.io"] + b {
  position: absolute;
  inset-inline: 4px;
  bottom: 4px;
  padding: 2px 0;
  border-radius: 4px;
  background: rgba(11, 31, 77, 0.78);
  font-size: 10px;
}

.sealed-more {
  display: flex;
  justify-content: center;
  padding: 16px 0 4px;
}

/* Importer pictures: a shimmer holds the place, the picture fades in when it arrives, and a
   card icon stands in if it never does, instead of the card's name spilling over the box. */
.thumb-slot {
  position: relative;
  background: linear-gradient(100deg, #e7ebf2 30%, #f5f7fb 50%, #e7ebf2 70%) 0 0 / 300% 100%;
  animation: thumb-shimmer 1.3s linear infinite;
}

.thumb-slot:has(img.is-loaded),
.thumb-slot:has(img.is-failed) {
  background: #e7e9ed;
  animation: none;
}

img[data-thumb] {
  opacity: 0;
  transition: opacity 0.25s ease;
}

img[data-thumb].is-loaded {
  opacity: 1;
}

img[data-thumb].is-failed {
  display: none;
}

.thumb-fallback {
  display: none;
  color: var(--text-3, #8a94a6);
}

.thumb-slot:has(img.is-failed) .thumb-fallback {
  display: grid;
  place-items: center;
}

@keyframes thumb-shimmer {
  to {
    background-position: -300% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .thumb-slot {
    animation: none;
  }

  img[data-thumb] {
    transition: none;
  }
}

/* On a phone the games sit in one row that scrolls sideways. */
@media (max-width: 620px) {
  .game-chips,
  .sealed-games {
    flex-wrap: nowrap;
    margin-inline: -16px;
    padding: 2px 16px 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .game-chips::-webkit-scrollbar,
  .sealed-games::-webkit-scrollbar {
    display: none;
  }

  .game-chip {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 13px;
    font-size: 13px;
  }
}

/* ---------- Narrower screens ---------- */
@media (max-width: 840px) {
  .hero-inner {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .categories-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .section {
    padding: 52px 0;
  }

  .hero-copy {
    padding: 36px 0 12px;
  }

  .shipping-strip {
    margin-top: 0;
  }

  .collection-banner {
    padding: 34px 26px;
  }

  .shop-shell {
    grid-template-columns: 1fr;
  }

  .home-community-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-community-grid > .home-community-card,
  .home-community-grid > .deck-studio-card,
  .home-community-grid > .academy-home-card {
    grid-column: span 1;
  }

  .home-community-grid > .club-home-card {
    grid-column: 1 / -1;
  }

  .benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-main > .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  .hero h1 {
    font-size: clamp(34px, 9vw, 44px);
  }

  .hero-description {
    font-size: 16px;
  }

  .hero-search {
    margin-top: 20px;
    padding-inline-start: 14px;
  }

  .hero-search .button {
    min-height: 42px;
    padding-inline: 18px;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .hero-actions .button {
    width: auto;
    min-width: 0;
  }

  .section-title {
    font-size: 26px;
  }

  /* The categories become one swipeable row of tiles. */
  .categories-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 46%);
    grid-template-columns: none;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
  }

  .category-card {
    scroll-snap-align: start;
  }

  .products-grid,
  .shop-main .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .product-media {
    padding: 14px 14px 12px;
  }

  .product-card-content {
    padding: 10px 11px 12px;
  }

  .product-name {
    font-size: 13.5px;
  }

  .product-price {
    font-size: 16px;
  }

  /* Smaller corner buttons, so the card art stays in view on a phone. */
  .product-quick-add {
    bottom: 8px;
    inset-inline-end: 8px;
    width: 32px;
    height: 32px;
  }

  .product-wishlist {
    top: 8px;
    inset-inline-end: 8px;
    width: 30px;
    height: 30px;
  }

  .product-wishlist svg,
  .product-quick-add svg {
    width: 16px;
    height: 16px;
  }

  .product-badges {
    top: 8px;
    inset-inline-start: 8px;
    gap: 4px;
  }

  .product-badges .badge {
    padding: 3px 7px;
    font-size: 10px;
  }

  .home-community-card {
    padding: 22px;
  }

  .home-community-grid {
    grid-template-columns: 1fr;
  }

  .home-community-grid > .home-community-card {
    grid-column: 1 / -1;
  }

  .benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .benefit-card {
    padding: 16px;
  }

  .product-trust li {
    padding: 9px 10px;
    font-size: 12px;
  }
}

@media (max-width: 330px) {
  .products-grid,
  .shop-main .products-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   ACS ADMIN 2026 — an admin anyone can find their way around: the menu grouped by the kind
   of work with a count beside what is waiting, a home page that says what needs doing, one
   way in for adding a product, and the settings one subject at a time. Its phone rules are
   at its end.
   ========================================================================== */
.admin-layout {
  min-height: 100vh;
  grid-template-columns: 252px 1fr;
  background: var(--canvas);
}

/* The shop's header is hidden in the admin, so the menu sits at the very top. */
.admin-sidebar {
  top: 0;
  height: 100vh;
  padding: 22px 14px;
  overflow-y: auto;
  background: #fff;
  border-inline-end: 1px solid var(--hairline);
}

.admin-sidebar-title {
  padding: 0 10px 4px;
}

.admin-menu {
  gap: 2px;
  margin-top: 8px;
}

.admin-menu-group {
  display: block;
  margin: 12px 12px 4px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
}

.admin-menu button {
  position: relative;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 12px;
  color: var(--text-2);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
}

.admin-menu button svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
}

.admin-menu button span {
  flex: 1;
}

.admin-menu button:hover {
  background: var(--bg-soft);
  color: var(--text);
}

.admin-menu button.active {
  background: var(--blue-soft);
  color: var(--blue);
}

.admin-menu-badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #e5484d;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.admin-content {
  padding: 32px 36px 48px;
}

.admin-page-head h1 {
  font-size: 28px;
  letter-spacing: -0.01em;
}

.admin-page-head p {
  max-width: 64ch;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.6;
}

.admin-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ---------- Home ---------- */
.admin-todo {
  margin-bottom: 18px;
}

.admin-todo-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-todo-list li {
  display: grid;
  grid-template-columns: 40px auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: #fff;
}

.admin-todo-list li.urgent {
  border-color: #fbd5d5;
  background: #fff7f7;
}

.admin-todo-list i {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue);
}

.admin-todo-list li.urgent i {
  background: #fde2e2;
  color: #d93036;
}

.admin-todo-list li.setup {
  border-color: var(--blue-line);
  background: var(--blue-soft);
}

.admin-todo-list li.setup strong {
  display: none;
}

.admin-todo-list li.setup span {
  grid-column: 2 / 4;
  font-weight: 500;
}

.admin-todo-list i svg {
  width: 20px;
  height: 20px;
}

.admin-todo-list strong {
  min-width: 2ch;
  color: var(--text);
  font-size: 22px;
  text-align: center;
}

.admin-todo-list span {
  color: var(--text);
  font-weight: 600;
}

.admin-all-good {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  background: #ecfdf3;
  color: #067647;
}

.admin-all-good svg {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
}

.admin-all-good strong {
  display: block;
  font-size: 17px;
}

.admin-all-good span {
  color: #3b7d5c;
}

.admin-quick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.admin-quick button {
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.admin-quick button:hover {
  transform: translateY(-2px);
  border-color: var(--blue-line);
  box-shadow: var(--shadow-md);
}

.admin-quick i {
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--blue);
  color: #fff;
}

.admin-quick i svg {
  width: 22px;
  height: 22px;
}

.admin-quick strong {
  font-size: 15.5px;
}

.admin-quick small {
  color: var(--text-3);
  font-size: 12.5px;
}

/* ---------- Adding a product ---------- */
.add-product-modal {
  max-width: 620px;
}

.add-product-chooser {
  position: relative;
  padding: 28px 26px 24px;
}

.add-product-chooser h2 {
  margin: 0 0 4px;
  padding-inline-end: 44px;
  font-size: 22px;
}

.add-product-ways {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.add-product-ways button {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: 16px;
  background: #fff;
  color: var(--text);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.add-product-ways button:hover {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.add-product-ways i {
  display: grid;
  flex: 0 0 46px;
  place-items: center;
  height: 46px;
  border-radius: 13px;
  background: var(--blue-soft);
  color: var(--blue);
}

.add-product-ways button:hover i {
  background: var(--blue);
  color: #fff;
}

.add-product-ways i svg {
  width: 22px;
  height: 22px;
}

.add-product-ways strong {
  display: block;
  font-size: 16px;
}

.add-product-ways small {
  display: block;
  margin-top: 2px;
  color: var(--text-2);
  line-height: 1.5;
}

/* ---------- Settings, one subject at a time ---------- */
.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.settings-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--text-2);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.settings-tabs button svg {
  width: 18px;
  height: 18px;
}

.settings-tabs button.active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.admin-content [hidden] {
  display: none !important;
}

/* ---------- Tablets and phones ---------- */
/* The menu becomes a row of named buttons under the header, never bare icons. */
@media (max-width: 840px) {
  .admin-layout {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    flex-direction: row;
    align-items: center;
    height: auto;
    padding: 8px 10px;
    border-inline-end: 0;
    border-bottom: 1px solid var(--hairline);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .admin-sidebar::-webkit-scrollbar {
    display: none;
  }

  .admin-sidebar-title,
  .admin-menu-group {
    display: none;
  }

  .admin-menu {
    flex-direction: row;
    gap: 6px;
    margin: 0;
  }

  .admin-menu button {
    flex: 0 0 auto;
    justify-content: flex-start;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 14px;
    white-space: nowrap;
  }

  .admin-menu button span {
    display: inline;
  }

  .admin-logout {
    margin: 0;
    margin-inline-start: 6px;
  }

  .admin-content {
    padding: 20px 16px 40px;
  }
}

@media (max-width: 620px) {
  .admin-page-head {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-page-head h1 {
    font-size: 24px;
  }

  .admin-actions .button {
    flex: 1 1 auto;
  }

  .admin-todo-list li {
    grid-template-columns: 36px auto 1fr;
  }

  .admin-todo-list li .button {
    grid-column: 1 / -1;
  }

  .admin-todo-list li.setup span {
    grid-column: 2 / -1;
  }

  .admin-quick {
    grid-template-columns: 1fr 1fr;
  }

  .admin-quick button {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 6px;
    text-align: center;
  }

  .admin-quick i {
    grid-row: auto;
  }

  .settings-tabs {
    flex-wrap: nowrap;
    margin-inline: -16px;
    padding-inline: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .settings-tabs button {
    flex: 0 0 auto;
  }
}

/* ---------- Card scanner ---------- */
.card-scanner-modal {
  width: min(780px, 100%);
  background: #fff;
}

.card-scanner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 20px 20px 24px;
}

/* A printing's long name ("MP21-EN143 — Ultra Rare — 2021 Tin of Ancient Battles") must not
   widen the screen past a phone's edge. */
.card-scanner > *,
.scan-match > *,
.scan-match-body .form-grid > * {
  min-width: 0;
}

.scan-match-body select {
  width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
}

.scan-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-inline-end: 48px;
}

.scan-head h2 {
  margin: 0;
  font-size: 22px;
}

.scan-games {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: var(--bg-soft);
}

.scan-games button {
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.scan-games button.active {
  background: #fff;
  color: var(--blue);
  box-shadow: var(--shadow-sm);
}

.scan-stage {
  position: relative;
  height: min(56vh, 470px);
  overflow: hidden;
  border-radius: 18px;
  background: #0b1220;
}

.scan-stage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The frame the card goes in, the rest of the picture dimmed around it. */
.scan-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 84%;
  aspect-ratio: 63 / 88;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(5, 10, 25, 0.48);
  transform: translate(-50%, -50%);
}

.scan-frame i {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 4px solid #fff;
}

.scan-frame i:nth-child(1) {
  top: -2px;
  left: -2px;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 14px;
}

.scan-frame i:nth-child(2) {
  top: -2px;
  right: -2px;
  border-bottom: 0;
  border-left: 0;
  border-top-right-radius: 14px;
}

.scan-frame i:nth-child(3) {
  bottom: -2px;
  left: -2px;
  border-top: 0;
  border-right: 0;
  border-bottom-left-radius: 14px;
}

.scan-frame i:nth-child(4) {
  right: -2px;
  bottom: -2px;
  border-top: 0;
  border-left: 0;
  border-bottom-right-radius: 14px;
}

.scan-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.scan-stage.no-camera {
  height: auto;
  background: var(--bg-soft);
}

.scan-stage.no-camera video,
.scan-stage.no-camera .scan-frame {
  display: none;
}

.scan-stage.no-camera .scan-hint {
  position: static;
  padding: 36px 20px;
  color: var(--text-2);
  text-shadow: none;
}

.scan-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.scan-controls .button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.scan-controls .button svg {
  width: 18px;
  height: 18px;
}

.scan-photo {
  cursor: pointer;
}

.scan-shutter {
  width: 74px;
  height: 74px;
  padding: 6px;
  border: 4px solid var(--blue);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.scan-shutter span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--blue);
  transition: transform 0.1s ease;
}

.scan-shutter:active span {
  transform: scale(0.88);
}

.scan-controls .button.active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.scan-status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-2);
  font-weight: 600;
}

.scan-reader-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text-3);
  font-size: 13px;
}

.scan-reader-note svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: #067647;
}

.scan-status:empty {
  display: none;
}

.scan-status.good {
  color: #067647;
}

.scan-status.bad {
  color: #c4320a;
}

.scan-match {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 16px;
  padding: 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: 18px;
  background: #fff;
}

.scan-match.sure {
  border-color: #a6e9c3;
  background: #f6fef9;
}

.scan-pictures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 8px;
}

.scan-pictures img {
  width: 100%;
  aspect-ratio: 63 / 88;
  border-radius: 8px;
  background: var(--bg-soft);
  object-fit: cover;
}

.scan-how {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-weight: 600;
}

.scan-match.sure .scan-how {
  color: #067647;
}

.scan-how svg {
  width: 16px;
  height: 16px;
}

.scan-match-body h3 {
  margin: 4px 0 2px;
  font-size: 20px;
}

.scan-match-body > p {
  margin: 0 0 10px;
  color: var(--text-2);
}

.scan-match-body > p.scan-check-printing {
  padding: 8px 12px;
  border-radius: 10px;
  background: #fffaeb;
  color: #93370d;
  font-size: 13.5px;
  font-weight: 600;
}

.scan-match-body .form-grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.scan-match-body label small {
  color: var(--text-3);
  font-weight: 500;
}

.scan-foil {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-weight: 600;
}

.scan-match-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.scan-others small {
  color: var(--text-3);
  font-weight: 600;
}

.scan-others > div {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  overflow-x: auto;
}

.scan-others button {
  display: grid;
  flex: 0 0 96px;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 12px;
  text-align: center;
  cursor: pointer;
}

.scan-others img {
  width: 100%;
  aspect-ratio: 63 / 88;
  border-radius: 6px;
  object-fit: cover;
}

.scan-search {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.scan-search input {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  padding: 8px 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  font: inherit;
}

.scan-batch {
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

.scan-batch-empty {
  margin: 0;
  color: var(--text-3);
  text-align: center;
}

.scan-batch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.scan-batch-head h3 {
  margin: 0;
  font-size: 17px;
}

.scan-batch-head h3 span {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 13px;
}

.scan-batch ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.scan-batch li {
  display: grid;
  grid-template-columns: 44px 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: #fff;
}

.scan-batch li.failed {
  border-color: #fbd5d5;
  background: #fff7f7;
}

.scan-batch li.saved {
  opacity: 0.55;
}

.scan-batch li img {
  width: 44px;
  aspect-ratio: 63 / 88;
  border-radius: 5px;
  object-fit: cover;
}

.scan-batch li strong {
  display: block;
  font-size: 14.5px;
}

.scan-batch li small {
  display: block;
  color: var(--text-3);
  font-size: 12px;
}

.scan-batch li small.scan-listed {
  color: var(--blue);
}

.scan-batch li small.scan-error {
  color: #c4320a;
}

.scan-batch-price {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.scan-batch-price input {
  width: 76px;
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  font: inherit;
}

.scan-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
}

.scan-qty button {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}

.scan-qty span {
  min-width: 22px;
  font-weight: 700;
  text-align: center;
}

/* On a phone the scanner takes the whole screen, like a camera app. */
@media (max-width: 620px) {
  .modal-layer:has(.card-scanner-modal) {
    padding: 0;
  }

  .modal-card.card-scanner-modal {
    width: 100%;
    min-height: 100%;
    max-height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .card-scanner {
    padding: 14px 14px 26px;
  }

  .scan-head h2 {
    font-size: 19px;
  }

  .scan-games {
    width: 100%;
  }

  .scan-games button {
    flex: 1;
    padding: 8px 6px;
  }

  .scan-stage {
    height: 54vh;
  }

  .scan-match {
    grid-template-columns: 1fr;
  }

  .scan-pictures {
    max-width: 240px;
  }

  .scan-batch li {
    grid-template-columns: 40px 1fr auto;
    grid-template-areas: "picture about remove" "picture price qty";
  }

  .scan-batch li img {
    grid-area: picture;
  }

  .scan-batch li > div {
    grid-area: about;
  }

  .scan-batch li .row-action {
    grid-area: remove;
  }

  .scan-batch-price {
    grid-area: price;
  }

  .scan-qty {
    grid-area: qty;
  }
}

/* ---------- A card's every printing on its page ---------- */
.product-variants h3 small {
  color: var(--text-3);
  font-weight: 600;
}

.product-variant-list {
  max-height: 340px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.product-variant-row {
  grid-template-columns: minmax(0, 1fr) auto;
  border-color: var(--hairline-strong);
  background: #fff;
}

.product-detail-copy .product-variant-row {
  border-color: var(--hairline-strong);
  background: #fff;
}

.product-detail-copy .product-variant-row strong,
.product-detail-copy .product-variants h3 {
  color: var(--text);
}

.product-detail-copy .product-variant-row small {
  color: var(--text-3);
}

.product-variant-row[hidden] {
  display: none;
}

.product-variant-row.in-stock {
  border-color: #a6e9c3;
  background: #f6fef9;
}

.variant-missing {
  color: var(--text-3);
  font-size: 12.5px;
}

.variant-here {
  color: #067647;
  font-size: 12.5px;
  font-weight: 700;
}

.variant-open {
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.variant-filter {
  width: 100%;
  min-height: 40px;
  margin-bottom: 8px;
  padding: 8px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  font: inherit;
}

/* A card can now carry all its artworks (Blue-Eyes has 8), so the row of thumbnails scrolls
   inside the gallery instead of stretching the page past a phone's width. */
.product-detail-layout > * {
  min-width: 0;
}

/* The scanner's artwork picker. */
.scan-arts {
  margin-top: 8px;
}

.scan-arts small {
  color: var(--text-3);
  font-weight: 600;
}

.scan-arts > div {
  display: flex;
  gap: 8px;
  padding: 6px 0;
  overflow-x: auto;
}

.scan-arts button {
  flex: 0 0 54px;
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.scan-arts button.active {
  border-color: var(--blue);
}

.scan-arts img {
  display: block;
  width: 100%;
  aspect-ratio: 63 / 88;
  border-radius: 5px;
  object-fit: cover;
}

/* ---------- Picking a printing, and asking for one the shop doesn't have ----------
   The printings are buttons; the note under the list says whether the pick goes out from stock
   or gets ordered in, and offers what the shop has of the same card. */
.product-variant-row[data-pick-printing] {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.product-variant-row[data-pick-printing]:hover {
  border-color: var(--blue);
}

.product-variant-row[data-pick-printing]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.product-variant-row.picked,
.product-detail-copy .product-variant-row.picked {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}

.product-variant-row > .variant-name,
.product-detail-copy .product-variant-row > .variant-name {
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  text-align: start;
  font-size: inherit;
}

.product-variant-row > .variant-open,
.product-detail-copy .product-variant-row > .variant-open {
  padding: 5px 11px;
  background: var(--blue);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}

.printing-hint {
  margin: -4px 0 10px;
  color: var(--text-3);
  font-size: 13px;
}

.printing-choice:empty {
  display: none;
}

.printing-note {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  background: #fff;
}

.printing-note > p {
  margin: 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.6;
}

.printing-note > p strong {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  color: var(--text);
  font-size: 15px;
}

.printing-note > p svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.printing-note.ready {
  border-color: #a6e9c3;
  background: #f6fef9;
}

.printing-note.ready > p svg {
  color: #067647;
}

.printing-note.order {
  border-color: #b9cdf5;
  background: var(--blue-soft);
}

.printing-note.order > p svg {
  color: var(--blue);
}

.printing-note > .button {
  justify-self: start;
}

.printing-others {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff;
}

.printing-others p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
}

.printing-others small,
.printing-offer small {
  color: var(--text-3);
  font-size: 12.5px;
}

.printing-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 12px;
  font-size: 13.5px;
}

.printing-offer + .printing-offer {
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
}

.printing-offer > span:first-child {
  min-width: 0;
  color: var(--text-2);
}

.printing-offer b {
  color: var(--text);
}

.printing-offer-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.printing-offer-actions .text-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.modal-card.card-request-modal {
  width: min(540px, 100%);
}

.card-request-modal .restock-alert-form {
  width: 100%;
}

.card-request-done {
  text-align: center;
}

.card-request-done p {
  color: var(--text-2);
  line-height: 1.7;
}

.card-request-tick {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: #dcfae6;
  color: #067647;
}

.card-request-tick svg {
  width: 26px;
  height: 26px;
}

.admin-panel-note {
  margin: -4px 0 12px;
  color: var(--text-3);
  font-size: 13px;
}

.card-request-status {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 13px;
}

@media (max-width: 520px) {
  .printing-offer {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Every card there is: search results, the card page, likely prices ---------- */
.catalog-results:empty {
  display: none;
}

.catalog-results {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}

.catalog-results-head h2 {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 20px;
}

.catalog-results-head p {
  margin: 0 0 16px;
  color: var(--text-3);
  font-size: 14px;
}

.catalog-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-3);
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

.catalog-tile {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.catalog-tile:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
}

.catalog-tile img {
  width: 100%;
  aspect-ratio: 63 / 88;
  border-radius: 8px;
  background: var(--bg-soft);
  object-fit: cover;
}

.catalog-tile strong {
  display: block;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.35;
}

.catalog-tile small {
  display: block;
  margin-top: 3px;
  color: var(--text-3);
  font-size: 12px;
}

.catalog-tile em.in {
  color: #067647;
  font-style: normal;
  font-weight: 700;
}

.catalog-facts {
  margin: 4px 0 14px;
  color: var(--text-3);
  font-size: 13.5px;
  text-align: start;
}

.catalog-card-page .catalog-stock {
  margin: 0 0 6px;
}

.catalog-text {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: #fff;
}

.catalog-text summary {
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

.catalog-text p {
  margin: 10px 0 0;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-line;
  text-align: left;
}

.catalog-retry {
  padding: 20px 16px 60px;
  text-align: center;
}

.variant-missing b {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 12px;
}

.variant-card-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 13.5px;
}

.printing-note > .printing-estimate {
  color: var(--text-2);
  font-size: 13.5px;
}

.printing-estimate b {
  color: var(--text);
}

.printing-estimate small {
  color: var(--text-3);
}

.search-suggestion.search-everywhere {
  border-top: 1px dashed var(--hairline-strong);
  cursor: pointer;
}

.search-suggestion.search-everywhere > svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--blue);
}

.card-request-estimate {
  display: block;
  color: var(--blue) !important;
}

@media (max-width: 520px) {
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

html[dir="rtl"] .catalog-facts {
  text-align: right;
}

/* ---------- Build a deck and buy it whole ---------- */
.deck-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.deck-input {
  position: sticky;
  top: 90px;
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: #fff;
}

.deck-form {
  display: grid;
  gap: 10px;
}

.deck-form > label {
  color: var(--text);
  font-weight: 700;
}

.deck-form textarea {
  width: 100%;
  min-height: 260px;
  padding: 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize: vertical;
}

.deck-file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px dashed var(--hairline-strong);
  border-radius: 12px;
  color: var(--text-2);
  font-size: 13.5px;
  cursor: pointer;
}

.deck-file input {
  display: none;
}

.deck-file svg {
  width: 18px;
  height: 18px;
  color: var(--blue);
}

.deck-options {
  display: grid;
  gap: 6px;
  font-size: 13.5px;
}

.deck-options select {
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  background: #fff;
  font: inherit;
}

.deck-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-2);
  font-size: 13.5px;
}

.deck-form .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.deck-form .button svg {
  width: 18px;
  height: 18px;
}

.deck-empty {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 260px;
  padding: 30px;
  border: 1px dashed var(--hairline-strong);
  border-radius: 18px;
  color: var(--text-3);
  text-align: center;
}

.deck-empty svg {
  width: 40px;
  height: 40px;
  color: var(--blue);
}

.deck-title {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 22px;
}

.deck-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.deck-summary > div {
  display: grid;
  gap: 2px;
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: #fff;
}

.deck-summary small {
  color: var(--text-3);
  font-size: 12.5px;
}

.deck-summary strong {
  color: var(--text);
  font-size: 18px;
}

.deck-summary b {
  color: var(--text-2);
  font-size: 14px;
}

.deck-summary .ready {
  border-color: #a6e9c3;
  background: #f6fef9;
}

.deck-summary .order {
  border-color: #b9cdf5;
  background: var(--blue-soft);
}

.deck-summary .total {
  border-color: var(--blue);
}

.deck-summary .total strong {
  color: var(--blue);
  font-size: 22px;
}

.deck-warning,
.deck-note {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
}

.deck-warning {
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff6ed;
  color: #b54708;
}

.deck-note {
  color: var(--text-3);
}

.deck-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 6px;
}

.deck-group {
  margin-top: 18px;
}

.deck-group h3 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 16px;
}

.deck-group h3 small {
  color: var(--text-3);
  font-weight: 600;
}

.deck-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: #fff;
}

.deck-row + .deck-row {
  margin-top: 6px;
}

.deck-row img {
  width: 46px;
  aspect-ratio: 63 / 88;
  border-radius: 5px;
  object-fit: cover;
  background: var(--bg-soft);
}

.deck-card-name {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.deck-card-name:hover {
  color: var(--blue);
}

.deck-row small {
  display: block;
  color: var(--text-3);
  font-size: 12.5px;
}

.deck-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.deck-chip {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.deck-chip.ready {
  background: #dcfae6;
  color: #067647;
}

.deck-chip.order {
  background: var(--blue-soft);
  color: var(--blue);
}

.deck-chip.ban {
  background: #fee4e2;
  color: #b42318;
}

.ready-decks {
  padding-bottom: 0;
}

.ready-deck-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.ready-deck {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.ready-deck:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
}

.ready-deck img,
.ready-deck-art {
  width: 64px;
  aspect-ratio: 63 / 88;
  border-radius: 8px;
  object-fit: cover;
}

.ready-deck-art {
  display: grid;
  place-items: center;
  background: var(--blue-soft);
  color: var(--blue);
}

.ready-deck strong,
.ready-deck small,
.ready-deck em {
  display: block;
}

.ready-deck strong {
  color: var(--text);
}

.ready-deck small {
  margin-top: 2px;
  color: var(--text-3);
  font-size: 12.5px;
}

.ready-deck em {
  margin-top: 4px;
  color: var(--blue);
  font-size: 12.5px;
  font-style: normal;
  font-weight: 700;
}

.deck-request-added {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #067647;
  font-weight: 700;
}

.deck-request-added svg {
  width: 18px;
  height: 18px;
}

.deck-request-list {
  max-height: 150px;
  margin: 0 0 12px;
  padding-inline-start: 20px;
  overflow-y: auto;
  color: var(--text-2);
  font-size: 13.5px;
}

.admin-deck-form textarea {
  font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.deck-admin-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

@media (max-width: 900px) {
  .deck-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .deck-input {
    position: static;
  }
}

@media (max-width: 520px) {
  .deck-summary {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .deck-summary .total {
    grid-column: 1 / -1;
  }

  .deck-actions .button {
    flex: 1 1 100%;
  }
}

/* ---------- Selling cards to the shop on the spot ---------- */
.quick-sell {
  padding-bottom: 0;
}

.quick-sell-card {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid #b9cdf5;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--blue-soft), #fff 60%);
}

.quick-sell-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.quick-sell-head h2 {
  margin: 4px 0;
  color: var(--text);
}

.quick-sell-head p {
  max-width: 620px;
  margin: 0;
  color: var(--text-2);
  line-height: 1.6;
}

.quick-sell-head .button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.quick-sell-head .button svg {
  width: 20px;
  height: 20px;
}

.quick-list {
  display: grid;
  gap: 8px;
}

.quick-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) minmax(120px, auto);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: #fff;
}

.quick-row img {
  width: 52px;
  aspect-ratio: 63 / 88;
  border-radius: 6px;
  object-fit: cover;
  background: var(--bg-soft);
}

.quick-card strong {
  display: block;
  color: var(--text);
}

.quick-card small {
  display: block;
  color: var(--text-3);
  font-size: 12.5px;
}

.quick-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.quick-controls select,
.quick-controls input {
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 13px;
}

.quick-controls input {
  width: 64px;
}

.quick-offer {
  display: grid;
  gap: 2px;
  justify-items: end;
  text-align: end;
}

.quick-offer b {
  color: #067647;
  font-size: 18px;
}

.quick-offer small {
  color: var(--text-3);
  font-size: 12px;
}

.quick-offer em {
  color: var(--text-2);
  font-size: 12px;
  font-style: normal;
}

.quick-offer em.wanted {
  color: var(--blue);
  font-weight: 700;
}

.quick-offer.refused {
  color: var(--text-3);
  font-size: 12.5px;
  line-height: 1.5;
}

.quick-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.quick-payout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 8px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
}

.quick-payout.active {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}

.quick-payout b {
  grid-column: 2;
  color: var(--text);
  font-size: 20px;
}

.quick-payout small {
  grid-column: 2;
  color: var(--text-3);
  font-size: 12px;
}

.quick-form {
  display: grid;
  gap: 10px;
}

.quick-form .muted {
  margin: 0;
  font-size: 13px;
}

.settings-hint {
  margin: -4px 0 12px;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.6;
}

.instant-sale {
  display: block;
  margin-top: 4px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 560px) {
  .quick-row {
    grid-template-columns: 52px minmax(0, 1fr);
  }

  .quick-offer {
    grid-column: 1 / -1;
    justify-items: start;
    text-align: start;
  }

  .quick-totals {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- WhatsApp inbox ---------- */
.wa-panel .admin-panel-head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wa-panel .admin-panel-head h3 svg {
  width: 20px;
  height: 20px;
  color: #12b76a;
}

.wa-list {
  display: grid;
  gap: 8px;
}

.wa-conversation {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: #fff;
}

.wa-conversation.waiting {
  border-color: #12b76a;
}

.wa-conversation summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}

.wa-conversation summary::-webkit-details-marker {
  display: none;
}

.wa-conversation summary strong,
.wa-conversation summary small {
  display: block;
}

.wa-conversation summary small,
.wa-conversation summary time {
  color: var(--text-3);
  font-size: 12px;
}

.wa-badge {
  padding: 3px 9px;
  border-radius: 999px;
  background: #dcfae6;
  color: #067647;
  font-size: 12px;
}

.wa-thread {
  display: grid;
  gap: 6px;
  max-height: 360px;
  padding: 10px 14px;
  overflow-y: auto;
  border-top: 1px solid var(--hairline);
  background: #f4f6f3;
}

.wa-message {
  max-width: 78%;
  padding: 7px 10px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(16, 24, 40, 0.06);
}

.wa-message.in {
  justify-self: start;
}

.wa-message.out {
  justify-self: end;
  background: #dcf8c6;
}

.wa-message small {
  display: block;
  color: #067647;
  font-size: 11px;
  font-weight: 700;
}

.wa-message p {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-line;
}

.wa-message time {
  display: block;
  margin-top: 2px;
  color: var(--text-3);
  font-size: 10.5px;
}

.wa-reply {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--hairline);
}

.wa-reply input {
  flex: 1;
  min-height: 38px;
  padding: 6px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  font: inherit;
}

.wa-closed {
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--hairline);
  color: var(--text-3);
  font-size: 13px;
}

.wa-steps {
  margin: 0 0 12px;
  padding-inline-start: 20px;
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.7;
}

.wa-steps code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--bg-soft);
  font-size: 12px;
  word-break: break-all;
}

.wa-on {
  color: #067647;
}

.wa-off {
  color: #b54708;
}

/* ---------- Each rarity's own shine ----------
   Drawn over the card's picture, lined up with it by the page. Each rarity lights the parts that
   are foil on the real card: the name's letters, the art, the frame or all of it, in its own
   pattern. The page paints it as a still picture; the light on the gloss follows the pointer, or
   the phone as it tilts. */
@property --foil-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --foil-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

[data-foil-surface].foil-card:has(.rarity-shine)::before,
[data-foil-surface].foil-card:has(.rarity-shine)::after {
  display: none;
}

.rarity-shine {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 2.6% / 1.8%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.rarity-shine.aligned {
  opacity: 1;
}

/* The card painted in its foil, over the plain picture. */
.rarity-shine > canvas,
.rarity-shine > i {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* The light on the card's gloss, while the mouse is on it or the phone tilts it. */
.rarity-shine .shine-glint {
  background: radial-gradient(farthest-corner circle at var(--foil-x) var(--foil-y), rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 22%, transparent 48%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.shine-live .rarity-shine .shine-glint {
  opacity: 1;
}

/* A lifted picture in the grid would leave its shine behind, so foil cards keep still. */
.product-card:hover .product-media.shine-surface img {
  transform: none;
}

.rarity-caption {
  margin: 10px 2px 0;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.6;
}

.rarity-caption strong {
  color: var(--text);
}

.rarity-caption small {
  display: block;
  color: var(--text-3);
  font-size: 12px;
}

.rarity-caption small[hidden] {
  display: none;
}

.rarity-caption .text-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

/* ---------- The page as the server sends it ----------
   A product or card drawn in plain markup before the app runs, so it shows at once on a slow
   phone and search engines read it. The app's own page replaces it. */
.ssr-layout {
  padding-top: 24px;
  padding-bottom: 60px;
}

.ssr-card {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  margin-top: 16px;
}

.ssr-card img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}

.ssr-copy h1 {
  margin: 0 0 8px;
  color: var(--text);
}

.ssr-meta,
.ssr-text {
  color: var(--text-2);
  line-height: 1.7;
}

.ssr-price {
  color: var(--navy);
  font-size: 22px;
  font-weight: 700;
}

.ssr-copy h2 {
  margin: 22px 0 8px;
  color: var(--text);
  font-size: 17px;
}

.ssr-list {
  margin: 0;
  padding-inline-start: 20px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.8;
}

/* A card's real photos, and the rarity guide, as the server draws them. */
.ssr-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.ssr-gallery figure {
  margin: 0;
}

.ssr-gallery img,
.ssr-rarity img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.ssr-gallery figcaption {
  color: var(--text-3);
  font-size: 12px;
}

.ssr-rarity {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 22px;
}

.ssr-rarity h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.ssr-rarity p {
  margin: 0;
  color: var(--text-2);
  line-height: 1.7;
}

@media (max-width: 720px) {
  .ssr-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .ssr-card img {
    max-width: 280px;
    margin: 0 auto;
  }

  .ssr-rarity {
    grid-template-columns: 100px minmax(0, 1fr);
  }
}

/* ---------- The rarity guide ---------- */
.rarity-guide-index {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.rarity-guide-index a {
  padding: 7px 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.rarity-guide-list {
  display: grid;
  gap: 18px;
}

.rarity-guide-item {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: #fff;
  scroll-margin-top: 90px;
}

.rarity-guide-picture {
  position: relative;
  aspect-ratio: 813 / 1185;
}

.rarity-guide-picture > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

.rarity-guide-copy h2 {
  margin: 0 0 6px;
  font-size: 21px;
}

.rarity-guide-copy h2 small {
  color: var(--text-3);
  font-size: 13px;
  font-weight: 600;
}

.rarity-guide-copy p {
  margin: 0 0 8px;
  color: var(--text-2);
  line-height: 1.75;
}

.rarity-tier {
  font-weight: 700;
}

.rarity-tier span {
  color: #d9a21b;
  letter-spacing: 1px;
}

.rarity-source {
  color: var(--text-3);
  font-size: 12px;
}

@media (max-width: 640px) {
  .rarity-guide-item {
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 14px;
    padding: 12px;
  }

  .rarity-guide-copy h2 {
    font-size: 17px;
  }
}

/* ---------- Where a printing's price is going ---------- */
.variant-trend {
  display: inline-block;
  margin-inline-start: 6px;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 700;
}

.variant-trend.down,
.printing-trend.down {
  color: #13834a;
}

.variant-trend.up,
.printing-trend.up {
  color: #c2410c;
}

.printing-trend {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 0;
  color: var(--text-2);
  font-size: 13px;
}

.printing-trend p {
  margin: 0;
}

.trend-line {
  flex: 0 0 auto;
  width: 120px;
  height: 36px;
  overflow: visible;
}

.trend-line polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.photos-ready-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #eef6ff;
  color: #0d2a6b;
  font-size: 13px;
  font-weight: 600;
}

.photos-ready-note svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* ---------- Buying list, market prices and deposits ---------- */
.buy-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.buy-actions .button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.buy-actions .button svg {
  width: 16px;
  height: 16px;
}

.buy-qty {
  width: 64px;
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  font: inherit;
}

.price-change {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.price-change.up {
  background: #dcfae6;
  color: #067647;
}

.price-change.down {
  background: #fee4e2;
  color: #b42318;
}

.deposit-note {
  display: grid;
  gap: 8px;
  margin: 4px 0 14px;
  padding: 14px;
  border: 1px solid #fedf89;
  border-radius: 14px;
  background: #fffaeb;
  text-align: start;
}

.deposit-note p {
  margin: 0;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.6;
}

.deposit-note strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}

.deposit-note strong svg {
  width: 18px;
  height: 18px;
  color: #067647;
}

.deposit-transfer bdi {
  font-weight: 700;
}

.deposit-cell {
  display: block;
  margin: 4px 0;
  color: #b54708;
}

.deposit-cell.paid {
  color: #067647;
}

.deposit-cell .text-link,
.want-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.want-link {
  justify-self: start;
  font-size: 13px;
}

/* ---------- A shopper's collection ---------- */
.collection-signin {
  padding: 10px 16px 60px;
  text-align: center;
}

.collection-layout {
  display: grid;
  gap: 18px;
}

.collection-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.collection-stats > div {
  display: grid;
  gap: 2px;
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: #fff;
}

.collection-stats small {
  color: var(--text-3);
  font-size: 12.5px;
}

.collection-stats strong {
  color: var(--text);
  font-size: 22px;
}

.collection-add-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: #fff;
}

.collection-add-panel > .button {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
}

.collection-add-panel > .button svg {
  width: 18px;
  height: 18px;
}

.collection-search {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.collection-search select,
.collection-search input {
  min-height: 42px;
  padding: 6px 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  background: #fff;
  font: inherit;
}

.collection-search input {
  flex: 1 1 200px;
}

.collection-search .button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.collection-results .catalog-tile {
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.collection-add {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.collection-add > img {
  width: 90px;
  border-radius: 8px;
}

.collection-add-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  grid-column: 1 / -1;
  gap: 10px;
}

.collection-add-actions .text-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.collection-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.collection-columns h2 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 18px;
}

.collection-list {
  display: grid;
  gap: 8px;
}

.collection-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: #fff;
}

.collection-row.want {
  grid-template-columns: 46px minmax(0, 1fr) auto auto;
}

.collection-row img {
  width: 46px;
  aspect-ratio: 63 / 88;
  border-radius: 5px;
  object-fit: cover;
  background: var(--bg-soft);
}

.collection-row strong {
  display: block;
  color: var(--text);
}

.collection-row small {
  display: block;
  color: var(--text-3);
  font-size: 12px;
}

.collection-row > b {
  display: grid;
  justify-items: end;
  color: var(--text);
}

.collection-row > b small {
  font-weight: 500;
}

.collection-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.qty-step {
  width: 28px;
  height: 28px;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  cursor: pointer;
}

.collection-controls .text-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.want-state {
  color: var(--text-3);
  font-size: 12.5px;
}

.want-state.met {
  color: #067647;
  font-weight: 700;
}

@media (max-width: 760px) {
  .collection-columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .collection-row.want {
    grid-template-columns: 46px minmax(0, 1fr) auto;
  }

  .collection-row.want .want-state {
    grid-column: 2;
  }
}

/* Where a printing's own scan came from. */
.scan-credit {
  margin: 6px 2px 0;
  color: var(--text-3);
  font-size: 12px;
}

/* ---------- The picture up close ---------- */
#productPageImage {
  cursor: zoom-in;
}

.zoom-button {
  position: absolute;
  z-index: 4;
  bottom: 14px;
  inset-inline-end: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(16, 20, 28, 0.62);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.zoom-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.modal-layer:has(.zoom-modal) {
  padding: 0;
}

.modal-card.zoom-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #0d1016;
  transform: none;
}

.zoom-stage {
  position: relative;
  display: grid;
  flex: 1;
  min-height: 0;
  padding: 16px;
  overflow: hidden;
  place-items: center;
  cursor: zoom-in;
  touch-action: none;
  user-select: none;
}

.zoom-stage.zoomed {
  cursor: grab;
}

.zoom-card {
  position: relative;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 813 / 1185;
  transform-origin: center;
  will-change: transform;
}

.zoom-card > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  pointer-events: none;
}

.zoom-hint {
  margin: 0;
  padding: 10px 16px 14px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  text-align: center;
}

/* ---------- Two printings side by side ---------- */
.compare-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.compare-link svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.modal-card.compare-modal {
  position: relative;
  width: min(860px, 100%);
  padding: 26px;
}

.printing-compare h2 {
  margin: 0 0 4px;
}

.printing-compare > p {
  margin: 0 0 16px;
  color: var(--text-2);
}

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.compare-side {
  display: grid;
  gap: 10px;
  margin: 0;
}

.compare-side select {
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 13px;
}

.compare-picture {
  position: relative;
  display: grid;
  aspect-ratio: 813 / 1185;
  place-items: center;
}

.compare-picture > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.compare-side figcaption {
  display: grid;
  gap: 2px;
  text-align: center;
}

.compare-side figcaption small {
  color: var(--text-3);
  font-size: 12px;
}

.compare-side figcaption b {
  font-size: 18px;
}

.compare-gap {
  margin: 16px 0 0;
  text-align: center;
  font-size: 15px;
}

@media (max-width: 560px) {
  .modal-card.compare-modal {
    padding: 18px 12px;
  }

  .compare-grid {
    gap: 10px;
  }
}

/* ---------- The shop's own photos, for the staff ---------- */
.printing-photo-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--hairline);
  font-size: 13px;
}

.printing-photo-admin > span {
  color: var(--text-3);
}

.printing-photo-admin .text-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

.modal-card.picture-refresh-modal {
  position: relative;
  width: min(760px, 100%);
  padding: 26px;
}

.picture-refresh h2 {
  margin: 0 0 6px;
}

.picture-refresh > p {
  margin: 0 0 10px;
  color: var(--text-2);
  font-size: 14px;
}

.picture-refresh .picture-refresh-status {
  color: var(--text);
  font-weight: 700;
}

.picture-refresh-list {
  display: grid;
  gap: 8px;
  max-height: 52vh;
  margin-bottom: 14px;
  overflow-y: auto;
}

.picture-refresh-row {
  display: grid;
  grid-template-columns: auto 64px 64px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.picture-refresh-row figure {
  margin: 0;
  text-align: center;
}

.picture-refresh-row img {
  width: 64px;
  height: 93px;
  object-fit: contain;
}

.picture-refresh-row figcaption,
.picture-refresh-row small,
.picture-refresh-row em {
  display: block;
  color: var(--text-3);
  font-size: 11.5px;
  font-style: normal;
}

.picture-refresh-row strong {
  display: block;
  font-size: 14px;
}

.picture-refresh-row b {
  font-size: 18px;
}

.picture-refresh-row.missing-row {
  grid-template-columns: 64px 1fr auto auto;
  cursor: default;
}

.missing-row .button {
  cursor: pointer;
}