:root {
  --navy-950: #030914;
  --navy-925: #050d18;
  --navy-900: #07111f;
  --navy-875: #091625;
  --navy-850: #0b1929;
  --navy-800: #102238;
  --navy-750: #17304a;
  --line: rgba(146, 194, 230, .15);
  --line-strong: rgba(149, 207, 249, .26);
  --text: #f3f7fb;
  --muted: #90a5b9;
  --muted-2: #6f8498;
  --ice: #78cff6;
  --ice-strong: #9be0ff;
  --success: #79d6b4;
  --shadow: 0 24px 80px rgba(0,0,0,.35);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.vastala-store {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 15% -10%, rgba(56,151,210,.15), transparent 32rem),
    radial-gradient(circle at 90% 7%, rgba(27,91,145,.13), transparent 28rem),
    linear-gradient(180deg, var(--navy-950), var(--navy-900) 34%, #06101c 100%);
  background-attachment: fixed;
}
body.vastala-store:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}
body.vastala-store a { color: var(--ice); transition: color .18s ease, opacity .18s ease, transform .18s ease, border-color .18s ease, background .18s ease; }
body.vastala-store a:hover, body.vastala-store a:focus { color: var(--ice-strong); text-decoration: none; }

.vastala-container { width: 100%; max-width: 1220px; }
.site-shell { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1; padding: 34px 0 72px; }

