:root {
  --bg-light: #f9f9fb;
  --text-light: #222;
  --primary-light: #ff6a00;
  --accent-light: #ff6600;

  /* light theme header background (with alpha) */
  --header-bg-light: #4d221173;

  --bg-dark: #121212;
  --text-dark: #e5e5e7;
  --primary-dark: #7a77ff;
  --accent-dark: #ff944d;

  --transition: 0.5s ease;
}

/* Utility for screen-reader-only labels */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Base */
body {
  margin: 0;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--bg-light);
  color: var(--text-light);
  transition: background var(--transition), color var(--transition);
  overflow-x: hidden;
  position: relative;
}

/* Header: unified styles taken from index.php to ensure consistency */
header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 14px 40px;
  background: rgba(0,0,0,0.03);
  position: sticky;
  top: 0;
  z-index: 120;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

body.dark header { border-bottom: 1px solid rgba(255,255,255,0.05); }

header h1 { margin: 0; font-size: 1.8rem; color: var(--primary-light); transition: color var(--transition); }
body.dark header h1 { color: var(--primary-dark); }


/* center nav in the middle column */
header .site-nav { grid-column: 2; justify-self: center; }
header nav ul { display:flex; gap:18px; align-items:center; margin:0; padding:0; }
header nav a { margin: 0; text-decoration: none; font-weight: 600; color: inherit; padding:6px 12px; border-radius:999px; }

.nav-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 12px; }

/* Language selector in the header */
#lang-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid rgba(0,0,0,0.08);
  background: transparent;
  color: inherit;
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  height: 38px;
}
body.dark #lang-select { border-color: rgba(255,255,255,0.08); }

/* Custom themed language picker (replaces native dropdown visually) */
.lang-picker { position: relative; display: inline-block; }
.lang-picker-button { border: 1px solid rgba(0,0,0,0.08); background: transparent; color: inherit; padding: 6px 10px; border-radius: 8px; font-weight: 700; cursor: pointer; height: 38px; }
body.dark .lang-picker-button { border-color: rgba(255,255,255,0.08); }
.lang-picker-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 140px; background: #fff; color: #222; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); border: 1px solid rgba(0,0,0,0.06); display: none; z-index: 220; overflow: hidden; }
body.dark .lang-picker-menu { background: #161616; color: var(--text-dark); box-shadow: 0 8px 24px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.06); }
.lang-picker-menu.show { display: block; }
.lang-picker-menu a { display: block; padding: 10px 12px; text-decoration: none; color: inherit; font-weight: 700; }
.lang-picker-menu a:hover { background: rgba(0,0,0,0.04); }
body.dark .lang-picker-menu a:hover { background: rgba(255,255,255,0.04); }

/* Keep native select available for screen-readers but visually hidden */
.lang-select { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden; }

/* small caret tweak for browsers that show native arrow */
#lang-select::-ms-expand { display: none; }

@media (max-width:640px) {
  #lang-select { padding: 6px 8px; font-size: 0.95rem; height: 36px; }
}

.btn-login { background: none; border: 2px solid transparent; color: var(--primary-light); padding: 8px 12px; border-radius: 10px; font-weight: 700; transition: background 0.18s, color 0.18s, border-color 0.18s; cursor: pointer; }
.btn-login.primary-outline { border-color: var(--primary-light); }
body.dark .btn-login { color: var(--primary-dark); }
.btn-login:hover { background: var(--primary-light); color: #fff; border-color: var(--primary-light); }
body.dark .btn-login:hover { background: var(--primary-dark); color: var(--text-dark); border-color: var(--primary-dark); }

.theme-toggle { background: none; border: 2px solid currentColor; padding: 5px 12px; border-radius: 12px; cursor: pointer; font-size: 1rem; }

/* Focus outlines similar to index */
.hero .btn:focus, .btn-login:focus, .theme-toggle:focus { outline: 3px solid var(--primary-light); outline-offset: 3px; }
body.dark .hero .btn:focus, body.dark .btn-login:focus, body.dark .theme-toggle:focus { outline: 3px solid var(--primary-dark); }

/* Ensure header rules have precedence over older rules */
header nav ul { gap: 18px; }

body.dark {
  background: var(--bg-dark);
  color: var(--text-dark);
}

/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 10%;
  background: rgba(0,0,0,0.06);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 100;
}

header h1 {
  margin: 0;
  font-size: 1.8rem;
  color: var(--primary-light);
  transition: color var(--transition);
}

body.dark header h1 {
  color: var(--primary-dark);
}

nav a {
  margin: 0 8px;
  text-decoration: none;
  font-weight: 600;
  color: var(--primary-light);
  transition: background 0.2s, color 0.2s, opacity 0.2s;
  padding: 6px 12px;
  border-radius: 999px;
  border: 2px solid transparent;
  display: inline-block;
}

/* Logo sizing (header / hero) */
/* Header logo sizing: reduced for a cleaner header */
.site-logo { width: 180px; height: 64px; max-width: 100%; display: block; }

.hero img { max-height: 200px; height: auto; width: auto; }

/* Theme toggle: improved visual */
.theme-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  width:46px;
  height:30px;
  padding:0 6px;
  border-radius:999px;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.08);
  color: var(--primary-light);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  position: relative;
}
.theme-toggle .dot {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: currentColor;
  display: block;
  transition: left 0.18s ease, transform 0.18s ease;
}
.theme-toggle.dark { background: rgba(0,0,0,0.5); color: var(--primary-dark); border-color: rgba(255,255,255,0.06); }
.theme-toggle.dark .dot { left: calc(100% - 6px - 18px); }

/* Profile button (round) and dropdown menu */
.profile-wrap { position: relative; display: inline-block; margin-left: 8px; }
.profile-button {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  padding: 0;
  border: 2px solid rgba(0,0,0,0.06);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
}
.profile-button img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.dark .profile-button { border-color: rgba(255,255,255,0.06); }
.profile-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 180px; background: #fff; color: #222; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); border: 1px solid rgba(0,0,0,0.06); display: none; z-index: 220; overflow: hidden; }
body.dark .profile-menu { background: #161616; color: var(--text-dark); box-shadow: 0 8px 24px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.06); }
.profile-menu.show { display: block; }
.profile-menu a { display: block; padding: 10px 12px; text-decoration: none; color: inherit; font-weight: 700; }
.profile-menu a:hover { background: rgba(0,0,0,0.04); }
body.dark .profile-menu a:hover { background: rgba(255,255,255,0.04); }

/* Auth hero (login/register) */
.auth-hero {
  padding: 48px 20px;
  background: linear-gradient(90deg, rgba(74,71,163,0.06), rgba(255,255,255,0.02));
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.form-panel { padding: 28px; max-width: 1100px; margin: 12px auto 24px; border-radius: 14px; box-shadow: 0 12px 36px rgba(0,0,0,0.08); display: flex; flex-direction: column; gap: 18px; align-items: stretch; box-sizing: border-box; overflow-x: hidden; width: calc(100% - 48px); }

/* Admin: wider form panels for product management pages */
.admin-full .form-panel {
  /* make admin panel content fill its grid column entirely so the central
     outlined box expands to the available space (keeps the left tools column)
     intact. Use a modest inner padding to avoid touching page edges. */
  max-width: none;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

@media (max-width:1200px) {
  .admin-full .form-panel { max-width: 100%; width: calc(100% - 32px); }
}

/* Allow full-width containers (e.g., checkout / account settings) to expand without internal horizontal scrollbars */
.container.container-full .form-panel,
.container-full .form-panel {
  width: calc(100% - 48px) !important;
  max-width: none !important;
  overflow-x: visible !important;
  overflow: visible !important;
}
.form-actions { justify-content: flex-end; gap: 12px; }
.btn-primary { padding: 12px 22px; }
.btn-secondary { padding: 8px 16px; border: 2px solid transparent; }

/* Control hero brand logo size (shrink large inline images) */
.hero-logo { height: 120px; width: auto; vertical-align: middle; margin-right: 10px; }
.auth-hero .hero-logo { height: 140px; }

@media (max-width:900px) { .hero-logo { height: 90px; } }
@media (max-width:480px) { .hero-logo { height: 64px; } }

nav a:hover {
  background: var(--primary-light);
  color: #fff;
  opacity: 1;
  border-color: var(--primary-light);
}

body.dark nav a { color: var(--primary-dark); }
body.dark nav a:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--text-dark); }

/* Nav list layout (fix bullets and vertical stacking) */
nav ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 18px;
  align-items: center;
}

nav ul li { list-style: none; }

/* Ensure nav items don't show bullets in all browsers */
nav, nav ul, nav li { list-style: none; }
nav li { display: inline-block; }

/* Ensure list marker removed on modern browsers */
nav ul li::marker { content: none; }

/* Logo image sizing inside header */
/* Ensure header image uses explicit size to match .site-logo */
header h1 img { width: 180px; height: 64px; display: block; }

/* site-logo class for pages that include it (responsive) */
.site-logo { height: auto; display: block; }

@media (max-width:900px) { .site-logo { width: 160px; height: 58px; } }
@media (max-width:520px) { .site-logo { width: 140px; height: 48px; } }

/* Utility text */
.muted { color: #6b6b6b; }
.muted.highlight { color: #fff; font-weight: 700; }

/* Info card helpers and grid */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: 30px auto;
  padding: 0 6%;
}
/* Admin card/grid styles moved to admin.css */

/* CTA button contrast in both themes */
.cta .button { background: var(--primary-light); color: #fff; border-radius: 10px; padding: 12px 20px; display:inline-block; }
body.dark .cta .button { background: var(--primary-dark); color: #fff; }

/* CTA button used in some pages */
.cta { text-align: center; margin: 20px 0; }
.cta .button, .cta .btn-primary { display: inline-block; padding: 12px 20px; border-radius: 10px; background: var(--primary-light); color: #fff; text-decoration: none; font-weight: 700; }
.cta .button:hover { opacity: 0.95; }

/* Small tweaks for it-list and pricing grid */
.it-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  padding: 24px 6%;
  max-width: 1200px;
  margin: 0 auto 8px auto;
}
.it-card {
  background: var(--bg-light);
  padding: 28px 22px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.it-card h3 { color: var(--primary-light); font-size: 1.35rem; margin: 6px 0 12px; text-align: center; }
.price { font-size: 1.05rem; color: #6b6b6b; text-align: center; margin: 6px 0 8px; font-weight: 700; }
.it-list { text-align: left; padding-left: 18px; margin-top: 12px; color: #6b6b6b; }
.it-list li { margin-bottom: 6px; opacity: 0.9; }

body.dark .it-card { background: #111; box-shadow: 0 10px 28px rgba(0,0,0,0.6); color: var(--text-dark); }
body.dark .it-card h3 { color: var(--primary-dark); }
body.dark .price { color: #aaa; }
body.dark .it-list li { color: #bdbdbd; opacity: 0.95; }

/* Theme Toggle */
.theme-toggle {
  background: none;
  border: 2px solid currentColor;
  padding: 5px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
}

/* Hero */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 100px 20px 60px;
  position: relative;
  z-index: 1;
}

.hero h2 {
  font-size: 2.4rem;
  margin: 0;
  max-width: 980px;
}

.hero p {
  font-size: 1.05rem;
  margin: 0;
  max-width: 920px;
  color: inherit;
}

.hero-intro {
  --hero-ignite: var(--primary-light);
  --hero-ignite-2: var(--accent-light);
  --hero-ignite-soft: rgba(255, 106, 0, 0.24);
  --hero-outline: rgba(34, 34, 34, 0.18);
  --hero-shell: rgba(255, 255, 255, 0.46);
  --hero-shell-edge: rgba(255, 255, 255, 0.75);
  overflow: visible;
}

body.dark .hero-intro {
  --hero-ignite: var(--primary-dark);
  --hero-ignite-2: var(--accent-dark);
  --hero-ignite-soft: rgba(122, 119, 255, 0.22);
  --hero-outline: rgba(255, 255, 255, 0.22);
  --hero-shell: rgba(18, 18, 18, 0.46);
  --hero-shell-edge: rgba(255, 255, 255, 0.08);
}

.hero-intro-logo {
  margin: 0;
  opacity: 0;
  position: relative;
  transform: translateY(24px) scale(0.84);
  filter: blur(10px);
  transform-origin: center center;
  overflow: hidden;
  animation: heroLogoReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards 2.9s;
}

.hero-intro-logo .hero-logo {
  position: relative;
  display: block;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.12));
}

body.dark .hero-intro-logo .hero-logo {
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.34));
}

.hero-intro-logo::after {
  content: "";
  position: absolute;
  inset: -18% -28%;
  background: linear-gradient(105deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 35%,
    rgba(255, 255, 255, 0.78) 48%,
    rgba(255, 255, 255, 0.16) 58%,
    rgba(255, 255, 255, 0) 76%);
  opacity: 0;
  transform: translateX(-165%) skewX(-18deg);
  pointer-events: none;
  mix-blend-mode: screen;
  animation: heroLogoSheen 1.1s ease-out forwards 3.28s;
}

.hero-intro-title {
  position: relative;
  display: inline-flex;
  justify-content: center;
  max-width: min(980px, 100%);
  margin: 0;
  padding: 20px 32px;
  border-radius: 26px;
  background: linear-gradient(180deg, var(--hero-shell-edge), var(--hero-shell));
  box-shadow: 0 16px 40px rgba(10, 12, 18, 0.08);
  backdrop-filter: blur(10px);
  isolation: isolate;
}

body.dark .hero-intro-title {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}

.hero-intro-title span {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 1px var(--hero-outline);
  text-shadow: none;
  opacity: 0.92;
  letter-spacing: 0.01em;
  animation: heroTitleGlow 1.35s ease forwards 2s, heroTitleSettle 1.1s ease forwards 2s;
}

.hero-intro-title::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: 26px;
  background:
    linear-gradient(115deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.08) 14%,
      var(--hero-ignite) 30%,
      var(--hero-ignite-2) 48%,
      rgba(255, 255, 255, 0.78) 58%,
      var(--hero-ignite) 70%,
      rgba(255, 255, 255, 0.06) 86%,
      rgba(255, 255, 255, 0.03) 100%);
  background-size: 240% 100%;
  opacity: 0;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  box-shadow: 0 0 0 rgba(255, 106, 0, 0);
  animation: heroFrameSweep 1.9s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.28s, heroFrameRest 1s ease-out forwards 2.2s;
}

.hero-intro-title::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 32px;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 24%),
    linear-gradient(90deg, rgba(255, 255, 255, 0), var(--hero-ignite-soft), rgba(255, 255, 255, 0));
  filter: blur(12px);
  opacity: 0;
  transform: translateX(-28%) scaleX(0.78);
  animation: heroFrameSpark 1.3s ease-out forwards 0.5s;
}

.hero-intro-subtitle {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(8px);
  animation: heroSubtitleReveal 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards 1.45s;
}

.hero-intro-actions {
  opacity: 1;
  transform: none;
}

.hero-intro-actions .btn {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  animation: heroButtonReveal 0.82s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-intro-actions .btn:nth-child(1) {
  animation-delay: 3.85s;
}

.hero-intro-actions .btn:nth-child(2) {
  animation-delay: 4.05s;
}

.hero-intro-actions .btn:nth-child(3) {
  animation-delay: 4.25s;
}

.hero-intro-actions .btn-featured.pulse {
  animation:
    heroButtonReveal 0.82s cubic-bezier(0.16, 1, 0.3, 1) forwards 4.05s,
    ruPulse 3.6s ease-in-out infinite 5s;
}

@keyframes heroLogoReveal {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.84);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes heroLogoSheen {
  0% {
    opacity: 0;
    transform: translateX(-165%) skewX(-18deg);
  }
  18% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
    transform: translateX(165%) skewX(-18deg);
  }
}

@keyframes heroFrameSweep {
  0% {
    opacity: 0;
    background-position: 130% 50%;
    box-shadow: 0 0 0 rgba(255, 106, 0, 0);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    background-position: -35% 50%;
    box-shadow: 0 0 28px var(--hero-ignite-soft), 0 0 56px rgba(255, 255, 255, 0.08);
  }
}

@keyframes heroFrameSpark {
  0% {
    opacity: 0;
    transform: translateX(-28%) scaleX(0.78);
  }
  22% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(28%) scaleX(1.08);
  }
}

@keyframes heroFrameRest {
  from {
    box-shadow: 0 0 28px var(--hero-ignite-soft), 0 0 56px rgba(255, 255, 255, 0.08);
  }
  to {
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.04), 0 0 14px var(--hero-ignite-soft);
  }
}