.brand-header { padding: 20px 0 12px; }
.brand-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand-lockup { display: inline-flex; align-items: center; gap: 13px; color: var(--text) !important; }
.brand-logo-frame { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg, rgba(122,207,246,.17), rgba(255,255,255,.035)); border: 1px solid var(--line-strong); box-shadow: inset 0 1px rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.25); }
.brand-logo { display: block; width: 100%; height: 100%; object-fit: cover; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.brand-copy strong { font-size: 17px; letter-spacing: .08em; text-transform: uppercase; }
.brand-copy small { color: var(--muted-2); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; margin-top: 5px; }
.header-basket { display: inline-flex; align-items: center; gap: 9px; padding: 10px 13px; border-radius: 12px; color: #dceaf5 !important; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.header-basket:hover { background: rgba(120,207,246,.08); border-color: var(--line-strong); transform: translateY(-1px); }
.header-basket-icon { color: var(--ice); font-size: 11px; }

.vastala-nav { min-height: 0; margin: 0; border: 1px solid var(--line); border-radius: 16px; background: rgba(7,18,31,.78); box-shadow: 0 14px 42px rgba(0,0,0,.2); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }
.vastala-nav .navbar-collapse { padding-left: 7px; padding-right: 7px; }
.vastala-nav .navbar-nav > li > a { color: #aebfce; padding: 15px 13px; font-size: 13px; font-weight: 600; letter-spacing: .015em; }
.vastala-nav .navbar-nav > li > a:hover, .vastala-nav .navbar-nav > li > a:focus, .vastala-nav .navbar-nav > .open > a, .vastala-nav .navbar-nav > .open > a:hover { color: #fff; background: rgba(255,255,255,.045); }
.vastala-nav-actions .basket-link { color: var(--ice) !important; }
.vastala-dropdown { padding: 8px; border-radius: 14px; background: #0a1726; border: 1px solid var(--line); box-shadow: var(--shadow); }
.vastala-dropdown > li > a { color: #b8c9d8; border-radius: 9px; padding: 9px 12px; }
.vastala-dropdown > li > a:hover { color: #fff; background: rgba(120,207,246,.08); }
.vastala-nav-toggle { border-color: var(--line-strong); }
.vastala-nav-toggle .icon-bar { background: #b9d5e7; }

.eyebrow { display: block; color: var(--ice); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 12px; }
.store-hero { position: relative; overflow: hidden; min-height: 390px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(230px, .75fr); align-items: center; gap: 40px; padding: 54px 58px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: linear-gradient(135deg, rgba(15,38,59,.88), rgba(5,14,25,.92)); box-shadow: var(--shadow); isolation: isolate; }
.store-hero:after { content:""; position:absolute; inset:1px; border-radius: calc(var(--radius-xl) - 1px); pointer-events:none; border-top:1px solid rgba(255,255,255,.05); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(4px); z-index: -1; }
.hero-glow-a { width: 360px; height: 360px; right: -120px; top: -140px; background: radial-gradient(circle, rgba(105,201,247,.20), transparent 67%); }
.hero-glow-b { width: 320px; height: 320px; left: 22%; bottom: -250px; background: radial-gradient(circle, rgba(54,119,171,.13), transparent 67%); }
.hero-content h1 { margin: 0; max-width: 700px; font-size: clamp(39px, 5vw, 67px); line-height: .98; letter-spacing: -.045em; font-weight: 760; }
.hero-content h1 span { color: #9bcde8; }
.hero-content p { max-width: 620px; margin: 22px 0 28px; color: #9eb1c3; font-size: 16px; line-height: 1.7; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-mark { display: grid; place-items: center; }
.hero-logo-frame { width: min(250px, 100%); aspect-ratio: 1; border-radius: 40px; overflow: hidden; transform: rotate(2.5deg); border: 1px solid rgba(151,214,249,.28); background: rgba(255,255,255,.035); box-shadow: 0 30px 70px rgba(0,0,0,.32), inset 0 1px rgba(255,255,255,.1); }
.hero-logo-frame img { width: 100%; height: 100%; display: block; object-fit: cover; }

.vastala-primary { border: 1px solid rgba(155,224,255,.42) !important; background: linear-gradient(180deg, #6fc8f0, #4ba8d6) !important; color: #04101b !important; font-weight: 800; border-radius: 11px; box-shadow: 0 8px 24px rgba(63,161,208,.18); }
.vastala-primary:hover, .vastala-primary:focus { background: linear-gradient(180deg, #8fdcff, #5db8e4) !important; border-color: rgba(190,235,255,.72) !important; color: #04101b !important; transform: translateY(-1px); }
.vastala-secondary { border: 1px solid var(--line) !important; background: rgba(255,255,255,.035) !important; color: #dce7ef !important; font-weight: 700; border-radius: 11px; }
.vastala-secondary:hover { background: rgba(255,255,255,.07) !important; border-color: var(--line-strong) !important; color: #fff !important; }

.store-section { margin-top: 56px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 20px; }
.section-heading h2 { margin: 0; font-size: 29px; letter-spacing: -.025em; font-weight: 740; }
.section-heading p { max-width: 480px; margin: 0; color: var(--muted); line-height: 1.6; }
.compact-heading { margin-bottom: 16px; }
.category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.category-card { min-height: 170px; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--line); color: var(--text) !important; background: linear-gradient(145deg, rgba(16,36,56,.7), rgba(8,20,34,.78)); }
.category-card:hover { transform: translateY(-3px); border-color: var(--line-strong); background: linear-gradient(145deg, rgba(19,44,67,.83), rgba(9,23,39,.92)); box-shadow: 0 20px 48px rgba(0,0,0,.22); }
.category-card-index { color: #59758c; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.category-card h3 { margin: 0 0 7px; font-size: 20px; font-weight: 700; }
.category-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; max-width: 90%; }
.category-arrow { position: absolute; right: 20px; top: 19px; color: var(--ice); font-size: 20px; }

.content-card, .panel, .well { color: var(--text); border: 1px solid var(--line) !important; border-radius: var(--radius-lg) !important; background: rgba(10,24,40,.78) !important; box-shadow: 0 16px 45px rgba(0,0,0,.18); }
.content-card { padding: 28px; }
.panel-heading { border-color: var(--line) !important; background: rgba(255,255,255,.035) !important; color: var(--text) !important; font-weight: 700; }
.panel-body { color: #b7c7d5; }
.panel-footer { border-color: var(--line) !important; background: rgba(255,255,255,.025) !important; }
.module-shell .panel { margin: 0; }
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.store-copy { margin-top: 24px; }
.rich-copy, .store-copy { color: #b7c7d5; line-height: 1.75; }
.rich-copy h1, .rich-copy h2, .rich-copy h3, .store-copy h1, .store-copy h2, .store-copy h3 { color: #f3f7fb; }
.rich-copy hr, .store-copy hr { border-color: var(--line); }

.page-banner { padding: 38px 4px 30px; }
.page-banner h1 { margin: 0; font-size: clamp(36px, 5vw, 58px); letter-spacing: -.04em; font-weight: 760; }
.page-banner p, .page-banner-copy { max-width: 760px; margin-top: 12px; color: var(--muted); line-height: 1.65; }
.small-banner { padding-bottom: 22px; }
.store-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: 18px; }
.store-layout-full { grid-template-columns: 1fr; }
.store-sidebar { display: grid; gap: 14px; position: sticky; top: 18px; }
.package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.package-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(16,36,56,.84), rgba(8,19,32,.9)); box-shadow: 0 14px 36px rgba(0,0,0,.16); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.package-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: 0 22px 50px rgba(0,0,0,.25); }
.package-image-wrap { aspect-ratio: 16/11; background: #081421; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.package-image { width: 100%; height: 100%; object-fit: cover; }
.package-image-placeholder { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 18px; border: 1px solid var(--line-strong); color: #bce9ff; background: linear-gradient(145deg, rgba(93,184,228,.15), rgba(255,255,255,.025)); font-size: 28px; font-weight: 800; }
.package-card-body { padding: 18px; }
.package-card h3 { min-height: 44px; margin: 0 0 18px; font-size: 18px; line-height: 1.25; }
.package-card-bottom { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.package-price { color: var(--muted); font-size: 13px; }
.package-price strong { display: block; color: #e9f4fb; font-size: 16px; }
.package-price del { color: #657b8d; margin-right: 4px; }
.package-list { display: grid; gap: 10px; }
.package-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 15px; background: rgba(11,26,43,.72); }
.package-row h3 { margin: 0 0 4px; font-size: 17px; }

.vastala-modal .modal-content { border: 1px solid var(--line-strong); border-radius: 18px; overflow: hidden; color: var(--text); background: #091725; box-shadow: var(--shadow); }
.vastala-modal .modal-header, .vastala-modal .modal-footer { border-color: var(--line); }
.vastala-modal .modal-title { font-size: 24px; font-weight: 740; }
.vastala-modal .modal-body { color: #b7c7d5; line-height: 1.7; }
.vastala-modal .close { color: white; opacity: .65; text-shadow: none; }

.product-detail-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(310px, .75fr); gap: 18px; align-items: start; }
.product-detail-image { display: block; width: 100%; max-height: 420px; object-fit: cover; margin-bottom: 22px; border-radius: 14px; border: 1px solid var(--line); }
.product-price-large { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; }
.product-price-large strong { font-size: 24px; color: #edf8ff; }
.product-price-large del { color: #6f8395; }
.purchase-card { position: sticky; top: 18px; }
.purchase-card h2 { margin: 0 0 22px; font-size: 25px; }
.purchase-button { margin-top: 14px; }
.form-control { height: 46px; border-radius: 11px; border: 1px solid var(--line) !important; background: rgba(1,8,15,.58) !important; color: #edf6fc !important; box-shadow: none !important; }
textarea.form-control { min-height: 120px; height: auto; }
.form-control:focus { border-color: rgba(120,207,246,.45) !important; box-shadow: 0 0 0 3px rgba(120,207,246,.08) !important; }
.form-control option { background: #091522; color: #fff; }
.form-group label { color: #c8d7e3; font-size: 12px; font-weight: 700; letter-spacing: .025em; }
.form-help-link { display: inline-block; margin-top: 7px; font-size: 12px; }

.table { color: #b9cad7; background: transparent; }
.table > thead > tr > th, .table > tbody > tr > td { border-color: var(--line) !important; vertical-align: middle; }
.table-striped > tbody > tr:nth-of-type(odd) { background: rgba(255,255,255,.018); }
.table-hover > tbody > tr:hover { background: rgba(120,207,246,.045); }
.alert.vastala-alert, .alert-warning { border-radius: 14px; border: 1px solid rgba(248,200,112,.23); background: rgba(112,80,23,.22); color: #f1d9a7; }

.auth-wrap, .status-wrap { min-height: 52vh; display: grid; place-items: center; }
.auth-card, .status-card { width: min(510px, 100%); text-align: left; }
.auth-card h1, .status-card h1 { margin: 0 0 12px; font-size: 34px; letter-spacing: -.035em; }
.muted-copy, .status-card p { color: var(--muted); line-height: 1.65; }
.status-card { text-align: center; padding: 42px 34px; }
.status-icon { width: 56px; height: 56px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(120,207,246,.08); color: var(--ice); font-size: 22px; font-weight: 800; }
.success-card .status-icon { color: var(--success); border-color: rgba(121,214,180,.28); background: rgba(121,214,180,.08); }
.steam-login img { max-width: 100%; }

.site-footer { margin-top: auto; border-top: 1px solid rgba(144,190,224,.08); padding: 30px 0 38px; color: var(--muted-2); }
.footer-grid { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.footer-brand { color: #dfeaf3; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; }
.footer-copy { margin: 7px 0 0; max-width: 480px; font-size: 12px; line-height: 1.6; }
.footer-links { display: flex; flex-wrap: wrap; gap: 15px; font-size: 12px; }
.footer-links a, .footer-credit a { color: #829aaf; }
.footer-credit { padding-top: 18px; margin-top: 18px; border-top: 1px solid rgba(145,193,228,.07); font-size: 11px; }

/* Compatibility styling for CraftingStore default basket / checkout / modules. */
.btn-primary { border-color: rgba(155,224,255,.42); background: #52add8; color: #04101b; }
.btn-primary:hover, .btn-primary:focus { border-color: rgba(190,235,255,.68); background: #6ac2e9; color: #04101b; }
.btn-default, .btn-secondary { border-color: var(--line); background: rgba(255,255,255,.04); color: #dce7ef; }
.btn-default:hover, .btn-secondary:hover { border-color: var(--line-strong); background: rgba(255,255,255,.07); color: #fff; }
.progress { background: #06101b; border-radius: 99px; overflow: hidden; }
.progress-bar { background: #58b3dc; }
hr { border-top-color: var(--line); }

@media (max-width: 991px) {
  .store-hero { grid-template-columns: 1fr; padding: 42px; }
  .hero-mark { display: none; }
  .category-grid, .package-grid, .module-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .store-layout, .product-detail-grid { grid-template-columns: 1fr; }
  .store-sidebar, .purchase-card { position: static; }
  .header-basket { display: none; }
}

@media (max-width: 767px) {
  .brand-header { padding-top: 14px; }
  .brand-logo-frame { width: 46px; height: 46px; }
  .vastala-nav { border-radius: 14px; }
  .vastala-nav .navbar-collapse { border-top-color: var(--line); box-shadow: none; }
  .vastala-nav .navbar-nav { margin: 7px 0; }
  .vastala-nav .navbar-nav > li > a { padding: 11px 13px; border-radius: 9px; }
  .site-main { padding-top: 20px; }
  .store-hero { min-height: 0; padding: 32px 24px; border-radius: 22px; }
  .hero-content h1 { font-size: 40px; }
  .hero-content p { font-size: 14px; }
  .section-heading { display: block; }
  .section-heading p { margin-top: 9px; }
  .category-grid, .package-grid, .module-grid { grid-template-columns: 1fr; }
  .category-card { min-height: 145px; }
  .page-banner { padding-top: 24px; }
  .page-banner h1 { font-size: 39px; }
  .package-row, .package-card-bottom { align-items: stretch; flex-direction: column; }
  .package-row .btn, .package-card-bottom .btn { width: 100%; }
  .content-card { padding: 22px; }
  .footer-grid { display: block; }
  .footer-links { margin-top: 16px; }
}

/* v1.1: description safety without blocked Twig string filters */
.category-description {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.category-description > * { margin: 0; }

/* v1.2 homepage hierarchy: Ranks first, remaining options second. */
.ranks-section {
  margin-top: 26px;
}
.rank-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
}
.rank-feature-card {
  min-height: 150px;
  padding: 26px 28px;
  background:
    radial-gradient(circle at 88% 15%, rgba(120,207,246,.11), transparent 16rem),
    linear-gradient(145deg, rgba(18,43,66,.88), rgba(8,20,34,.92));
}
.rank-feature-card h3 {
  font-size: 25px;
  margin-bottom: 8px;
}
.rank-feature-label {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--ice);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}
.options-section {
  margin-top: 18px;
}
.options-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

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

@media (max-width: 767px) {
  .options-grid { grid-template-columns: 1fr; }
  .rank-feature-card { min-height: 145px; padding: 22px; }
}

/* v1.3: package stability + media safety.
   Category cards now use normal package links rather than rendering every
   package description inside Bootstrap modals. This avoids loading all rich
   description media at once and removes modal scroll-lock/freezing issues. */
.package-image-link,
.package-title-link {
  color: inherit !important;
  text-decoration: none !important;
}
.package-image-link { display: block; }
.package-title-link:hover { color: var(--ice-strong) !important; }

/* Do not crop package artwork. */
.package-image-wrap {
  min-height: 210px;
  aspect-ratio: 16 / 11;
  padding: 10px;
  background: #06101b;
}
.package-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 10px;
}

.product-detail-image-wrap {
  width: 100%;
  margin-bottom: 22px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #06101b;
}
.product-detail-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  object-fit: contain;
  border: 0;
  border-radius: 9px;
}

/* CraftingStore package descriptions allow arbitrary HTML. Force common media
   to stay inside the card even when the dashboard editor saved fixed sizes. */
.package-rich-copy,
.category-page-description {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}
.package-rich-copy img,
.category-page-description img,
.rich-copy img,
.store-copy img {
  display: block;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  margin-left: auto;
  margin-right: auto;
  object-fit: contain !important;
}
.package-rich-copy video,
.package-rich-copy iframe,
.package-rich-copy embed,
.package-rich-copy object,
.rich-copy video,
.rich-copy iframe,
.rich-copy embed,
.rich-copy object {
  max-width: 100% !important;
}
.package-rich-copy table,
.rich-copy table {
  width: 100% !important;
  max-width: 100% !important;
  table-layout: fixed;
}
.package-rich-copy td,
.package-rich-copy th,
.rich-copy td,
.rich-copy th {
  overflow-wrap: anywhere;
}

/* Defensive styling in case a legacy cached category page still contains a modal. */
.vastala-modal {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.vastala-modal .modal-dialog {
  width: min(760px, calc(100% - 28px));
  margin: 28px auto;
}
.vastala-modal .modal-content { overflow: visible; }
.vastala-modal .modal-body {
  max-height: calc(100vh - 220px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.vastala-modal .modal-body img {
  display: block;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .package-image-wrap { min-height: 180px; }
  .vastala-modal .modal-dialog {
    width: calc(100% - 18px);
    margin: 9px auto;
  }
  .vastala-modal .modal-body { max-height: calc(100vh - 175px); }
}

/* v1.4: single basket + actual rank-style boxes on the homepage. */
/* The header basket is the desktop basket. The nav copy only exists for mobile,
   where the header basket is intentionally hidden. */
.vastala-nav-actions {
  display: none !important;
}

.rank-package-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}
.rank-package-preview {
  position: relative;
  min-width: 0;
  min-height: 238px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 18px;
  color: var(--text) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(17,39,61,.88), rgba(7,18,31,.96));
  box-shadow: 0 14px 36px rgba(0,0,0,.16);
}
.rank-package-preview:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .7;
  background:
    radial-gradient(circle at 90% 4%, rgba(120,207,246,.14), transparent 12rem),
    linear-gradient(125deg, transparent 55%, rgba(255,255,255,.025));
}
.rank-package-preview:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 22px 50px rgba(0,0,0,.25);
}
.rank-preview-art {
  position: relative;
  z-index: 1;
  height: 118px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid rgba(149,207,249,.16);
  border-radius: 15px;
  background: rgba(3,9,20,.58);
}
.rank-preview-art:before,
.rank-preview-art:after {
  content: "";
  position: absolute;
  width: 160%;
  height: 24px;
  transform: rotate(-28deg);
  opacity: .7;
}
.rank-preview-art:before { top: 23px; }
.rank-preview-art:after { bottom: 19px; }
.rank-preview-art span {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 18px;
  color: #eff9ff;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(4,13,24,.8);
  box-shadow: 0 12px 30px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.06);
  font-size: 28px;
  font-weight: 850;
  letter-spacing: -.04em;
}
.rank-preview-vastala .rank-preview-art:before { background: rgba(47,115,160,.72); }
.rank-preview-vastala .rank-preview-art:after { background: rgba(47,128,91,.55); }
.rank-preview-emperor .rank-preview-art:before { background: rgba(85,54,145,.72); }
.rank-preview-emperor .rank-preview-art:after { background: rgba(178,125,28,.58); }
.rank-preview-merchant .rank-preview-art:before { background: rgba(139,88,25,.70); }
.rank-preview-merchant .rank-preview-art:after { background: rgba(78,112,134,.58); }
.rank-preview-copy { position: relative; z-index: 1; }
.rank-preview-kicker {
  display: block;
  margin-bottom: 5px;
  color: #6d899f;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .18em;
}
.rank-package-preview h3 {
  margin: 0 0 13px;
  color: #f4f8fb;
  font-size: 22px;
  font-weight: 760;
  letter-spacing: -.025em;
}
.rank-preview-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.rank-preview-action b {
  color: var(--ice);
  font-size: 18px;
  font-weight: 500;
}

@media (max-width: 991px) {
  .vastala-nav-actions {
    display: block !important;
    float: none !important;
    margin: 0 0 7px !important;
  }
  .vastala-nav-actions > li { float: none; }
  .vastala-nav-actions > li > a {
    display: block;
    margin: 0 7px 7px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(120,207,246,.055);
  }
  .rank-package-preview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .rank-package-preview-grid { grid-template-columns: 1fr; }
  .rank-package-preview { min-height: 210px; }
}


/* v1.6 homepage — stable image-backed More Options cards.
   The images live as compact <img> data URIs in index.html instead of style.css,
   so CraftingStore can keep serving the stylesheet normally. */
.options-showcase {
  margin-top: 44px;
  scroll-margin-top: 24px;
}
.options-heading {
  align-items: end;
  margin-bottom: 20px;
}
.option-image-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.option-image-card {
  position: relative;
  isolation: isolate;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 24px 25px 21px;
  color: var(--text) !important;
  border: 1px solid rgba(149,207,249,.20);
  border-radius: 20px;
  background: linear-gradient(145deg, #0d2135, #071421 76%);
  box-shadow: 0 16px 38px rgba(0,0,0,.20), inset 0 1px rgba(255,255,255,.045);
}
.option-image-card:hover,
.option-image-card:focus {
  color: var(--text) !important;
  transform: translateY(-4px);
  border-color: rgba(132,211,248,.48);
  box-shadow: 0 26px 58px rgba(0,0,0,.30), 0 0 0 1px rgba(120,207,246,.045);
}
.option-card-bg {
  position: absolute;
  z-index: -4;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: .30;
  filter: saturate(.82) contrast(1.05);
  transform: scale(1.025);
  transition: opacity .28s ease, transform .5s ease, filter .28s ease;
  pointer-events: none;
}
.option-image-card:hover .option-card-bg,
.option-image-card:focus .option-card-bg {
  opacity: .42;
  filter: saturate(.98) contrast(1.06);
  transform: scale(1.065);
}
.option-card-shade {
  position: absolute;
  z-index: -3;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4,12,22,.93) 0%, rgba(5,15,26,.75) 48%, rgba(5,15,26,.48) 100%),
    linear-gradient(180deg, rgba(5,14,25,.12) 0%, rgba(5,14,25,.20) 45%, rgba(4,12,22,.88) 100%);
}
.option-card-topline {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 24px;
  width: 72px;
  height: 2px;
  background: linear-gradient(90deg, var(--ice), transparent);
  box-shadow: 0 0 16px rgba(120,207,246,.55);
  opacity: .9;
}
.option-card-copy {
  position: relative;
  z-index: 2;
  max-width: 72%;
}
.option-card-kicker {
  display: block;
  margin-bottom: 9px;
  color: #7ed4f9;
  font-size: 9px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.option-image-card h3 {
  margin: 0 0 9px;
  color: #f5f9fc;
  font-size: 25px;
  line-height: 1.08;
  font-weight: 780;
  letter-spacing: -.032em;
  text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
.option-image-card .category-description,
.option-image-card p {
  margin: 0;
  color: #acc0d1;
  font-size: 13px;
  line-height: 1.55;
  text-shadow: 0 1px 10px rgba(0,0,0,.7);
}
.option-image-card .category-description > *:not(:first-child) {
  display: none;
}
.option-image-card .category-description > *:first-child {
  margin: 0;
}
.option-card-action {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  margin-top: 22px;
  padding: 9px 10px 9px 13px;
  border: 1px solid rgba(149,207,249,.19);
  border-radius: 11px;
  color: #dceaf4;
  background: rgba(4,14,24,.46);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.option-card-action b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 8px;
  color: #06111c;
  background: #78cff6;
  font-size: 15px;
  font-weight: 800;
}
.option-image-card:hover .option-card-action,
.option-image-card:focus .option-card-action {
  background: rgba(13,35,53,.72);
  border-color: rgba(149,207,249,.36);
  transform: translateX(2px);
}

@media (max-width: 991px) {
  .option-image-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .option-image-card { min-height: 195px; padding: 21px; }
  .option-card-copy { max-width: 82%; }
}

@media (max-width: 767px) {
  .options-showcase { margin-top: 30px; }
  .option-image-grid { grid-template-columns: 1fr; }
  .option-image-card { min-height: 190px; padding: 20px; }
  .option-card-copy { max-width: 88%; }
  .option-image-card h3 { font-size: 22px; }
  .option-card-bg { opacity: .28; }
}

/* =========================================================
   v1.7 PACKAGE ARTWORK FRAME FIX
   Preserve the full original Vastala theme while making every
   package image fully visible inside a consistent card frame.
   ========================================================= */
.package-image-wrap {
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 11;
  padding: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #06101b;
  border-bottom: 1px solid var(--line);
}

.package-image-wrap .package-image,
.package-image {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 10px;
}

/* Keep card footers aligned even when product names wrap. */
.package-card {
  display: flex;
  flex-direction: column;
}
.package-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.package-card-bottom {
  margin-top: auto;
}

/* Product page: never crop the main package artwork either. */
.product-detail-image-wrap {
  width: 100%;
  margin-bottom: 22px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #06101b;
}
.product-detail-image-wrap .product-detail-image,
.product-detail-image {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0;
  object-fit: contain !important;
  object-position: center center !important;
  border: 0;
  border-radius: 9px;
}

@media (max-width: 767px) {
  .package-image-wrap {
    aspect-ratio: 4 / 3;
    padding: 8px;
  }
}


/* =========================================================
   v1.8 PACKAGE CARD POLISH
   Keeps every package artwork fully visible, while using a
   soft blurred copy behind it so wide card frames don't feel
   empty when the uploaded artwork is square or portrait.
   ========================================================= */
.package-grid {
  gap: 16px;
}

.package-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(149,207,249,.18);
  border-radius: 17px;
  background:
    linear-gradient(180deg, rgba(16,36,56,.88), rgba(7,18,31,.96));
  box-shadow: 0 13px 34px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.025);
}
.package-card:hover {
  transform: translateY(-3px);
  border-color: rgba(149,207,249,.34);
  box-shadow: 0 22px 48px rgba(0,0,0,.28), 0 0 0 1px rgba(120,207,246,.025);
}

.package-image-link {
  display: block;
  background: #06101b;
}
.package-image-wrap {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 0;
  aspect-ratio: 16 / 10;
  padding: 11px 14px 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #06101b;
  border-bottom: 1px solid rgba(149,207,249,.13);
}
.package-image-wrap::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3,9,20,.08) 45%, rgba(3,9,20,.30) 100%),
    radial-gradient(circle at 50% 42%, transparent 28%, rgba(3,9,20,.20) 100%);
}
.package-image-backdrop {
  position: absolute;
  z-index: 0;
  inset: -20px;
  width: calc(100% + 40px) !important;
  height: calc(100% + 40px) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: blur(20px) saturate(.78) brightness(.42);
  opacity: .86;
  transform: scale(1.08);
  pointer-events: none;
}
.package-image-wrap .package-image,
.package-image {
  position: relative;
  z-index: 2;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 7px;
  filter: drop-shadow(0 9px 15px rgba(0,0,0,.28));
  transition: transform .22s ease, filter .22s ease;
}
.package-card:hover .package-image {
  transform: scale(1.025);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.34));
}

.package-card-body {
  padding: 15px 14px 14px;
}
.package-card h3 {
  min-height: 40px;
  margin: 0 0 15px;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -.012em;
}
.package-card-bottom {
  gap: 10px;
  align-items: center;
}
.package-card .package-price {
  font-size: 12px;
}
.package-card .package-price strong {
  font-size: 14px;
  letter-spacing: -.01em;
}
.package-card .vastala-primary {
  min-width: 74px;
  padding: 7px 11px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.15;
  box-shadow: 0 6px 18px rgba(63,161,208,.15);
}

@media (max-width: 767px) {
  .package-image-wrap {
    aspect-ratio: 16 / 10;
    padding: 10px 12px;
  }
  .package-card-body { padding: 15px; }
  .package-card h3 { min-height: 0; }
}

/* =========================================================
   v1.9 BOXIER PACKAGE CARDS
   User preference: make the category package cards boxier
   instead of rounded-square.
   ========================================================= */
.package-card {
  border-radius: 7px;
}
.package-image-wrap {
  border-radius: 0;
}
.package-image-wrap .package-image,
.package-image {
  border-radius: 3px;
}
.package-card .vastala-primary {
  border-radius: 6px;
}
.package-card .package-price strong {
  font-size: 15px;
}
@media (max-width: 767px) {
  .package-card {
    border-radius: 6px;
  }
}

/* =========================================================
   v2.0 FIXED 225x225 PACKAGE IMAGE BOXES
   Force the package artwork area to render as a clean square
   box so the visual frame is always 225 x 225.
   ========================================================= */
.package-grid {
  align-items: start;
}
.package-image-link {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 12px 12px 0;
  background: transparent;
}
.package-image-wrap {
  width: min(225px, 100%);
  height: 225px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid rgba(149,207,249,.15);
  border-bottom: 1px solid rgba(149,207,249,.15);
  background: #06101b;
}
.package-image-wrap::after {
  inset: 0;
}
.package-card-body {
  padding-top: 14px;
}
@media (max-width: 767px) {
  .package-image-link {
    padding: 10px 10px 0;
  }
  .package-image-wrap {
    width: min(225px, 100%);
    height: min(225px, calc(100vw - 72px));
  }
}