@keyframes heroSubtitleReveal {
  from {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes heroTitleGlow {
  0% {
    color: transparent;
    -webkit-text-stroke: 1px var(--hero-outline);
    text-shadow: none;
  }
  35% {
    color: transparent;
    text-shadow: 0 0 18px var(--hero-ignite-soft);
  }
  100% {
    color: inherit;
    -webkit-text-stroke: 0 transparent;
    text-shadow: 0 0 18px var(--hero-ignite-soft), 0 0 42px rgba(255, 255, 255, 0.22);
  }
}

@keyframes heroTitleSettle {
  0% {
    transform: translateY(6px);
    letter-spacing: 0.04em;
  }
  100% {
    transform: translateY(0);
    letter-spacing: 0.01em;
  }
}

@keyframes heroActionsReveal {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroButtonReveal {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-intro-logo,
  .hero-intro-logo::after,
  .hero-intro-title span,
  .hero-intro-title::before,
  .hero-intro-title::after,
  .hero-intro-subtitle,
  .hero-intro-actions,
  .hero-intro-actions .btn {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: inset(0 0 0 0) !important;
  }

  .hero-intro-logo {
    filter: none !important;
  }

  .hero-intro-logo::after {
    display: none;
  }

  .hero-intro-title span {
    color: inherit;
    -webkit-text-stroke: 0 transparent;
    text-shadow: none;
  }

  .hero-intro-title::before,
  .hero-intro-title::after {
    display: none;
  }
}

.hero .btn {
  padding: 12px 28px;
  margin: 6px 10px;
  background: var(--accent-light);
  color: #fff;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: transform 0.18s, background 0.18s;
}

.hero .btn-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

body.dark .hero .btn {
  background: var(--accent-dark);
}

.hero .btn:hover {
  transform: scale(1.05);
}

/* Featured RuDiCo button: slightly larger, theme-aware and subtle animation */
.hero .btn-featured {
  padding: 14px 34px;
  font-size: 1.05rem;
  background: var(--primary-light);
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  transform: translateZ(0);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.18s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}

body.dark .hero .btn-featured {
  background: var(--primary-dark);
  color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}

.hero .btn-featured:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
}

@keyframes ruPulse {
  0% { transform: translateZ(0) scale(1); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
  50% { transform: translateZ(0) scale(1.06); box-shadow: 0 18px 40px rgba(0,0,0,0.18); }
  100% { transform: translateZ(0) scale(1); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
}

/* Apply pulse outside the homepage intro sequence, which manages its own timing */
.hero:not(.hero-intro) .btn-featured.pulse {
  animation: ruPulse 3.6s ease-in-out infinite;
  will-change: transform, box-shadow;
}

/* Section */
section {
  padding: 60px 20px;
  text-align: center;
  position: relative;
  z-index: 1;
}

section h3 {
  font-size: 2rem;
  margin-bottom: 30px;
  color: var(--primary-light);
  transition: color var(--transition);
}

body.dark section h3 {
  color: var(--primary-dark);
}

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
}

.card {
  background: var(--bg-light);
  padding: 25px;
  border-radius: 20px;
  max-width: 300px;
  flex: 1 1 250px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  transition: background var(--transition), box-shadow var(--transition), transform 0.3s;
}

body.dark .card {
  background: #1e1e1e;
  box-shadow: 0 5px 20px rgba(0,0,0,0.6);
}

.card:hover {
  transform: translateY(-5px);
}

.card h4 {
  color: var(--primary-light);
  margin-bottom: 12px;
  transition: color var(--transition);
}

body.dark .card h4 {
  color: var(--primary-dark);
}

/* Ticketing styles */
.ticket-controls { display:flex; gap:12px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.ticket-search { display:flex; gap:8px; align-items:center; }
.ticket-search input[type="search"] { padding:8px 10px; border-radius:8px; border:1px solid rgba(0,0,0,0.08); min-width:240px; }
.ticket-filter { padding:8px 10px; border-radius:8px; border:1px solid rgba(0,0,0,0.08); background:#fff; }
body.dark .ticket-search input[type="search"], body.dark .ticket-filter { background:#0f0f11; color:var(--text-dark); border-color:rgba(255,255,255,0.06); }

.ticket-list { display:flex; flex-direction:column; gap:12px; }
.ticket-row { display:flex; justify-content:space-between; align-items:center; padding:14px; border-radius:10px; background: #fff; border:1px solid rgba(0,0,0,0.04); }
body.dark .ticket-row { background:#0f0f11; border-color:rgba(255,255,255,0.03); }
.ticket-meta { color:#666; font-size:0.95rem; }
.ticket-subject { font-size:1.05rem; font-weight:700; }
.ticket-badge { display:inline-block; padding:6px 10px; border-radius:16px; color:#fff; font-weight:700; font-size:0.85rem; }
.ticket-actions { display:flex; gap:8px; align-items:center; }

.ticket-detail { max-width:900px; margin:0 auto; }
.ticket-panel { padding:20px; border-radius:12px; background:#fff; border:1px solid rgba(0,0,0,0.04); box-shadow:0 12px 30px rgba(0,0,0,0.06); }
body.dark .ticket-panel { background:#0f0f11; border-color:rgba(255,255,255,0.03); box-shadow:none; }
.ticket-info { display:grid; grid-template-columns:1fr 320px; gap:18px; align-items:start; }
.ticket-info .left { min-width:0; }

/* Cookie consent banner styles */
.cookie-consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 18px;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cookie-inner {
  max-width: 1100px;
  width: 100%;
  background: rgba(255,255,255,0.96);
  color: var(--text-light);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  gap: 12px;
}
body.dark .cookie-inner {
  background: rgba(18,18,18,0.94);
  color: var(--text-dark);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.cookie-text { flex: 1 1 auto; font-size: 0.98rem; }
.cookie-actions { display:flex; gap:8px; align-items:center; }
.cookie-btn { padding: 8px 12px; border-radius: 8px; font-weight:700; }
.cookie-link { background: transparent; border: 2px solid transparent; color: inherit; text-decoration: none; }
.cookie-accept { background: var(--primary-light); color: #fff; border: none; }
body.dark .cookie-accept { background: var(--primary-dark); }
.cookie-reject { background: transparent; border: 1px solid rgba(0,0,0,0.08); }
body.dark .cookie-reject { border-color: rgba(255,255,255,0.06); }

@media (max-width:720px) {
  .cookie-inner { padding: 12px; flex-direction: column; align-items: stretch; text-align: left; }
  .cookie-actions { justify-content: flex-end; }
}
.ticket-info .right { min-width:0; }
.ticket-events { margin-top:12px; }
.ticket-event { padding:10px; border-radius:8px; background:rgba(0,0,0,0.03); margin-bottom:8px; }
body.dark .ticket-event { background:rgba(255,255,255,0.02); }

.muted.small { font-size:0.85rem; color:#888; }

.disabled { opacity:0.5; pointer-events:none; }

/* state-specific badge colors (improve contrast) */
.badge-open { background:#2b7a78; }
.badge-pending { background:#f6c90e; color:#111; }
.badge-scheduled { background:#6a4c93; }
.badge-suspended { background:#ff6b6b; }
.badge-closed { background:#4caf50; }

/* Ticket detail visual improvements */
.ticket-header { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:18px; }
.ticket-header .left { flex:1 }
.ticket-header .right { text-align:right; min-width:220px }
.ticket-subject-big { font-size:1.5rem; font-weight:800; margin:0 0 6px 0; }
.ticket-code { color:#666; font-weight:700; }
.ticket-meta-row { display:flex; gap:12px; align-items:center; margin-top:6px; }

.messages { margin-top:18px; display:flex; flex-direction:column; gap:12px; }
.message-bubble { max-width:82%; padding:12px 14px; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,0.04); }
.message-bubble .meta { font-size:0.85rem; color:#666; margin-bottom:6px; }
.message-bubble.public { background: #f6f9ff; align-self:flex-start; }
.message-bubble.internal { background: #fff8f0; align-self:flex-end; }
body.dark .message-bubble.public { background: rgba(26,54,95,0.18); }
body.dark .message-bubble.internal { background: rgba(95,30,0,0.12); }

/* Enhanced ticket detail form controls and button animations */
.ticket-panel { padding: 28px; border-radius: 14px; }
.ticket-header .left { padding-right: 12px; }
.ticket-header .right { min-width:240px; }

.ticket-actions .form-field { margin-bottom: 14px; }
.ticket-actions label { display:block; font-weight:700; margin-bottom:6px; color:var(--primary-light); }
.ticket-actions .form-input, .ticket-actions .form-textarea, .ticket-actions select, .ticket-actions input[type="text"] {
  width:100%; max-width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(0,0,0,0.08); background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.04);
  transition: transform 0.15s ease, box-shadow 0.18s ease, border-color 0.18s;
}
body.dark .ticket-actions .form-input, body.dark .ticket-actions .form-textarea { background:#0f0f11; border-color:rgba(255,255,255,0.04); color:var(--text-dark); }
.ticket-actions .form-input:focus, .ticket-actions .form-textarea:focus, .ticket-actions select:focus { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,102,0,0.06); border-color: var(--primary-light); outline: none; }
body.dark .ticket-actions .form-input:focus, body.dark .ticket-actions .form-textarea:focus { border-color: var(--primary-dark); box-shadow: 0 10px 30px rgba(122,119,255,0.06); }

/* Animated primary button */
.btn-animated {
  --g1: var(--primary-light); --g2: var(--accent-light);
  position: relative;
  display: inline-block;
  padding: 10px 18px;
  border-radius: 12px;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  border: none;
  background: linear-gradient(90deg, var(--g1), var(--g2));
  box-shadow: 0 8px 26px rgba(255,106,0,0.12);
  transition: transform 0.18s cubic-bezier(.2,.9,.2,1), box-shadow 0.2s, filter 0.2s;
  overflow: hidden;
}
.btn-animated::after {
  content: '';
  position: absolute; inset: 0; left: -60%; background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06), rgba(255,255,255,0.12)); transform: skewX(-20deg); transition: left 0.9s ease;
}
.btn-animated:hover { transform: translateY(-3px) scale(1.02); filter: saturate(1.05); }
.btn-animated:hover::after { left: 160%; }
.btn-animated:active { transform: translateY(0); }

/* Subtle ghost secondary with hover glow */
.btn-ghost {
  background: transparent; border: 2px solid rgba(255,255,255,0.06); color: var(--primary-light); padding: 10px 14px; border-radius: 10px; font-weight:700;
  transition: background 0.18s, color 0.18s, transform 0.12s;
}
.btn-ghost:hover { background: rgba(255,102,0,0.06); color: #fff; transform: translateY(-2px); }

/* Message bubble improvements: avatars, spacing and subtle animations */
.message-row { display:flex; gap:12px; align-items:flex-start; }
.message-row.me { flex-direction:row-reverse; }
.message-avatar { width:44px; height:44px; border-radius:50%; background:linear-gradient(180deg,#fff,#f0f0f6); display:flex; align-items:center; justify-content:center; font-weight:700; color:#333; box-shadow:0 6px 18px rgba(0,0,0,0.06); }
.message-bubble { padding:14px 16px; transition: transform 0.18s, box-shadow 0.18s; }
.message-bubble:hover { transform: translateY(-3px); box-shadow:0 18px 40px rgba(0,0,0,0.08); }
.message-bubble .meta { display:flex; gap:10px; align-items:center; font-size:0.82rem; color:#666; }

/* Compact labels and code */
.ticket-code { display:inline-block; padding:6px 10px; border-radius:8px; background:rgba(0,0,0,0.04); font-weight:800; }
body.dark .ticket-code { background: rgba(255,255,255,0.03); }

/* Role badges for admin UI */
.role-badge { display:inline-block; padding:4px 8px; border-radius:8px; font-size:0.85rem; font-weight:700; margin-right:6px; color:#fff; }
.role-admin { background: #4caf50; }
.role-mod { background: #ff9800; }
body.dark .role-badge { box-shadow: 0 6px 18px rgba(0,0,0,0.12); }

/* Responsive layout and typography */
:root {
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --max-site-width: 1200px;
}

html { font-size: 16px; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; font-size: clamp(0.95rem, 1rem + 0.2vw, 1.05rem); line-height:1.5; }
h1 { font-size: clamp(1.25rem, 2.6vw, 2.25rem); }
h2 { font-size: clamp(1rem, 2vw, 1.6rem); }

/* Header / nav responsiveness */
.site-nav { display:flex; gap:18px; align-items:center; }
.site-nav ul { display:flex; gap:12px; list-style:none; margin:0; padding:0; }
.site-nav a { text-decoration:none; color:inherit; }
.nav-actions { display:flex; gap:8px; align-items:center; }
.mobile-menu-toggle { display:none; background:transparent;border:0;color:var(--primary-light);font-size:1.25rem;padding:8px 10px;border-radius:8px; }

/* Hide mobile nav header (logo + close) on desktop; show only on small screens via media query */
.mobile-nav-header { display: none; }

/* Small screens: hide regular nav, show hamburger */
@media (max-width: 900px) {
  .site-nav { display:none; }
  .mobile-menu-toggle { display:inline-flex; }
  body.nav-open .site-nav { display:block; position: absolute; left:0; right:0; top:64px; background: var(--panel-bg, #fff); padding:12px 16px; border-bottom:1px solid rgba(0,0,0,0.04); z-index: 9999; }
  body.nav-open .site-nav ul { display:block; }
  body.nav-open .site-nav ul li { padding:8px 0; }
}

/* Mobile nav visual enhancements */
@media (max-width: 900px) {
  .site-nav { box-shadow: 0 10px 30px rgba(0,0,0,0.08); transform-origin: top; transition: transform 220ms ease, opacity 220ms ease; }
  body.nav-open .site-nav { transform: translateY(0); opacity:1; }
  .site-nav ul { margin:8px 0 0 0; }
  .site-nav ul li { border-top: 1px solid rgba(0,0,0,0.04); padding: 12px 0; }
  .mobile-nav-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0 12px; }
  .mobile-nav-header .mobile-logo img { height:34px; width:auto; }
  .mobile-menu-close { background:transparent;border:0;font-size:1.25rem;padding:6px 8px; }
  /* overlay when nav open */
  body.nav-open::before { content: ''; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9998; }
}

/* Make images and media responsive */
img, video, iframe { max-width:100%; height:auto; display:block; }

/* Responsive tables */
.table-responsive { width:100%; overflow-x:auto; -webkit-overflow-scrolling: touch; }
.table-list { width:100%; border-collapse:collapse; }
.table-list th, .table-list td { padding:8px 10px; }

/* Ensure forms & inputs scale on small screens */
@media (max-width: 768px) {
  .form-field, .ticket-actions { width:100%; }
  .ticket-info { grid-template-columns: 1fr !important; }
  .ticket-panel { padding:18px; }
}

/* Utility: center container */
.container { max-width: var(--max-site-width); margin: 0 auto; padding: 0 16px; }

/* Responsive: ensure actions stack nicely */
@media (max-width:900px) {
  .ticket-actions { display:flex; flex-direction:column; gap:12px; }
  .ticket-header .right { width:100%; text-align:left; }
}

/* Stronger overrides to ensure ticket styles apply (higher specificity) */
.ticket-detail .btn-animated, .ticket-actions .btn-animated, .form-panel .btn-animated {
  padding: 12px 20px !important;
  font-size: 0.98rem !important;
  border-radius: 12px !important;
  letter-spacing: 0.2px;
}
.ticket-detail .btn-ghost, .ticket-actions .btn-ghost { 
  border-radius: 10px !important; 
  padding: 10px 14px !important; 
  color: var(--primary-light) !important; 
  background: transparent !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
}
body.dark .ticket-detail .btn-ghost, body.dark .ticket-actions .btn-ghost { border-color: rgba(255,255,255,0.06) !important; color: var(--primary-dark) !important; }

/* Assignment label spacing */
.assign-label { margin-left: 12px; display: inline-block; vertical-align: middle; }
.assign-label select { margin-left: 6px; }

/* Right column meta rows */
.meta-row { margin-bottom: 10px; }
.meta-row strong { display:block; margin-bottom:6px; }

/* Closed ticket box */
.ticket-closed { margin-top:10px; padding:14px; border-radius:10px; background:#fff8f0; border:1px solid rgba(0,0,0,0.04); }
body.dark .ticket-closed { background: rgba(95,30,0,0.06); border-color: rgba(255,255,255,0.04); }

/* Event cards */
.event-card { padding:10px 12px; border-radius:8px; margin-bottom:8px; background: rgba(0,0,0,0.02); border:1px solid rgba(0,0,0,0.03); }
body.dark .event-card { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.03); }
.event-card .event-title { font-weight:700; }
.event-card .event-time { color:#777; font-size:0.86rem; }

/* Message cards (override inline styles) */
.message-card { border:1px solid rgba(0,0,0,0.06); padding:12px; border-radius:8px; margin-bottom:10px; background: transparent; transition: transform 0.12s, box-shadow 0.12s; }
.message-card:hover { transform: translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,0.06); }
.message-public { background: transparent; }
.message-internal { background: #f9f9f9; }
body.dark .message-internal { background: rgba(255,255,255,0.03); }

/* Make selects and inputs in ticket-actions visually consistent */
.ticket-actions select, .ticket-actions input[type="text"], .ticket-actions input[type="datetime-local"], .ticket-actions .form-input {
  padding: 10px 12px !important; border-radius: 8px !important; border:1px solid rgba(0,0,0,0.08) !important; background:#fff !important; box-shadow: none !important;
}
body.dark .ticket-actions select, body.dark .ticket-actions input[type="text"] { background:#0f0f11 !important; color:var(--text-dark) !important; }

/* Ensure high contrast for badge inside right column */
.ticket-panel .ticket-badge { font-size:0.9rem; padding:6px 12px; border-radius:12px; }

/* Slightly larger subject/title */
.ticket-subject-big { font-size:1.6rem; }

/* Small helper to align assign label on small screens */
@media (max-width:520px) {
  .assign-label { display:block; margin-left:0; margin-top:8px; }
}

.event-timeline { margin-top:12px; border-left:2px solid rgba(0,0,0,0.06); padding-left:12px; }
.event-item { margin-bottom:10px; }
.event-item .time { font-size:0.85rem; color:#777; }

@media (max-width:900px) {
  .ticket-info { grid-template-columns:1fr; }
  .ticket-header { flex-direction:column; align-items:flex-start }
  .ticket-header .right { text-align:left }
  .message-bubble { max-width:100%; }
}

/* --- Amazon-inspired merge styles: override and refine Rudico look --- */
:root {
  --rudico-accent: #ff6a00;
  --amazon-accent: #ff9900;
  --amazon-header-bg: #131921;
  --amazon-header-text: #ffffff;
  --panel-bg: #ffffff;
  --muted: #6b6b6b;
}

/* Strong header styling like modern marketplace */
header {
  background: var(--header-bg-light, var(--amazon-header-bg));
  color: var(--amazon-header-text);
  padding: 12px 6%;
  align-items: center;
  gap: 18px;
}

/* ensure dark theme keeps its dark header background */
body.dark header { background: var(--amazon-header-bg); }

header .site-logo img { height:44px; }

/* Search bar in header */
.search-form { display:flex; align-items:center; flex:1; margin:0 18px; }
.search-form input[type="search"] {
  flex:1; padding:09px 17px; border-radius:4px 0 0 4px; border: none; font-size:14px;
}
.search-form button { background: var(--amazon-accent); color: #111; border: none; padding:10px 14px; border-radius:0 4px 4px 0; cursor:pointer; font-weight:700; }

.nav-actions { gap:10px; }
.nav-actions .btn-login { background: transparent; color: var(--amazon-header-text); border-color: transparent; }
.nav-actions .user-info { color: #fff; font-weight:600; }

/* Main container contrast (full width by default) */
main.container { width:100%; max-width:none; margin: 0; padding: 18px 24px; box-sizing: border-box; }

/* Product cards: Amazon-like listing with buy box */
.product-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:18px; }
.product-card { display:flex; background:var(--panel-bg); border-radius:8px; overflow:hidden; border:1px solid #e6e6e6; align-items:stretch; }
.product-thumb { width:240px; flex:0 0 240px; height:200px; background:#f6f6f6; display:flex; align-items:center; justify-content:center; }
.product-thumb img { width:100%; height:100%; object-fit:cover; }
.product-body { padding:12px 14px; flex:1; display:flex; flex-direction:column; }
.product-body h3 { font-size:1.05rem; margin:0 0 6px; color:#111; }
.product-body .muted { color:var(--muted); font-size:0.92rem; }
.product-meta { margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.product-price { font-size:1.15rem; color:#111; font-weight:800; }
.product-actions { display:flex; gap:8px; align-items:center; }
.btn-primary { background: var(--amazon-accent); color:#111; padding:8px 12px; border-radius:6px; font-weight:700; }
.btn-secondary { background:transparent; border:1px solid #ccc; color:#333; padding:8px 10px; border-radius:6px; }

/* Detail/compact layout for dashboard cards */
.dashboard .product-card { border:none; box-shadow:none; }

/* Responsive tweaks */
@media (max-width:720px) {
  .product-card { flex-direction:column; }
  .product-thumb { width:100%; height:220px; }
  .search-form { margin:8px 0; }
  /* Ensure product action buttons are visible and stack on small screens */
  .product-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .product-actions form { width:100%; margin:0; }
  .product-actions .btn-primary, .product-actions .btn-secondary, .product-actions form button {
    width:100%; display:block; box-sizing:border-box; text-align:center;
  }
}

/* Sidebar and small-screen layout fixes for shop page */
.shop-sidebar { width: 260px; }

.form-panel > section { flex: 1; }

@media (max-width: 900px) {
  .form-panel { flex-direction: column; }
  .shop-sidebar { width: 100%; margin-bottom: 16px; }
  .form-panel section { width: 100%; }
}

/* Ensure product grid shows at least one column on very small screens */
@media (max-width:480px) {
  .product-grid { grid-template-columns: 1fr !important; }
  .product-thumb { height: 200px; }
}

/* Make secondary buttons readable in dark theme */
body.dark .product-actions .btn-secondary, body.dark .btn-secondary {
  background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); color: #fff;
}

/* Ensure product action buttons have a sensible minimum width on desktop */
.product-actions .btn-primary, .product-actions .btn-secondary { min-width: 110px; }

@media (max-width:1100px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width:760px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Slight shadow and hover accent */
.product-card:hover { transform: translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,0.08); }

/* Footer-neutral adjustments */
footer { padding:24px 6%; background:#fafafa; color:#333; }

/* Ensure dark theme adapts the amazon-like palette */
body.dark header { background:#0b11144f; }
body.dark .product-card { background:#0f1113; border-color: rgba(255,255,255,0.04); }
body.dark .product-body h3, body.dark .product-price { color: #fff; }

/* small utility */
.rating { color:#ff9900; font-weight:700; }

/* Cart badge in header */
.cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 8px;
  border-radius: 999px;
  background: var(--amazon-accent);
  color: #111;
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  vertical-align: middle;
  box-shadow: 0 4px 10px rgba(0,0,0,0.16);
  border: 1px solid rgba(0,0,0,0.08);
}

.cart-badge::after {
  content: attr(data-count);
}

body.dark .cart-badge {
  background: var(--primary-dark);
  color: #fff;
  border-color: rgba(255,255,255,0.14);
}

@media (max-width:480px) {
  .cart-badge {
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    padding: 0 5px;
  }
}

/* Toast notifications */
.rudico-toast { position: fixed; right: 18px; bottom: 18px; background: rgba(0,0,0,0.9); color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,0.4); z-index: 99999; opacity: 0; transform: translateY(12px); transition: opacity 260ms ease, transform 260ms ease; }
.rudico-toast.show { opacity: 1; transform: translateY(0); }
.rudico-toast.success { background: linear-gradient(90deg,#1e8a3a,#3cd37a); color:#fff; }
.rudico-toast.error { background: linear-gradient(90deg,#c62828,#ff6b6b); color:#fff; }
.rudico-toast .message { font-weight:700; }


/* Marketplace-style card grid */
.marketplace-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; margin-top:18px; }
.market-card { background: var(--bg-light); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; box-shadow: 0 10px 30px rgba(0,0,0,0.08); transition: transform 0.18s ease, box-shadow 0.18s ease; border:1px solid rgba(0,0,0,0.06); }
.market-thumb { display:block; height:220px; overflow:hidden; background:#f6f6f6 }
.market-thumb img { width:100%; height:100%; object-fit:cover; display:block }
.market-body { padding:14px 16px; flex:1 }
.market-title { margin:0 0 8px 0; font-size:1.1rem }
.market-desc { margin:0 0 12px 0; color: #6b6b6b }
.market-footer { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-top:1px solid rgba(0,0,0,0.04); background:transparent }
.market-price { font-weight:800; color:var(--primary-light); }
.market-net { font-size:0.9rem; color:#666 }
.market-actions .btn-primary { padding:8px 12px }
.market-card:hover { transform:translateY(-6px); box-shadow:0 18px 48px rgba(0,0,0,0.12); }

@media (max-width:1000px) { .marketplace-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:620px) { .marketplace-grid { grid-template-columns: 1fr; } }

body.dark .market-card { background: #0f0f12; border-color: rgba(255,255,255,0.04); box-shadow: 0 10px 30px rgba(0,0,0,0.6); }


/* Admin-specific layout improvements */
.container {
  /* Use full viewport width; inner padding keeps readable content */
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0 24px;
  box-sizing: border-box;
}

/* Mobile off-canvas menu */
.mobile-menu-toggle { display:none; background:transparent; border:0; font-size:1.35rem; padding:8px 10px; cursor:pointer; color: var(--primary-light); }
.mobile-menu-toggle .hamburger { display:inline-block; width:28px; height:18px; position:relative; }
.mobile-menu-toggle .hamburger span { display:block; position:absolute; left:0; right:0; height:3px; background: currentColor; border-radius:3px; transition: transform 260ms ease, opacity 260ms ease; }
.mobile-menu-toggle .hamburger span:nth-child(1) { top:0; }
.mobile-menu-toggle .hamburger span:nth-child(2) { top:7.5px; }
.mobile-menu-toggle .hamburger span:nth-child(3) { bottom:0; }
.mobile-menu-toggle.active .hamburger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.mobile-menu-toggle.active .hamburger span:nth-child(2) { opacity:0; }
.mobile-menu-toggle.active .hamburger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.mobile-overlay { display:none; }
.mobile-menu { position:fixed; left:0; top:0; bottom:0; width:280px; max-width:80%; background:var(--bg-light); box-shadow: 0 20px 60px rgba(0,0,0,0.6); transform: translateX(-110%); transition: transform 260ms ease; z-index: 3000; padding:18px; overflow:auto; }
.mobile-menu .mobile-menu-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.mobile-menu .mobile-menu-list { list-style:none; margin:0; padding:8px 0; display:flex; flex-direction:column; gap:8px; }
.mobile-menu .mobile-menu-list a { display:block; padding:14px 16px; border-radius:8px; color:inherit; text-decoration:none; font-weight:700; text-align:left; }
.mobile-menu .mobile-menu-list li { display:block !important; transform: translateY(-12px); opacity:0; }
.mobile-menu.open .mobile-menu-list li { transform: translateY(0); opacity:1; }
.mobile-menu.open .mobile-menu-list li:nth-child(1) { transition: transform 320ms ease 60ms, opacity 320ms ease 60ms; }
.mobile-menu.open .mobile-menu-list li:nth-child(2) { transition: transform 320ms ease 120ms, opacity 320ms ease 120ms; }
.mobile-menu.open .mobile-menu-list li:nth-child(3) { transition: transform 320ms ease 180ms, opacity 320ms ease 180ms; }
.mobile-menu.open .mobile-menu-list li:nth-child(4) { transition: transform 320ms ease 240ms, opacity 320ms ease 240ms; }
.mobile-menu.open .mobile-menu-list li:nth-child(5) { transition: transform 320ms ease 300ms, opacity 320ms ease 300ms; }
.mobile-menu.open .mobile-menu-list li:nth-child(6) { transition: transform 320ms ease 360ms, opacity 320ms ease 360ms; }
.mobile-menu .mobile-menu-list a:hover { background: rgba(0,0,0,0.04); }
.mobile-overlay { position:fixed; left:0; top:0; bottom:0; right:0; background: rgba(0,0,0,0.5); opacity:0; transition: opacity 260ms ease, left 260ms ease; z-index:2000; pointer-events:none; }
.mobile-overlay.show { display:block; opacity:1; pointer-events:auto; }
.mobile-menu.open { transform: translateX(0); }

/* ensure mobile menu covers full viewport and prevent background scroll when open */
.mobile-menu { top:0; height:100vh; }
body.mobile-menu-open { overflow: hidden; }

/* Darken only the area outside the off-canvas menu using a body pseudo-element and CSS var */
body.mobile-menu-open::before {
  content: '';
  position: fixed;
  left: var(--mobile-menu-width, 280px);
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0,0,0,0.55);
  z-index: 2000;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: auto;
}
body.mobile-menu-open::before { opacity: 1; }

/* Hide the old overlay element entirely (kept for backward compatibility) */
.mobile-overlay { display: none !important; }

/* Temporary: hide specific services (Assistenza IT personalizzata, Voice Over) */
.hidden-service { display: none !important; }
/* Hide direct links to the service price pages and direct request links in header and mobile menu only */
header a[href="/listino-assistenza-privati.php"], header a[href="/listino-voiceover.php"], header a[href*="richiedi-assistenza.php?type=it"], header a[href*="richiedi-assistenza.php?type=marketing"],
.mobile-menu-list a[href="/listino-assistenza-privati.php"], .mobile-menu-list a[href="/listino-voiceover.php"], .mobile-menu-list a[href*="richiedi-assistenza.php?type=it"], .mobile-menu-list a[href*="richiedi-assistenza.php?type=marketing"] { display: none !important; }

/* Hide top nav buttons for Servizi and E-Commerce */
header nav a[href="#servizi"], header nav a[href="#ecommerce"], .mobile-menu-list a[href="#servizi"], .mobile-menu-list a[href="#ecommerce"] { display: none !important; }

/* adapt menu colors to theme */
.mobile-menu { background: var(--bg-light); color: var(--text-light); }
body.dark .mobile-menu { background: var(--bg-dark); color: var(--text-dark); }
.mobile-overlay { background: rgba(0,0,0,0.5); }
.mobile-overlay.show { display:block; }

/* make hamburger color adapt to theme */
body.dark .mobile-menu-toggle { color: var(--primary-dark); }

@media (max-width: 1024px) {
  .mobile-menu-toggle { display:inline-block; }
  .site-nav ul { display:none !important; }
  .search-form { display:none !important; }
  .nav-actions .btn-login, .nav-actions .user-info, .nav-actions .btn-secondary { display:none !important; }
}

/* When mobile menu is open hide desktop nav to avoid overlap */
body.mobile-menu-open .site-nav { display: none !important; }

/* Admin narrow-layout fixes: ensure table can expand and buttons don't wrap */
.container.admin-full {
  max-width: none;
  width: 100%;
}

.form-panel {
  background: var(--bg-light);
  border: 1px solid rgba(0,0,0,0.06);
  padding: 22px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  margin-top: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
body.dark .form-panel {
  background: #0f0f11;
  border-color: rgba(255,255,255,0.04);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

/* Prevent table/content overflowing the card */
.form-panel {
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Auth pages: when a hero is present above the form, stack heading and form
   to avoid side-by-side layout and horizontal scrolling. Targets login/register. */
/* Auth-specific rules moved to auth.css */


.table-list {
  width: 100%;
  max-width: 100%;
  table-layout: auto;
}
.table-list {
  min-width: 960px;
}
.table-list th, .table-list td {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Reduce overlapping with hero on smaller screens */
@media (max-width:900px) {
  .form-panel { margin-top: -20px; padding: 16px; }
}

/* Make buttons in form panels full-width on small screens for easier tapping */
@media (max-width:900px) {
  .form-panel .btn-primary, .form-panel .btn-secondary, .form-panel .btn-login, .form-panel .btn-ghost { width: 100%; display: block; }
  .form-panel .btn-login.primary-outline { width: auto; display: inline-block; }
}

.table-list {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}
.table-list thead th {
  text-align: left;
  padding: 10px 12px;
  font-size: 0.95rem;
  color: var(--primary-light);
  border-bottom: 2px solid rgba(0,0,0,0.06);
  white-space: nowrap;
}
body.dark .table-list thead th { color: var(--primary-dark); border-bottom-color: rgba(255,255,255,0.04); }
.table-list tbody td {
  padding: 10px 12px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  color: inherit;
}
body.dark .table-list tbody td { border-bottom-color: rgba(255,255,255,0.03); }
.table-list tbody tr:hover { background: rgba(255,102,0,0.03); }
body.dark .table-list tbody tr:hover { background: rgba(122,119,255,0.04); }

.btn-group { display: flex; gap: 8px; align-items: center; }
.btn-group form { margin: 0; }

.btn-primary, .btn-secondary, .btn-danger {
  border: none; border-radius: 8px; padding: 8px 10px; font-weight:700; cursor:pointer;
}
.btn-primary, .btn-secondary, .btn-danger {
  white-space: nowrap;
}
.btn-danger {
  min-width: 80px;
}
.btn-primary { background: var(--primary-light); color: #fff; }
.btn-secondary { background: transparent; color: var(--primary-light); border: 2px solid transparent; }
.btn-danger { background: #e74c3c; color: #fff; }
body.dark .btn-primary { background: var(--primary-dark); }
body.dark .btn-secondary { color: var(--primary-dark); }

.muted { color: #8b8b8b; }

/* Responsive tweaks for admin tables */
@media (max-width: 900px) {
  .table-list thead { display: none; }
  .table-list, .table-list tbody, .table-list tr, .table-list td { display: block; width: 100%; }
  .table-list tr { margin-bottom: 12px; border-bottom: 1px solid rgba(0,0,0,0.06); }
  .table-list td { padding: 8px 10px; }
  .btn-group { flex-wrap: wrap; }
}


.card a {
  display: inline-block;
  padding: 10px 18px;
  background: var(--primary-light);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.3s;
}

/* Checkout page specific tweaks: make the payment box wider and prevent tall/narrow layout */
.form-panel.checkout-page {
  max-width: 1100px;
  width: calc(100% - 48px);
  margin: 20px auto;
  padding: 28px;
  display: block;
  box-sizing: border-box;
}
.form-panel.checkout-page form { display: block; width: 100%; }
.form-panel.checkout-page .table-list { min-width: 0; width: 100%; }
.form-panel.checkout-page .btn-primary, .form-panel.checkout-page .btn-secondary { display: inline-block; }

@media (max-width:900px) {
  .form-panel.checkout-page { padding: 16px; width: calc(100% - 24px); }
}

body.dark .card a {
  background: var(--primary-dark);
}

.card a:hover {
  background: var(--accent-light);
}

body.dark .card a:hover {
  background: var(--accent-dark);
}

/* Footer */
footer {
  background: #222;
  color: #aaa;
  text-align: center;
  padding: 25px;
  font-size: 0.9rem;
  position: relative;
  z-index: 1;
}

/* Background Circles */
.circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,102,0,0.15);
  animation: float 20s linear infinite;
  z-index: 0;
}

body.dark .circle {
  background: rgba(122,119,255,0.15);
}

@keyframes float {
  0% { transform: translateY(0) translateX(0) scale(1);}
  50% { transform: translateY(-200px) translateX(100px) scale(1.2);}
  100% { transform: translateY(0) translateX(0) scale(1);}
}

/* Form */
.sell-form input, 
.sell-form textarea {
  width: 90%;
  max-width: 400px;
  padding: 10px;
  margin-top: 5px;
  border-radius: 8px;
}

.container.shop-full { max-width: 100%; padding: 20px 4%; margin: 0 auto; }
.container.shop-full .form-panel {
  /* center the shop content (filters + product list) so announcements appear centered
     while keeping a comfortable maximum line length */
  max-width: 1500px;
  width: calc(100% - 48px);
  margin: 0 auto;
  padding: 18px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 28px;
  box-shadow: none;
  border: none;
  background: transparent;
}
.container.shop-full .shop-sidebar { background: rgba(255,255,255,0.02); padding: 18px; border-radius: 10px; border:1px solid rgba(0,0,0,0.06); max-height: 720px; overflow:auto; }
.container.shop-full .search-form { max-width: 640px; }

/* Full-width products panel styling for dashboard */
.full-width-products {
  background: var(--bg-light);
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
  margin-top: 20px;
}
body.dark .full-width-products { background: #0f0f11; border-color: rgba(255,255,255,0.04); box-shadow: 0 12px 36px rgba(0,0,0,0.6); }
.full-width-products h2 { margin-top: 0; color: var(--primary-light); }
.sell-form button {
  margin-top: 15px;
  padding: 10px 22px;
  background: var(--accent-light);
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
  transition: transform 0.3s;
}

.sell-form button:hover {
  transform: scale(1.05);
}

body.dark .sell-form button {
  background: var(--accent-dark);
}

/* Responsive */
@media (max-width:768px){
  header {
    flex-direction: column;
    gap: 15px;
  }
  /* On small screens stack nav items horizontally but allow wrapping */
  nav ul { flex-wrap: wrap; justify-content: center; }
  .hero h2 { font-size: 2rem; }
  .hero p { font-size: 1rem; }
  .hero-intro-title { padding: 16px 20px; }
}

/* Mobile-first refinements: improve spacing, stacking and readable font sizes */
@media (max-width: 900px) {
  header {
    padding: 14px 6%;
    align-items: center;
  }
  header h1 { font-size: 1.2rem; }
  header h1 img { height: 90px; }
  nav ul { flex-wrap: wrap; justify-content: center; gap: 12px; }
  nav a { margin: 6px 8px; font-size: 0.95rem; }
  .theme-toggle { padding: 6px 10px; font-size: 1rem; }

  .hero { padding: 80px 6% 40px; }
  .hero h1, .hero h2 { font-size: 1.8rem; }
  .hero p { font-size: 0.95rem; max-width: 520px; }
  .hero-intro-title { padding: 16px 20px; }

  .content { padding: 40px 6%; }
  section { padding: 40px 6%; }

  .about-section { padding: 40px 6%; gap: 20px; }
  .about-section img { width: 100%; max-width: 440px; height: auto; border-radius: 12px; }
  .about-text { max-width: 100%; }

  .values { padding: 30px 6%; }
  .values-container { gap: 18px; }

  .hero { height: auto; min-height: 40vh; }
}

@media (max-width: 520px) {
  header { padding: 12px 5%; }
  header h1 img { height: 70px; }
  nav ul { flex-direction: column; gap: 8px; }
  nav a { font-size: 0.95rem; }

  .hero { padding: 60px 5% 30px; }
  .hero h1, .hero h2 { font-size: 1.4rem; }
  .hero p { font-size: 0.95rem; }
  .hero-intro-title {
    width: 100%;
    padding: 12px 14px;
    border-radius: 18px;
  }

  .steps { grid-template-columns: 1fr; }
  .step-card { text-align: left; padding: 16px; }
  .step-icon { font-size: 1.6rem; }

  .about-section { flex-direction: column; padding: 20px 5%; }
  .about-section img { border-radius: 10px; }

  .contact-cta { margin: 20px 5%; padding: 24px; }
  .contact-cta a { display:inline-block; padding:10px 16px; }

  .preview-container img { max-width: 100%; height: auto; }
  .sell-form input, .sell-form textarea { width: 100%; max-width: none; }
}


/* Page-specific styles for vendi page: only apply when .hero.vendi is used */
.hero.vendi {
  height: 60vh;
  background: linear-gradient(to right, rgba(0,120,255,0.7), rgba(0,0,0,0.5)),
    url('https://images.unsplash.com/photo-1556761175-129418cb2dfe?auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-position: center;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 10%;
}

.hero h1 { font-size: 3rem; }
.hero p { font-size: 1.2rem; max-width: 700px; }

.content { padding: 60px 10%; }

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 20px;
  align-items: start;
}

.step-card {
  background: rgba(255,255,255,0.06);
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.step-icon { font-size: 2rem; }

/* Strong overrides to ensure nav lists never show bullets and to unify forms */
header nav, header nav ul, header nav li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

header nav ul {
  display: flex !important;
  flex-direction: row !important;
  gap: 18px;
  align-items: center;
  list-style: none !important;
  padding-left: 0 !important;
}

header nav li { display: inline-block; }
header nav ul li::marker { content: none !important; }
.nav, .menu, .site-nav { list-style: none !important; }
.nav li::marker, .menu li::marker, .site-nav li::marker { content: none !important; display: none !important; }

/* Form: unified styles for login / register / sell forms */
.form-panel {
  background: var(--bg-light);
  padding: 22px;
  border-radius: 12px;
  max-width: 520px;
  margin: 18px auto;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  transition: background 0.25s, box-shadow 0.25s, color 0.2s;
  border: 1px solid rgba(0,0,0,0.04);
}

.form-panel h1 { margin-top: 0; }

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.form-field label { font-weight: 600; color: var(--primary-light); }

/* helper to hide conditional form fields until a matching category is selected */
.conditional-hidden { display: none; }

.form-input, .form-textarea, .sell-form input, .sell-form textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d0d0d3;
  background: #fff;
  box-sizing: border-box;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.form-input:focus, .form-textarea:focus { outline: none; border-color: var(--primary-light); box-shadow: 0 3px 12px rgba(255,102,0,0.06); }
body.dark .form-input:focus, body.dark .form-textarea:focus { border-color: var(--primary-dark); box-shadow: 0 3px 12px rgba(122,119,255,0.06); }

.form-textarea { min-height: 120px; resize: vertical; }

.form-actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; }

/* Override for admin page: allow the form-panel to expand inside admin-full container */
.container.admin-full .form-panel {
  box-sizing: border-box;
  max-width: none !important;
  width: calc(100% - 48px) !important;
  margin: 0 auto 24px !important;
  padding: 28px !important;
  overflow-x: hidden;
}

.btn-primary {
  background: var(--primary-light);
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 700;
}

.btn-secondary {
  background: transparent;
  color: var(--primary-light);
  padding: 8px 14px;
  border-radius: 8px;
  border: 2px solid transparent;
  text-decoration: none;
}

body.dark .form-panel { background: #111; }
body.dark .form-input, body.dark .form-textarea { background: #121212; border-color: #2a2a2a; color: var(--text-dark); }
body.dark .form-panel { background: #0f0f11; box-shadow: 0 8px 24px rgba(0,0,0,0.6); border-color: rgba(255,255,255,0.04); }
body.dark .btn-primary { background: var(--primary-dark); }

/* Dark theme for sell form inputs */
body.dark .sell-form input, body.dark .sell-form textarea { background: #121212; border-color: #2a2a2a; color: var(--text-dark); }

/* Header action buttons */
.nav-actions { display:flex; gap:10px; align-items:center; }
.btn-login {
  padding: 8px 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--primary-light);
  border: 2px solid transparent;
  text-decoration: none;
  font-weight: 700;
}
.btn-login:hover { background: var(--primary-light); color: #fff; border-color: var(--primary-light); }
body.dark .btn-login { color: var(--primary-dark); }
.step-card h4 { margin-top: 10px; color: var(--accent-light); }

.preview-container img { max-width: 260px; border-radius: 8px; margin-top: 10px; display: block; }

.sell-form input[type=file] { width: 90%; max-width: 400px; }

/* small utility */
.muted { opacity: 0.8; font-size: 0.95rem; }

/* Decorative circles positioning (moved from inline in index.php) */
.circle--a { width: 200px; height: 200px; top: 10%; left: 5%; animation-duration: 25s; }
.circle--b { width: 150px; height: 150px; top: 40%; left: 80%; animation-duration: 30s; }
.circle--c { width: 300px; height: 300px; top: 70%; left: 20%; animation-duration: 35s; animation-delay: -5s; }

/* Inline-form helper for admin buttons */
.inline-form { display: inline; }

/* Product grid / card styles for dashboard */
.product-grid { display:grid; grid-template-columns: repeat(6, 1fr); gap:14px; margin-top:12px }
.product-card { background:var(--bg-light); border:1px solid rgba(0,0,0,0.06); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; min-height:150px }
.product-thumb { height:140px; background:#f7f7f7; display:flex; align-items:center; justify-content:center; overflow:hidden }
.product-thumb img { width:100%; height:100%; object-fit:cover }
.product-body { padding:12px 14px; display:flex; flex-direction:column; gap:8px; flex:1 }
.product-body h3 { margin:0; font-size:1rem }
.product-body .muted { color:#666; font-size:0.95rem; max-height:3.6em; overflow:hidden }
.product-meta { font-size:0.95rem; color:#333 }
.product-actions { margin-top:auto; text-align:right }
.product-actions .btn { padding:6px 10px; font-size:0.9rem }

body.dark .product-card { background:#0f0f11; border-color: rgba(255,255,255,0.04); }
body.dark .product-thumb { background: #121212 }
body.dark .product-body .muted { color: #bdbdbd }

/* Shop-specific responsive overrides to ensure consistent adaptive layout */
.shop-full .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.shop-full .product-card {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: visible;
  min-height: 420px;
}
.shop-full .product-thumb { height: 260px; flex: 0 0 auto; overflow: hidden; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.shop-full .product-thumb img { width:100%; height:100%; object-fit:cover; display:block }
.shop-full .product-body { padding: 14px; display:flex; flex-direction:column; gap:8px; flex:1 }
.shop-full .product-meta { margin-top: auto; display:flex; justify-content:space-between; align-items:center; gap:12px }
.shop-full .product-actions { display:flex; gap:8px; align-items:center; justify-content:flex-end; flex-wrap:wrap }
.shop-full .product-actions .btn { padding:8px 12px; border-radius:8px }

@media (max-width: 1100px) {
  .shop-full .product-card { min-height: 340px; }
  .shop-full .product-thumb { height: 200px; }
}

@media (max-width: 760px) {
  .shop-full .product-card { min-height: auto; }
  .shop-full .product-thumb { height: 220px; }
  .shop-full .product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .shop-full .product-grid { grid-template-columns: 1fr; }
  .shop-full .product-thumb { height: 200px; }
  .shop-full .product-actions { flex-direction:column; align-items:stretch }
  .shop-full .product-actions .btn { width:100% }
}

/* Prevent product area from stretching on very wide screens: center content and cap width */
.shop-full .form-panel { display:flex; gap:18px; align-items:flex-start; max-width: var(--max-site-width); margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.shop-full .form-panel section { flex: 1 1 auto; }
.shop-full .product-grid { width: 100%; max-width: none; margin: 0 auto; }
.shop-full .product-card { align-items: flex-start; }

@media (min-width: 1600px) {
  /* On very large screens, keep product cards readable by increasing min size but capping card growth */
  .shop-full .product-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .shop-full .product-card { min-height: 320px; }
}

/* Pagination numeric */
.pagination { display:flex; gap:8px; justify-content:center; margin-top:18px; flex-wrap:wrap; }
.pagination .page-link { display:inline-block; padding:8px 12px; border-radius:6px; background: #fff; border:1px solid #e6e6e6; color:#333; text-decoration:none; }
.pagination .page-link[aria-current="page"] { background: var(--amazon-accent); color:#111; font-weight:700; }
body.dark .pagination .page-link { background:#121212; border-color: rgba(255,255,255,0.04); color: #bdbdbd; }
body.dark .pagination .page-link[aria-current="page"] { background: var(--primary-dark); color: #fff; }

/* Vertical product list (one product per row) */
.shop-full .product-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  align-items: center;
}
.shop-full .product-list .product-card {
  /* grid layout: image | content | side (buybox) */
  display: grid;
  grid-template-columns: 300px 1fr 360px;
  gap: 18px;
  align-items: start;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.06);
  background: transparent;
  max-width: 940px; /* fixed requested width */
  width: 940px;
  height: 280px; /* fixed requested height */
  box-sizing: border-box;
  margin: 0;
}
.shop-full .product-list .product-thumb {
  width: 300px;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: #f6f6f6;
  display:block;
  grid-column: 1;
}
.shop-full .product-list .product-thumb img { width:100%; height:100%; object-fit:cover; display:block }
.shop-full .product-list .product-body { grid-column: 2; flex:1 1 auto; padding:12px; display:flex; flex-direction:column; overflow:hidden; }
.shop-full .product-list .product-body h3, .shop-full .product-list .product-body .product-title { font-size:1.25rem; margin:0 0 8px; color:var(--primary-light); line-height:1.05; text-align:center; font-weight:800; }
.shop-full .product-list .product-body .muted { text-align:center; color: #bdbdbd; }
.shop-full .product-actions-center { display:flex; justify-content:center; margin:10px 0; }
.shop-full .product-actions-center .btn-view { padding:10px 18px; border-radius:10px; }
.shop-full .product-list .product-meta { margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.shop-full .product-list .product-actions { display:flex; gap:8px; align-items:center; }
.shop-full .product-list .product-actions .form-qty { width:56px; }

@media (max-width: 900px) {
  .shop-full .product-list .product-card { display: grid; grid-template-columns: 1fr; grid-auto-rows: auto; height: auto; width: 100%; max-width: none; }
  .shop-full .product-list .product-thumb { width:100%; height:260px; }
  .shop-full .product-list .product-meta { flex-direction: column; align-items: stretch; gap: 10px; }
  .shop-full .product-list .product-actions { justify-content: flex-start; }
  .shop-full .product-list .product-side { grid-column: 1 / -1; width:100%; justify-content:center; align-items:center; }
}

/* Side column (buybox + specs) */
.shop-full .product-list .product-side {
  /* side column: buybox sits in the third column and anchors bottom-right */
  flex: 0 0 auto;
  width: 360px;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
  box-sizing: border-box;
  padding-left:8px;
  grid-column: 3; /* rightmost column */
  justify-self: end; /* anchor the side box to the right */
  align-self: end;   /* anchor to bottom */
}
.shop-full .product-list .buybox { width:100%; display:flex; gap:8px; align-items:center; justify-content:space-between; }
.shop-full .product-list .spec-list { list-style:none; margin:0; padding:0; width:100%; display:flex; flex-direction:column; gap:6px; }
.shop-full .product-list .spec-list li { display:flex; justify-content:space-between; gap:8px; font-size:0.92rem; color:var(--muted); }
.shop-full .product-list .spec-key { font-weight:700; color:var(--primary-light); }
.shop-full .product-list .spec-val { color:inherit; }
.shop-full .product-list .product-card { /* keep padding from main rule */ }
.shop-full .product-list .product-body h3 { font-size:1.1rem; margin-bottom:8px; }

@media (max-width: 900px) {
  .shop-full .product-list .product-side { width:100%; flex-direction:row; justify-content:space-between; align-items:center; }
  .shop-full .product-list .spec-list { flex-direction:row; gap:12px; }
  .shop-full .product-list .spec-list li { font-size:0.85rem; }
}

/* Product action & buybox styling for clarity */
.shop-full .product-actions { align-items:center; }
.shop-full .product-actions .btn-view { padding:8px 12px; border-radius:8px; text-decoration:none; display:inline-block; background:var(--primary-light); color:#fff; font-weight:800; }
.shop-full .add-to-cart-form { display:flex; gap:8px; align-items:center; margin:0; }
.shop-full .add-to-cart-form .form-qty { width:64px; padding:8px; border-radius:6px; border:1px solid rgba(0,0,0,0.08); }
.shop-full .add-to-cart-form .btn-add { padding:8px 12px; border-radius:8px; }

.shop-full .buybox {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:10px;
  background: rgba(255,255,255,0.02);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.shop-full .buybox .product-price { font-size:1.6rem; font-weight:900; color:var(--primary-light); margin-bottom:6px; }
.shop-full .buybox-form { display:flex; flex-direction:column; gap:8px; align-items:stretch; margin:0; width:100%; }
.shop-full .buybox-form .form-qty { width:100%; max-width:120px; padding:8px; border-radius:6px; border:1px solid rgba(0,0,0,0.08); }
.shop-full .buybox-form .btn-addcart { padding:10px 14px; border-radius:10px; font-weight:800; width:100%; background: var(--amazon-accent); color:#111; border:none; }
.shop-full .buybox-form .btn-addcart:hover { opacity:0.96; }

/* smaller inline price inside main content */
.product-price--meta { font-size:1.05rem; font-weight:800; color:inherit; }

/* Product page buybox (single product) */
.product-buybox { max-width: 680px; background: rgba(255,255,255,0.02); padding: 22px; border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,0.22); margin-top: 18px; }
.product-buybox .buybox-price { font-size:2.4rem; line-height:1; font-weight:900; color:var(--primary-light); text-align:center; margin-bottom:14px; }
.product-buybox .buybox-controls { display:flex; gap:14px; align-items:center; justify-content:center; }
.product-buybox .buy-qty { width:120px; padding:12px; border-radius:10px; border:1px solid rgba(0,0,0,0.08); background: #fff; }
.product-buybox .buy-btn { padding:14px 20px; border-radius:12px; background: var(--amazon-accent); color:#111; font-weight:900; border:none; font-size:1rem; }
.product-buybox .buy-btn:hover { opacity:0.98; }
.product-buybox .muted.small { text-align:center; margin-top:10px; }

@media (min-width: 1000px) {
  .form-panel { display: grid; grid-template-columns: 520px 1fr 360px; gap: 26px; align-items: start; }
  .product-thumb { grid-column: 1; max-width: 520px; }
  .product-buybox { grid-column: 3; margin-top: 8px; }
}

@media (max-width: 999px) {
  .product-buybox { width: 100%; }
}

/* Truncate long descriptions to keep rows tidy */
.shop-full .product-body .muted { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

/* Make primary/secondary buttons consistent */
.btn-primary { background: var(--amazon-accent); color:#111; padding:8px 12px; border-radius:8px; font-weight:800; text-decoration:none; border: none; }
.btn-secondary { background:transparent; border:1px solid rgba(0,0,0,0.08); color:inherit; padding:8px 12px; border-radius:8px; }
body.dark .btn-secondary { border-color: rgba(255,255,255,0.06); }

/* Theme adjustments: subtle border & background to match dark/light theme */
.shop-full .product-list .product-card { background: rgba(255,255,255,0.02); }
body.dark .shop-full .product-list .product-card { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.04); }
@media (prefers-color-scheme: light) { .shop-full .product-list .product-card { background: rgba(255,255,255,0.98); } }


/* ------------------------------------------------------------------
   Global fix: prevent long/unbroken text from overflowing panels/forms
   Applies to generic panels/cards and form containers (login, signup, etc.)
   This changes the box behavior (wrapping and max widths) without
   altering the internal content structure.
   ------------------------------------------------------------------ */
.panel, .card, .product-card, .form-panel, .panel-body, .form-panel section, .panel-content {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  box-sizing: border-box;
}

/* Ensure children don't exceed their parent's width */
.panel *, .card *, .product-card *, .form-panel * {
  max-width: 100%;
  box-sizing: inherit;
}

/* Inputs, buttons and textareas respect container width and wrap long values */
.panel input, .panel textarea, .panel button, .form-panel input, .form-panel textarea, .form-panel button {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Small helper: prevent titles or links creating horizontal scroll */
.panel h1, .panel h2, .panel h3, .panel h4, .panel p, .panel a { word-break: break-word; overflow-wrap: anywhere; }


/* Wide textareas toggle support: when `body.wide-textareas` is present
   inputs and textareas expand to available width to help editing long content */
.wide-textareas textarea,
.wide-textareas input[type="text"],
.wide-textareas input[type="email"],
.wide-textareas input[type="search"],
.wide-textareas .quill-editor,
.wide-textareas .form-control {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.wide-textareas .form-panel {
  max-width: none !important;
  width: calc(100% - 32px) !important;
}

/* Slight visual hint for the toggle state (applies only when toggled) */
body.wide-textareas .form-panel { box-shadow: 0 14px 36px rgba(0,0,0,0.06); }

/* Form controls: consistent padding, border, and responsive width */
.form-control {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  box-sizing: border-box;
  background: var(--bg-light);
  color: var(--text-light);
}
body.dark .form-control { background: var(--bg-dark); border-color: rgba(255,255,255,0.06); color: var(--text-dark); }

/* Quill editor theming to match site inputs */
.quill-editor {
  /* let Quill render toolbar + container; we only theme them below */
  border-radius: 8px;
  box-sizing: border-box;
  padding: 0; /* no extra padding to avoid double borders */
}
body.dark .quill-editor { border-color: rgba(255,255,255,0.04); }

/* Theme Quill toolbar/container to match site theme */
.quill-editor .ql-toolbar {
  background: var(--bg-light);
  color: var(--text-light);
  border: 1px solid rgba(0,0,0,0.08);
  border-bottom: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.quill-editor .ql-container {
  background: var(--bg-light);
  color: var(--text-light);
  border: 1px solid rgba(0,0,0,0.08);
  border-top: 0;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  min-height: 120px;
}
body.dark .quill-editor .ql-toolbar,
body.dark .quill-editor .ql-container {
  background: var(--bg-dark);
  color: var(--text-dark);
  border-color: rgba(255,255,255,0.04);
}

/* Quill toolbar buttons and editor text color */
.quill-editor .ql-toolbar button,
.quill-editor .ql-toolbar .ql-picker-label,
.quill-editor .ql-toolbar .ql-picker-item {
  color: var(--text-light);
}
.quill-editor .ql-container .ql-editor {
  color: var(--text-light);
  background: transparent;
}
body.dark .quill-editor .ql-toolbar button,
body.dark .quill-editor .ql-toolbar .ql-picker-label,
body.dark .quill-editor .ql-toolbar .ql-picker-item {
  color: var(--text-dark);
}
body.dark .quill-editor .ql-container .ql-editor {
  color: var(--text-dark);
}

/* Font family options for Quill font picker */
.ql-font-sans { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
.ql-font-serif { font-family: Georgia, 'Times New Roman', Times, serif; }
.ql-font-monospace { font-family: 'Courier New', Courier, monospace; }

/* Sizes */
.ql-size-small { font-size: 0.85em; }
.ql-size-normal { font-size: 1em; }
.ql-size-large { font-size: 1.25em; }
.ql-size-huge { font-size: 1.5em; }

/* Image styling: allow images to be resized visually and keep max width within panel */
.ql-editor img { max-width: 100%; height: auto; display: block; }

/* Desktop side ads (non-invasive) */
.desktop-side-ads {
  position: fixed;
  inset: 110px 0 auto 0;
  pointer-events: none;
  z-index: 70;
}

.desktop-ad-box {
  width: 158px;
  min-height: 170px;
  pointer-events: auto;
  position: fixed;
  top: 132px;
  padding: 12px 12px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(6px);
}

.desktop-ad-box.left {
  left: max(8px, calc((100vw - 1360px) / 2));
}

.desktop-ad-box.right {
  right: max(8px, calc((100vw - 1360px) / 2));
}

.desktop-ad-close {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
}

.desktop-ad-close:hover {
  background: rgba(0, 0, 0, 0.14);
}

.desktop-ad-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255, 106, 0, 0.14);
  color: #9a4300;
}

.desktop-ad-box h4 {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.25;
}

.desktop-ad-box p {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: #5f6670;
}

.desktop-ad-cta {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 30px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(90deg, #ff6a00, #ff8f41);
}

.desktop-ad-slot {
  width: 100%;
  min-height: 140px;
  border-radius: 8px;
  overflow: hidden;
}

body.dark .desktop-ad-box {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(20, 20, 22, 0.9);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
}

body.dark .desktop-ad-close {
  background: rgba(255, 255, 255, 0.08);
}

body.dark .desktop-ad-close:hover {
  background: rgba(255, 255, 255, 0.15);
}

body.dark .desktop-ad-tag {
  background: rgba(122, 119, 255, 0.24);
  color: #d7d6ff;
}

body.dark .desktop-ad-box p {
  color: #c2c4cf;
}

@media (max-width: 1379px) {
  .desktop-side-ads {
    display: none !important;
  }
}

@media (min-width: 1380px) and (max-width: 1560px) {
  .desktop-ad-box {
    width: 146px;
    top: 120px;
  }
}

/* Email preview area */
.email-preview {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  background: var(--bg-light);
  color: var(--text-light);
  padding: 14px;
  box-sizing: border-box;
  max-width: 100%;
}
.email-preview .preview-subject { font-weight: 800; margin-bottom: 8px; color: var(--primary-light); }
.email-preview .preview-body { border-top: 1px solid rgba(0,0,0,0.04); padding-top: 12px; margin-top: 8px; }
body.dark .email-preview { background: var(--bg-dark); color: var(--text-dark); border-color: rgba(255,255,255,0.04); }

/* layout: stack preview under form on small screens, side-by-side on wide */
.form-panel { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 1100px) {
  .form-panel { grid-template-columns: 1fr 420px; }
}

/* Map font identifiers to actual font-family stacks */
.ql-font-inter { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
.ql-font-roboto { font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; }
.ql-font-opensans { font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; }
.ql-font-lato { font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif; }
.ql-font-montserrat { font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; }
.ql-font-poppins { font-family: 'Poppins', 'Helvetica Neue', Arial, sans-serif; }
.ql-font-source-sans-3 { font-family: 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif; }
.ql-font-raleway { font-family: 'Raleway', Arial, sans-serif; }
.ql-font-nunito { font-family: 'Nunito', Arial, sans-serif; }
.ql-font-merriweather { font-family: 'Merriweather', Georgia, serif; }
.ql-font-playfair { font-family: 'Playfair Display', 'Times New Roman', serif; }
.ql-font-pt-serif { font-family: 'PT Serif', Georgia, serif; }
.ql-font-fira-sans { font-family: 'Fira Sans', Arial, sans-serif; }
.ql-font-oswald { font-family: 'Oswald', Arial, sans-serif; }
.ql-font-ubuntu { font-family: 'Ubuntu', Arial, sans-serif; }
.ql-font-noto-sans { font-family: 'Noto Sans', Arial, sans-serif; }
.ql-font-serif { font-family: Georgia, 'Times New Roman', Times, serif; }
.ql-font-monospace { font-family: 'Courier New', Courier, monospace; }

/* Make images selectable / draggable and ensure resize handles are visible */
.ql-editor img { cursor: move; }
.ql-editor .image-resize-handle { background: rgba(0,0,0,0.6); border-radius: 2px; }


/* Allow resizing by mouse: horizontal (and vertical for editors) */
.form-control {
  resize: horizontal;
  min-width: 220px;
  max-width: 2200px;
}
.quill-editor {
  resize: both;
  overflow: auto;
  min-width: 300px;
  max-width: 2200px;
  min-height: 80px;
}

/* Desktop trust and clarity enhancements */
.trust-strip {
  max-width: 1180px;
  margin: 8px auto 28px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 14px;
}

.trust-item {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.75);
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

.trust-item strong {
  display: block;
  margin-bottom: 4px;
  color: var(--primary-light);
}

.trust-item span {
  color: var(--muted);
  font-size: 0.92rem;
}

body.dark .trust-item {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}

body.dark .trust-item strong {
  color: var(--primary-dark);
}

.shop-meta-bar {
  max-width: 1200px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 12px;
}

.shop-meta-item {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.68);
  font-size: 0.9rem;
}

body.dark .shop-meta-item {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}

.product-badges {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.product-badge {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  letter-spacing: 0.02em;
}

.badge-new {
  color: #1d5f2f;
  background: #d9f7e6;
  border-color: #9ce0b6;
}

.badge-category {
  color: #8a4f00;
  background: #ffe4bf;
  border-color: #ffd093;
}

.badge-secure {
  color: #194f90;
  background: #dcebff;
  border-color: #b7d4ff;
}

body.dark .badge-new {
  color: #b4ffd0;
  background: rgba(73, 160, 104, 0.2);
  border-color: rgba(112, 201, 142, 0.35);
}

body.dark .badge-category {
  color: #ffd28d;
  background: rgba(164, 106, 27, 0.2);
  border-color: rgba(227, 157, 69, 0.35);
}

body.dark .badge-secure {
  color: #bdd7ff;
  background: rgba(43, 98, 169, 0.22);
  border-color: rgba(97, 149, 220, 0.4);
}

.checkout-steps {
  max-width: 980px;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
}

.checkout-step {
  flex: 1;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 999px;
  padding: 8px 12px;
  text-align: center;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--muted);
  background: rgba(255,255,255,0.75);
}

.checkout-step.done {
  color: #1f6a35;
  border-color: rgba(56,138,86,0.35);
  background: #e2f5e8;
}

.checkout-step.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(90deg, var(--primary-light), var(--accent-light));
}

.checkout-trust {
  max-width: 980px;
  margin: 0 auto 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
}

.checkout-trust span {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.86rem;
  background: rgba(255,255,255,0.7);
}

body.dark .checkout-step,
body.dark .checkout-trust span {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}

body.dark .checkout-step.active {
  color: #fff;
}

.how-it-works {
  max-width: 1180px;
  margin: 16px auto 34px;
  padding: 0 14px;
}

.how-it-works h3 {
  text-align: center;
  margin-bottom: 16px;
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 14px;
}

.how-card {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255,255,255,0.7);
  box-shadow: 0 10px 24px rgba(0,0,0,0.05);
}

.how-card h4 {
  margin: 4px 0 8px;
}

.how-card p {
  margin: 0;
  color: var(--muted);
}

.how-num {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(90deg, var(--primary-light), var(--accent-light));
}

body.dark .how-card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}

.shop-tools-row {
  max-width: 1200px;
  margin: 0 auto 14px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.buybox-trust-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.buybox-trust-item {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.86rem;
  text-align: center;
  background: rgba(255,255,255,0.66);
}

body.dark .buybox-trust-item {
  border-color: rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
}

.page-progress-bar {
  position: fixed;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  z-index: 4000;
  background: linear-gradient(90deg, var(--primary-light), var(--accent-light));
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  transition: width 0.08s linear;
}

body.dark .page-progress-bar {
  background: linear-gradient(90deg, var(--primary-dark), var(--accent-dark));
}

.back-to-top-btn {
  position: fixed;
  right: 18px;
  bottom: 80px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(90deg, var(--primary-light), var(--accent-light));
  box-shadow: 0 10px 24px rgba(0,0,0,0.26);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 3500;
}

.back-to-top-btn.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

body.dark .back-to-top-btn {
  background: linear-gradient(90deg, var(--primary-dark), var(--accent-dark));
}

.quick-help-panel {
  max-width: 1000px;
  margin: 0 auto 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.62));
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
}

.quick-help-panel h4 {
  margin: 0 0 8px;
  color: var(--primary-light);
}

.quick-help-panel ul {
  margin: 0;
  padding-left: 18px;
}

.quick-help-panel li {
  margin-bottom: 6px;
}

body.dark .quick-help-panel {
  border-color: rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}

body.dark .quick-help-panel h4 {
  color: var(--primary-dark);
}

.reveal-on-scroll {
  opacity: 1;
  transform: none;
}

html.reveal-ready .reveal-on-scroll {
  opacity: 0;
  transform: translateY(14px) scale(0.99);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

html.reveal-ready .reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.skeleton-wrap {
  position: relative;
  overflow: hidden;
}

.skeleton-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(230,230,230,0.18) 20%, rgba(245,245,245,0.45) 40%, rgba(230,230,230,0.18) 60%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.2s linear infinite;
  z-index: 1;
}

.skeleton-wrap.is-loaded::before {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.skeleton-img {
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.skeleton-wrap.is-loaded .skeleton-img {
  opacity: 1;
}

@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

body.dark .skeleton-wrap::before {
  background: linear-gradient(100deg, rgba(255,255,255,0.05) 20%, rgba(255,255,255,0.12) 40%, rgba(255,255,255,0.05) 60%);
  background-size: 200% 100%;
}

/* Unified button system (final override for consistency across pages) */
.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-link,
.btn-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.14s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-link,
.btn-login {
  border: 1px solid transparent;
}

.btn-primary,
.btn-login {
  background: var(--amazon-accent);
  color: #111;
}

.btn-secondary,
.btn-link,
.btn {
  background: transparent;
  color: inherit;
  border-color: rgba(0,0,0,0.14);
}

.btn-danger {
  background: #d64545;
  color: #fff;
  border-color: #c13a3a;
}

body.dark .btn-secondary,
body.dark .btn-link,
body.dark .btn {
  border-color: rgba(255,255,255,0.14);
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover,
.btn-link:hover,
.btn-login:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.btn-link:focus-visible,
.btn-login:focus-visible {
  outline: 3px solid rgba(45,124,255,0.28);
  outline-offset: 2px;
}

.btn[disabled],
.btn-primary[disabled],
.btn-secondary[disabled],
.btn-danger[disabled],
.btn-link[disabled],
.btn-login[disabled] {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Baseline size for native buttons and submit inputs */
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  min-height: 40px;
  border-radius: 10px;
  font-weight: 700;
}

/* About page redesign */
.about-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 16px 28px;
}

.about-hero {
  position: relative;
  border-radius: 18px;
  padding: 42px 28px;
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(255,170,46,0.22), transparent 55%),
    radial-gradient(120% 160% at 0% 100%, rgba(45,124,255,0.2), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,0.86), rgba(255,255,255,0.72));
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
  overflow: hidden;
}

.about-hero-inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.about-kicker {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary-light);
}

.about-hero h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3.8vw, 3rem);
  line-height: 1.08;
}

.about-lead {
  margin: 16px auto 0;
  max-width: 780px;
  font-size: 1.03rem;
  color: var(--muted);
}

.about-story {
  margin-top: 24px;
  display: grid;
  grid-template-columns: minmax(300px, 460px) 1fr;
  gap: 20px;
  align-items: stretch;
}

.about-media,
.about-copy {
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.74);
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}

.about-media {
  overflow: hidden;
}

.about-media img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}

.about-copy {
  padding: 24px;
}

.about-copy h2,
.about-values h2,
.about-contact h2 {
  margin-top: 0;
  margin-bottom: 12px;
  color: var(--primary-light);
}

.about-copy p,
.about-values-intro {
  margin: 0;
  line-height: 1.6;
}

.about-values {
  margin-top: 24px;
  padding: 26px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.72);
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
}

.about-values-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.about-value-card {
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.9);
  padding: 16px;
}

.about-value-card h3 {
  margin: 0 0 8px;
  font-size: 1.08rem;
  color: var(--primary-light);
}

.about-value-card p {
  margin: 0;
  color: var(--muted);
}

.about-contact {
  margin-top: 24px;
  padding: 26px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  background: linear-gradient(145deg, rgba(255,255,255,0.88), rgba(246,248,255,0.74));
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  text-align: center;
}

.about-contact p {
  margin: 10px 0 0;
  color: var(--muted);
}

.about-contact a {
  font-weight: 700;
  text-decoration: none;
  color: var(--primary-light);
}

.about-contact a:hover {
  text-decoration: underline;
}

.about-footer {
  text-align: center;
  padding: 16px;
}

body.dark .about-hero {
  background:
    radial-gradient(120% 160% at 100% 0%, rgba(255,170,46,0.14), transparent 55%),
    radial-gradient(120% 160% at 0% 100%, rgba(45,124,255,0.14), transparent 55%),
    linear-gradient(145deg, rgba(18,18,18,0.92), rgba(10,10,10,0.86));
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}

body.dark .about-media,
body.dark .about-copy,
body.dark .about-values,
body.dark .about-contact,
body.dark .about-value-card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}

body.dark .about-kicker,
body.dark .about-copy h2,
body.dark .about-values h2,
body.dark .about-contact h2,
body.dark .about-value-card h3,
body.dark .about-contact a {
  color: var(--primary-dark);
}

body.dark .about-lead,
body.dark .about-copy p,
body.dark .about-values-intro,
body.dark .about-contact p,
body.dark .about-value-card p {
  color: rgba(255,255,255,0.82);
}

@media (max-width: 980px) {
  .about-story {
    grid-template-columns: 1fr;
  }

  .about-values-grid {
    grid-template-columns: 1fr;
  }

  .about-media img {
    min-height: 240px;
  }
}

/* Shop hardening: never hide/clamp listing cards because of global form-panel/grid rules */
.shop-full .form-panel {
  display: flex !important;
  overflow-x: visible !important;
}

.shop-full .form-panel section {
  min-width: 0;
  width: 100%;
}

.shop-full .product-list {
  width: 100%;
}

.shop-full .product-list .product-card {
  width: min(100%, 940px);
  max-width: 940px;
  height: auto;
  min-height: 280px;
}

@media (max-width: 1380px) {
  .shop-full .product-list .product-card {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .shop-full .product-list .product-thumb,
  .shop-full .product-list .product-body,
  .shop-full .product-list .product-side {
    grid-column: 1;
    width: 100%;
  }

  .shop-full .product-list .product-thumb {
    height: 240px;
  }

  .shop-full .product-list .product-side {
    justify-self: stretch;
    align-self: auto;
    align-items: stretch;
    padding-left: 0;
  }
}

/* Subscription page */
.subscription-page {
  max-width: min(1320px, calc(100% - 32px));
  margin: 0 auto;
  padding: 34px 0 72px;
}

.subscription-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 380px);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 26px;
}

.subscription-hero-copy,
.subscription-status-card,
.subscription-card,
.subscription-comparison,
.subscription-footnote {
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.76));
  border: 1px solid rgba(18, 24, 39, 0.08);
  box-shadow: 0 20px 48px rgba(16, 24, 40, 0.08);
  border-radius: 28px;
  backdrop-filter: blur(14px);
}

body.dark .subscription-hero-copy,
body.dark .subscription-status-card,
body.dark .subscription-card,
body.dark .subscription-comparison,
body.dark .subscription-footnote {
  background: linear-gradient(180deg, rgba(22,22,26,0.96), rgba(15,15,18,0.88));
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 18px 42px rgba(0,0,0,0.32);
}

.subscription-hero-copy {
  padding: 34px;
  position: relative;
  overflow: hidden;
}

.subscription-hero-copy::before {
  content: "";
  position: absolute;
  inset: auto -8% -28% auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,106,0,0.22), rgba(255,106,0,0));
  pointer-events: none;
}

body.dark .subscription-hero-copy::before {
  background: radial-gradient(circle, rgba(122,119,255,0.22), rgba(122,119,255,0));
}

.subscription-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,106,0,0.12);
  color: var(--primary-light);
}

body.dark .subscription-kicker {
  background: rgba(122,119,255,0.16);
  color: var(--primary-dark);
}

.subscription-hero h1 {
  margin: 14px 0 12px;
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  line-height: 1.02;
}

.subscription-lead {
  margin: 0 auto;
  max-width: 52ch;
  font-size: 1.08rem;
  line-height: 1.75;
  opacity: 0.88;
  text-align: center;
}

.subscription-status-card {
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.subscription-status-label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.72;
  font-weight: 800;
}

.subscription-status-name {
  font-size: 2rem;
  line-height: 1;
}

.subscription-status-price {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,106,0,0.1);
  color: var(--primary-light);
  font-weight: 800;
}

body.dark .subscription-status-price {
  background: rgba(122,119,255,0.14);
  color: var(--primary-dark);
}

.subscription-status-note {
  margin: 4px 0 0;
  line-height: 1.65;
  opacity: 0.8;
}

.subscription-status-billing {
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  background: rgba(18, 24, 39, 0.06);
  color: inherit;
  opacity: 0.9;
}

body.dark .subscription-status-billing {
  background: rgba(255, 255, 255, 0.08);
}

.subscription-status-billing.tone-success {
  background: rgba(16, 185, 129, 0.14);
  color: #0f6a4a;
}

.subscription-status-billing.tone-warning {
  background: rgba(245, 158, 11, 0.16);
  color: #8a5a04;
}

.subscription-status-billing.tone-error {
  background: rgba(220, 38, 38, 0.14);
  color: #8f1d1d;
}

.subscription-status-billing.tone-muted {
  background: rgba(107, 114, 128, 0.16);
  color: #374151;
}

.subscription-status-billing.tone-info {
  background: rgba(59, 130, 246, 0.14);
  color: #1e3a8a;
}

body.dark .subscription-status-billing.tone-success { color: #c9f7e8; }
body.dark .subscription-status-billing.tone-warning { color: #ffe8b6; }
body.dark .subscription-status-billing.tone-error { color: #ffd2d2; }
body.dark .subscription-status-billing.tone-muted { color: #e5e7eb; }
body.dark .subscription-status-billing.tone-info { color: #cfe1ff; }

.subscription-flash {
  margin: 0 0 20px;
  padding: 14px 18px;
  border-radius: 16px;
  font-weight: 700;
  animation: subscriptionFlashIn 0.45s ease;
}

.subscription-flash-success {
  background: rgba(15, 160, 80, 0.12);
  color: #116537;
  border: 1px solid rgba(15, 160, 80, 0.22);
}

.subscription-flash-error {
  background: rgba(204, 33, 62, 0.12);
  color: #8c1630;
  border: 1px solid rgba(204, 33, 62, 0.22);
}

body.dark .subscription-flash-success {
  color: #b7f2c8;
}

body.dark .subscription-flash-error {
  color: #ffb8c4;
}

.subscription-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
  margin-bottom: 28px;
}

.subscription-card {
  position: relative;
  overflow: hidden;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  animation: subscriptionCardRise 0.8s ease both;
}

.subscription-card:nth-child(2) {
  animation-delay: 0.08s;
}

.subscription-card:nth-child(3) {
  animation-delay: 0.16s;
}

.subscription-card::before {
  content: "";
  position: absolute;
  inset: -25% auto auto -10%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.36), rgba(255,255,255,0));
  opacity: 0.7;
  pointer-events: none;
}

.subscription-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 54px rgba(16, 24, 40, 0.12);
}

body.dark .subscription-card:hover {
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.38);
}

.subscription-card.is-current {
  border-color: rgba(255,106,0,0.36);
  box-shadow: 0 24px 56px rgba(255,106,0,0.14);
}

body.dark .subscription-card.is-current {
  border-color: rgba(122,119,255,0.34);
  box-shadow: 0 20px 48px rgba(122,119,255,0.18);
}

.subscription-card-advanced {
  background: linear-gradient(180deg, rgba(255,106,0,0.96), rgba(255,136,64,0.92));
  color: #fff;
  border-color: rgba(255,106,0,0.3);
}

body.dark .subscription-card-advanced {
  background: linear-gradient(180deg, rgba(83,80,214,0.98), rgba(122,119,255,0.9));
  border-color: rgba(122,119,255,0.28);
}

.subscription-card-advanced .subscription-card-badge,
.subscription-card-advanced .subscription-price {
  background: rgba(255,255,255,0.14);
  color: #fff;
}

.subscription-card-coming-soon {
  opacity: 0.96;
}

.subscription-card-badge {
  width: fit-content;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(18, 24, 39, 0.06);
  color: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

body.dark .subscription-card-badge {
  background: rgba(255,255,255,0.08);
}

.subscription-card h2 {
  margin: 0;
  font-size: 1.8rem;
}

.subscription-illustration {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  background: rgba(18, 24, 39, 0.08);
  box-shadow: inset 0 0 0 1px rgba(18,24,39,0.05);
}

body.dark .subscription-illustration {
  background: rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.subscription-card-advanced .subscription-illustration {
  background: rgba(255,255,255,0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24);
}

.subscription-price {
  width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,106,0,0.1);
  color: var(--primary-light);
  font-size: 1.02rem;
  font-weight: 900;
}

body.dark .subscription-price {
  background: rgba(122,119,255,0.16);
  color: var(--primary-dark);
}

.subscription-card-desc {
  margin: 0;
  line-height: 1.7;
  opacity: 0.86;
}

.subscription-feature-list {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.subscription-feature-list li {
  position: relative;
  padding-left: 26px;
  line-height: 1.5;
}

.subscription-feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.22;
  box-shadow: 0 0 0 4px rgba(255,106,0,0.1);
}

body.dark .subscription-feature-list li::before {
  box-shadow: 0 0 0 4px rgba(122,119,255,0.12);
}

.subscription-card-advanced .subscription-feature-list li::before {
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.16);
}

.subscription-card-actions {
  margin-top: auto;
  padding-top: 8px;
}

.subscription-card-actions .btn-primary,
.subscription-card-actions .btn-login {
  width: 100%;
  text-align: center;
}

.subscription-card-actions button[disabled] {
  opacity: 0.72;
  cursor: default;
}

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

.subscription-section-head h2,
.subscription-footnote h2 {
  margin: 0;
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
}

.subscription-section-head p,
.subscription-footnote p {
  margin: 0;
  line-height: 1.65;
  opacity: 0.82;
}

.subscription-comparison {
  padding: 28px;
  margin-bottom: 28px;
}

.subscription-business {
  padding: 28px;
  margin-bottom: 28px;
}

.subscription-business-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.subscription-business-card {
  border-radius: 20px;
  border: 1px solid rgba(18, 24, 39, 0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.52));
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.dark .subscription-business-card {
  border-color: rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}

.subscription-business-card-enterprise {
  border-color: rgba(122,119,255,0.26);
  box-shadow: inset 0 0 0 1px rgba(122,119,255,0.2);
}

.subscription-business-card h3 {
  margin: 0;
  font-size: 1.4rem;
}

.subscription-business-price {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--primary-light);
}

body.dark .subscription-business-price {
  color: var(--primary-dark);
}

.subscription-business-card .btn-primary,
.subscription-business-card .btn-login {
  margin-top: auto;
  text-align: center;
}

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

.subscription-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.subscription-table th,
.subscription-table td {
  padding: 16px 14px;
  border-bottom: 1px solid rgba(18, 24, 39, 0.08);
  text-align: left;
}

body.dark .subscription-table th,
body.dark .subscription-table td {
  border-bottom-color: rgba(255,255,255,0.06);
}

.subscription-table thead th {
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.74;
}

.subscription-table tbody tr {
  transition: background 0.2s ease;
}

.subscription-table tbody tr:hover {
  background: rgba(255,106,0,0.05);
}

body.dark .subscription-table tbody tr:hover {
  background: rgba(122,119,255,0.08);
}

.subscription-footnote {
  padding: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.subscription-footnote-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

@keyframes subscriptionCardRise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes subscriptionFlashIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1120px) {
  .subscription-hero,
  .subscription-plans,
  .subscription-business-grid {
    grid-template-columns: 1fr;
  }

  .subscription-footnote {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 720px) {
  .subscription-page {
    max-width: calc(100% - 20px);
    padding: 18px 0 48px;
  }

  .subscription-hero-copy,
  .subscription-status-card,
  .subscription-card,
  .subscription-comparison,
  .subscription-footnote {
    padding: 20px;
    border-radius: 22px;
  }

  .subscription-section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .subscription-table {
    min-width: 640px;
  }
}