/* GAME-GOLD · product page («витрина предмета»): own layout on top of the engine product script hooks. */
body.gp-page .gf-shell { background: var(--gf-pale); }
body.gp-page .gf-shell .x-main { padding: 0; }
.gp { color: var(--gf-navy); }
.gp-wrap { padding: 0 48px; }
.gp .gf-sh h2 { margin: 0; }

/* ---------- hero ---------- */
.gp-hero { position: relative; padding: 6px 0 96px; color: #fff; overflow: hidden;
  background:
    radial-gradient(620px 420px at 26% 58%, rgba(74,168,240,.45), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 18px),
    linear-gradient(180deg, var(--gf-ink), var(--gf-navy) 55%, var(--gf-navy-2));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 56px), 0 100%); }
.gp-hero-grid { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 52px; align-items: center; margin-top: 10px; }

.gp-tile { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border: 4px solid #fff; border-radius: 12px; box-shadow: 0 0 0 6px rgba(74,168,240,.28), 0 12px 0 rgba(5,14,32,.45), 0 30px 60px rgba(0,0,0,.45); transform: rotate(-1.5deg); }
.gp-tile::before { content: ""; position: absolute; inset: -30%; background: repeating-conic-gradient(from 0deg at 50% 42%, rgba(255,255,255,.18) 0 6deg, transparent 6deg 18deg); animation: gf-spin 40s linear infinite; }
.gp-tile > img { position: absolute; z-index: 1; left: 7%; right: 7%; top: 1%; width: 86%; height: calc(100% - 28px); object-fit: contain; object-position: center bottom; filter: drop-shadow(0 12px 16px rgba(10,24,48,.4)); transition: transform .35s; }
.gp-tile:hover > img { transform: scale(1.05) rotate(-1.5deg); }
.gp-tile .x-stickers, .gp-tile [class*="x-sticker"] { z-index: 3; }
.gp-tile-tag { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 22px 16px 12px; background: var(--gf-navy); clip-path: polygon(0 14px, 100% 0, 100% 100%, 0 100%); }
.gp-tile-tag span { font: italic 700 22px/1 var(--display); text-transform: uppercase; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-tile-tag b { flex: none; font: 600 12px/1 var(--font); color: var(--gf-sky-2); opacity: .8; }
.gp .x-gal-nav { z-index: 4; width: 42px; height: 42px; border-radius: 4px; border: 2px solid #fff; background: var(--gf-navy); opacity: 0; transform: translateY(-50%) skewX(-8deg); transition: opacity .2s; }
.gp-tile:hover .x-gal-nav { opacity: 1; }
.gp-thumbs { display: flex; gap: 10px; margin-top: 22px; overflow-x: auto; scrollbar-width: none; }
.gp-thumbs .thumb-btn { flex: none; width: 66px; height: 66px; padding: 0; overflow: hidden; border: 3px solid rgba(255,255,255,.35); border-radius: 6px; background: var(--gf-steel); opacity: .7; transform: skewX(-6deg); transition: opacity .2s, border-color .2s, box-shadow .2s; }
.gp-thumbs .thumb-btn.active, .gp-thumbs .thumb-btn:hover { opacity: 1; border-color: #fff; box-shadow: 0 0 0 3px var(--gf-sky); }
.gp-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.gp-head { min-width: 0; }
.gp-head .gf-chip { font-size: 15px; }
.gp-head .gf-chip:hover { color: var(--gf-navy); background: var(--gf-sky-2); }
.gp-head h1 { margin: 18px 0 18px; color: #fff; font-size: clamp(38px, 4.8vw, 66px); line-height: .95; text-shadow: 0 5px 0 rgba(5,14,32,.55); overflow-wrap: anywhere; }
.gp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-tags > * { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; color: #fff; background: rgba(5,14,32,.55); border-left: 4px solid var(--gf-sky); font: italic 600 15px/1 var(--display); text-transform: uppercase; transform: skewX(-8deg); }
.gp-tags .is-ok { border-color: var(--green); } .gp-tags .is-ok .fa { color: var(--green); }
.gp-tags .is-out { border-color: var(--red); } .gp-tags .is-out .fa { color: var(--red); }
.gp-tags .is-auto { border-color: var(--gf-gold); } .gp-tags .is-auto .fa { color: var(--gf-gold); }
.gp-tags .is-rate { color: #fff; } .gp-tags .is-rate:hover { color: var(--gf-sky-2); }
.gp-warn { margin: 14px 0 0; color: var(--gf-gold); font-weight: 600; }
.gp-lead { max-width: 600px; margin: 18px 0 0; color: #cfe3f7; font-size: 16px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.gp-hero-btns { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.gp-hero-btns .gf-btn { font-size: 22px; padding: 12px 30px; }
.gp-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 640px; margin: 34px 0 0; padding: 0; list-style: none; }
.gp-perks li { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 10px; align-items: center; }
.gp-perks i { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; color: #fff; background: linear-gradient(160deg, var(--gf-sky), var(--gf-steel)); font-size: 18px; transform: skewX(-8deg); box-shadow: 0 4px 0 var(--gf-ink); }
.gp-perks b { font: italic 700 16px/1.05 var(--display); text-transform: uppercase; }
.gp-perks small { color: var(--gf-sky-2); font-size: 12px; line-height: 1.25; }

/* ---------- build the order ---------- */
.gp-pick { padding: 26px 0 46px; }
.gp-pick-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; align-items: start; }
.gp-opts { min-width: 0; margin: 0; }
.gp .gp-opt { margin: 0 0 16px; padding: 18px 20px 22px; background: #fff; border: 3px solid #d5e6f7; border-radius: 10px; box-shadow: 0 6px 0 rgba(15,34,69,.08); }
.gp .gp-opt legend { justify-content: flex-start; text-align: left; gap: 12px; margin-bottom: 16px; color: var(--gf-navy); font: italic 700 24px/1 var(--display); text-transform: uppercase; }
.gp .gp-opt legend .gp-step { width: 38px; height: 38px; border-radius: 0; color: #fff; background: var(--gf-navy); font: italic 700 22px/1 var(--display); transform: skewX(-8deg); box-shadow: 0 4px 0 var(--gf-sky); }
.gp .gp-opt legend em { margin-left: auto; padding: 3px 10px; color: var(--gf-steel); background: var(--gf-pale); font: 600 11px/1.2 var(--font); letter-spacing: .06em; }
.gp .gp-opt.invalid { border-color: var(--red); box-shadow: 0 0 0 4px rgba(255,77,94,.15); }
.gp .x-select { color: var(--gf-navy); background-color: #fff; border: 3px solid #d5e6f7; border-radius: 8px; font-weight: 600; }

.gp .gp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; padding-top: 8px; }
.gp .gp-choice { position: relative; margin: 0; }
.gp .gp-choice .x-choice-box { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; height: 100%; min-height: 156px; padding: 22px 10px 14px; overflow: hidden; text-align: center; color: #fff; border: 3px solid #fff; border-radius: 8px;
  background: radial-gradient(circle at 50% 30%, #9ddcff, #2b7fd8 80%); box-shadow: 0 6px 0 rgba(15,34,69,.18); transition: transform .18s, box-shadow .18s, border-color .18s; }
.gp .gp-choice .x-choice-box::before { content: ""; position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg at 50% 35%, rgba(255,255,255,.14) 0 6deg, transparent 6deg 18deg); pointer-events: none; }
.gp .gp-choice .x-choice-box > * { position: relative; z-index: 1; }
.gp .gp-choice:hover .x-choice-box { transform: translateY(-4px); border-color: var(--gf-sky-2); box-shadow: 0 0 0 3px var(--gf-sky), 0 12px 22px rgba(15,34,69,.28); }
.gp .gp-choice input:checked + .x-choice-box { transform: translateY(-6px); border-color: #fff; background: radial-gradient(circle at 50% 30%, #d7f4ff, #2f86e4 78%); box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--gf-navy), 0 16px 28px rgba(15,34,69,.42); }
.gp .gp-choice.is-sale .x-choice-box { border-color: #fff; background: radial-gradient(circle at 50% 30%, #ffe496, #df921f 80%); }
.gp .gp-choice.is-sale input:checked + .x-choice-box { background: radial-gradient(circle at 50% 30%, #fff0bd, #eea52f 80%); }
.gp .gp-choice input:focus-visible + .x-choice-box { outline: 3px solid var(--gf-navy); outline-offset: 3px; }
.gp .gp-choice .x-choice-mark { display: none; }
.gp .gp-choice .x-choice-name { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff; font: italic 700 18px/1.05 var(--display); text-transform: uppercase; text-shadow: 0 2px 0 rgba(10,24,48,.35); }
.gp .gp-choice .x-choice-name b { color: #fff; font: italic 700 34px/1 var(--display); white-space: nowrap; }
.gp .gp-choice .x-choice-name small { color: #eef8ff; font: italic 600 15px/1.1 var(--display); }
.gp .gp-choice .x-oi { width: 46px; height: 46px; }
.gp .gp-choice .x-choice-price { display: inline-flex; flex-direction: row; align-items: baseline; justify-content: center; gap: 6px; margin-top: auto; padding: 5px 14px; color: #fff; background: var(--gf-navy); font: italic 700 18px/1 var(--display); transform: skewX(-8deg); text-shadow: none; }
.gp .gp-choice .x-choice-price b, .gp .gp-choice .x-choice-price.is-total.is-sale b { color: #fff; font: inherit; }
.gp .gp-choice .x-choice-price s { color: var(--gf-smoke-2); font: 500 12px/1 var(--font); }
.gp .gp-choice .x-choice-box > .x-choice-off { position: absolute; top: 8px; left: 8px; right: auto; z-index: 2; padding: 2px 9px; border-radius: 0; color: var(--gf-navy); background: #fff; font: italic 700 15px/1.2 var(--display); text-transform: uppercase; transform: skewX(-10deg); box-shadow: 3px 3px 0 var(--red); }
.gp .x-choices:has(.x-choice-off) { padding-top: 8px; row-gap: 14px; }

.gp-single { display: flex; align-items: center; gap: 18px; padding: 18px 20px; background: #fff; border: 3px solid #d5e6f7; border-radius: 10px; }
.gp-single img { flex: none; width: 84px; height: 84px; object-fit: contain; border-radius: 8px; background: radial-gradient(circle at 50% 38%, #9ddcff, #2b7fd8 78%); }
.gp-single b { display: block; font: italic 700 24px/1.05 var(--display); text-transform: uppercase; }
.gp-single span { color: #44597a; font-size: 14px; }

/* ---------- order panel ---------- */
.gp-cart { position: sticky; top: 84px; padding: 0 20px 20px; color: #fff; overflow: hidden; border: 3px solid #fff; border-radius: 10px;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 18px), linear-gradient(180deg, var(--gf-navy-2), var(--gf-navy)); box-shadow: 0 8px 0 rgba(15,34,69,.25), 0 24px 40px rgba(15,34,69,.25); }
.gp-cart-head { display: flex; align-items: center; justify-content: space-between; margin: 0 -20px 16px; padding: 14px 20px; background: linear-gradient(90deg, var(--gf-sky), var(--gf-steel)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 0 100%); }
.gp-cart-head span { font: italic 700 24px/1 var(--display); text-transform: uppercase; }
.gp-cart-head .gf-coin { height: 28px; }
.gp-cart .x-deal { margin-bottom: 14px; }
.gp .gp-picked { margin: 0 0 6px; }
.gp .gp-picked li { border-top-color: rgba(255,255,255,.14); }
.gp .gp-picked span { color: var(--gf-sky-2); }
.gp-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 12px 0 14px; border-bottom: 2px dashed rgba(255,255,255,.16); }
.gp-total > span { font: italic 600 18px/1 var(--display); text-transform: uppercase; color: var(--gf-sky-2); }
.gp-total .x-live { justify-content: flex-end; }
.gp-total #live-price { color: #fff; font: italic 700 40px/1 var(--display); text-shadow: 0 3px 0 rgba(5,14,32,.5); }
.gp-total .x-live s { color: var(--gf-smoke-2); font-size: 15px; }
.gp-qty-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; }
.gp-qty-row > span { font: italic 600 16px/1 var(--display); text-transform: uppercase; color: var(--gf-sky-2); }
.gp .gp-qty-row .x-qty { border: 2px solid rgba(255,255,255,.3); border-radius: 4px; background: var(--gf-ink); transform: skewX(-8deg); }
.gp .gp-actions { grid-template-columns: 1fr; gap: 12px; margin-top: 4px; }
.gp .gp-actions .x-btn-lg { height: 56px; font-size: 21px; }
.gp .gp-actions .x-btn-ghost { color: #fff; background: rgba(5,14,32,.5); border: 2px solid rgba(255,255,255,.45); box-shadow: 0 5px 0 var(--gf-ink); }
.gp .gp-actions .x-btn-ghost:hover { border-color: #fff; }
.gp .gp-fast { display: grid; gap: 10px; margin-top: 14px; padding: 14px; background: rgba(5,14,32,.45); border: 2px dashed rgba(255,255,255,.25); border-radius: 6px; }
.gp .gp-fast[hidden] { display: none; }
.gp .gp-fast p { margin: 0; color: #cfe3f7; font-size: 13px; }
.gp-cart-note { margin: 14px 0 0; color: var(--gf-sky-2); font-size: 12.5px; }

/* ---------- about ---------- */
.gp-info { padding: 10px 0 50px; }
.gp-info-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.gp .gp-desc { padding: 24px 26px; color: #2b3f60; background: #fff; border: 3px solid #d5e6f7; border-radius: 10px; font-size: 15px; line-height: 1.65; }
.gp .gp-desc :is(h1, h2, h3, h4, strong, b) { color: var(--gf-navy); }
.gp .gp-desc a { color: #1f6fc4; text-decoration: underline; }
.gp .gp-desc :is(p, li, span, div, td) { color: inherit !important; background: none !important; }
.gp-how { padding: 22px; background: #fff; border: 3px solid #d5e6f7; border-radius: 10px; }
.gp-how h3 { margin: 0 0 14px; color: var(--gf-navy); font-size: 24px; }
.gp-how ol { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.gp-how li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; }
.gp-how li > i { display: grid; place-items: center; width: 44px; height: 44px; color: #fff; background: linear-gradient(160deg, var(--gf-sky), var(--gf-steel)); font: italic 700 22px/1 var(--display); transform: skewX(-8deg); box-shadow: 0 4px 0 var(--gf-navy); }
.gp-how b { display: block; color: var(--gf-navy); font: italic 700 18px/1.1 var(--display); text-transform: uppercase; }
.gp-how span { color: #44597a; font-size: 14px; }

/* ---------- reviews ---------- */
.gp-reviews { padding: 80px 0 70px; color: #fff; background: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 18px), linear-gradient(180deg, var(--gf-navy), var(--gf-navy-2)); clip-path: polygon(0 48px, 100% 0, 100% calc(100% - 48px), 0 100%); }
.gp-reviews .gf-sh h2 { color: #fff; }
.gp-reviews .gf-sh .meta { color: var(--gf-sky-2); }

/* ---------- related ---------- */
.gp-related { padding: 10px 0 54px; }
.gp-related .x-scroll-ctrl button { color: #fff; background: var(--gf-navy); border: 0; border-radius: 4px; transform: skewX(-8deg); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .gp-hero-grid { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 34px; }
  .gp-pick-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .gp-perks { grid-template-columns: 1fr; max-width: 320px; }
}
@media (max-width: 900px) {
  .gp-hero-grid, .gp-pick-grid, .gp-info-grid { grid-template-columns: minmax(0, 1fr); }
  .gp-show { max-width: 420px; width: 100%; margin: 0 auto; }
  .gp-cart { position: static; }
  .gp-perks { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
}
@media (max-width: 760px) {
  .gp-wrap { padding: 0 16px; }
  .gp-hero { padding-bottom: 80px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), 0 100%); }
  .gp-head h1 { font-size: 38px; }
  .gp-hero-btns .gf-btn { font-size: 18px; padding: 10px 20px; }
  .gp-perks { grid-template-columns: 1fr; }
  .gp .gp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gp .gp-choice .x-choice-name b { font-size: 28px; }
  .gp .gp-opt { padding: 14px 12px 16px; }
  .gp .gp-opt legend { font-size: 20px; }
  .gp-reviews { padding: 60px 0 56px; clip-path: polygon(0 28px, 100% 0, 100% calc(100% - 28px), 0 100%); }
}
@media (prefers-reduced-motion: reduce) { .gp-tile::before { animation: none; } }

/* how-to-get: even step tiles */
.gp-how h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; line-height: 1; }
.gp-how h3::before { content: ""; width: 6px; height: 24px; background: linear-gradient(180deg, var(--gf-sky), var(--gf-steel)); transform: skewX(-12deg); }
.gp-how ol { gap: 12px; }
.gp-how li { position: relative; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 14px; background: #f3f8fe; border: 2px solid #e1eefa; border-radius: 8px; transition: border-color .2s, transform .2s; }
.gp-how li:hover { border-color: var(--gf-sky-2); transform: translateX(3px); }
.gp-how li + li::before { content: ""; position: absolute; left: 36px; top: -16px; width: 2px; height: 20px; background: repeating-linear-gradient(180deg, var(--gf-sky) 0 4px, transparent 4px 8px); }
.gp-how li > i { width: 46px; height: 46px; font-style: italic; transform: none; box-shadow: none; clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); background: linear-gradient(160deg, var(--gf-sky), var(--gf-navy-2)); }
.gp-how li > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gp-how b { font-size: 17px; line-height: 1; }
.gp-how span { display: block; font-size: 13.5px; line-height: 1.4; }
@media (max-width: 520px) {
  .gp-how { padding: 16px; }
  .gp-how li { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 10px 12px; }
  .gp-how li > i { width: 40px; height: 40px; font-size: 19px; }
  .gp-how li + li::before { left: 31px; }
}
.gp-cart-note { justify-content: center; text-align: center; }

/* ---------- promo timer ---------- */
.gp-cart .x-deal { margin-bottom: 16px; padding: 16px 16px 14px; border: 3px solid var(--gf-gold); border-radius: 8px; background: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 16px), radial-gradient(120% 90% at 0% 0%, rgba(255,196,64,.28), transparent 60%), linear-gradient(170deg, var(--gf-navy-2), var(--gf-ink)); box-shadow: 0 0 22px rgba(255,196,64,.3); animation: gp-deal-glow 2.6s ease-in-out infinite; }
@keyframes gp-deal-glow { 50% { box-shadow: 0 0 30px rgba(255,196,64,.55); } }
.gp-cart .x-deal::before { content: none; }
.gp-cart .x-deal-head { gap: 12px; margin-bottom: 16px; }
.gp-cart .x-deal-ico { width: 44px; height: 44px; border-radius: 0; color: var(--gf-navy); font-size: 19px; background: linear-gradient(180deg, #ffe88a, #ffb21f); clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); animation: none; }
.gp-cart .x-deal-title b { color: #fff; background: none; -webkit-background-clip: border-box; background-clip: border-box; font: italic 700 19px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.gp-cart .x-deal-title small { margin-top: 4px; color: var(--gf-sky-2); font: italic 500 13px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.gp-cart .x-deal-off { padding: 8px 14px; border-radius: 0; color: var(--gf-navy); background: linear-gradient(180deg, #ffe88a, #ffb21f); box-shadow: none; transform: none; font: italic 700 18px/1 var(--display); clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }

.gp-cart .x-flip { --fw: clamp(24px, 8cqi, 40px); gap: calc(var(--fw) * .22); }
.gp-cart .x-flip-group { gap: 8px; }
.gp-cart .x-flip-group small { color: var(--gf-sky-2); font: italic 600 12px/1 var(--display); letter-spacing: .06em; }
.gp-cart .x-flip-sep::before, .gp-cart .x-flip-sep::after { width: calc(var(--fw) * .16); border-radius: 0; background: var(--gf-gold); box-shadow: 0 0 8px rgba(255,196,64,.7); transform: skewX(-12deg); }
.gp-cart .x-fd { --fr: 4px; font: italic 700 calc(var(--fh) * .7)/1 var(--display); color: var(--gf-navy); text-shadow: none; box-shadow: 0 4px 0 #6f9fd3, 0 8px 16px rgba(0,0,0,.35); }
.gp-cart .x-fd-t, .gp-cart .x-fd-ft { background: linear-gradient(180deg, #fff, #e6f3fd); }
.gp-cart .x-fd-b, .gp-cart .x-fd-fb { color: var(--gf-navy); background: linear-gradient(180deg, #d6ebfc, #bcdcf7); }
.gp-cart .x-fd::after { height: 2px; background: rgba(15,34,69,.25); }

.gp-cart .x-deal-bar { height: 10px; margin: 16px 3px 0; border-radius: 0; background: rgba(255,255,255,.1); transform: skewX(-20deg); }
.gp-cart .x-deal-bar span { border-radius: 0; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.28) 0 6px, transparent 6px 12px), linear-gradient(90deg, #ffb21f, #ffe88a); background-size: 17px 17px, 100% 100%; box-shadow: 0 0 12px rgba(255,196,64,.6); }
.gp-cart .x-deal-foot { margin-top: 10px; color: #b9d3f0; font-size: 12.5px; }
.gp-cart .x-deal-foot i { color: var(--gf-gold); }

.gp-cart .x-deal.is-hot { border-color: #ff4d6a; box-shadow: 0 0 24px rgba(255,77,106,.45); animation-name: gp-deal-hot; animation-duration: 1.4s; background: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 16px), radial-gradient(120% 90% at 0% 0%, rgba(255,77,106,.3), transparent 60%), linear-gradient(170deg, var(--gf-navy-2), var(--gf-ink)); }
@keyframes gp-deal-hot { 50% { box-shadow: 0 0 34px rgba(255,77,106,.7); } }
.gp-cart .x-deal.is-hot .x-deal-ico, .gp-cart .x-deal.is-hot .x-deal-off { color: #fff; background: linear-gradient(180deg, #ff6b83, #d81f3f); }
.gp-cart .x-deal.is-hot .x-fd { color: #c8102e; text-shadow: none; }
.gp-cart .x-deal.is-hot .x-flip-sep::before, .gp-cart .x-deal.is-hot .x-flip-sep::after { background: #ff4d6a; box-shadow: 0 0 8px #ff4d6a; }
.gp-cart .x-deal.is-hot .x-deal-bar span { background: repeating-linear-gradient(-45deg, rgba(255,255,255,.28) 0 6px, transparent 6px 12px), linear-gradient(90deg, #d81f3f, #ff6b83); background-size: 17px 17px, 100% 100%; box-shadow: 0 0 12px rgba(255,77,106,.6); }
@media (prefers-reduced-motion: reduce) { .gp-cart .x-deal { animation: none; } }

.gp-slider { display: flex; flex-direction: column; gap: 12px; }
.gp-slider-readout b { display: block; color: var(--gf-navy); font: italic 700 28px/1.1 var(--display); text-transform: uppercase; }
.gp-slider-inputs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gp-slider input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.gp-slider input[type="range"]:focus { outline: none; }
.gp-slider input[type="range"]::-webkit-slider-runnable-track { height: 14px; border: 3px solid var(--gf-navy); border-radius: 999px; background: linear-gradient(90deg, var(--gf-sky) var(--pos, 0%), #e7f3fc var(--pos, 0%)); }
.gp-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border: 3px solid #fff; border-radius: 8px; background: var(--gf-navy); box-shadow: 0 0 0 3px var(--gf-sky); transform: skewX(-10deg); }
.gp-slider input[type="range"]::-moz-range-track { height: 14px; border: 3px solid var(--gf-navy); border-radius: 999px; background: #e7f3fc; }
.gp-slider input[type="range"]::-moz-range-progress { height: 14px; border-radius: 999px; background: var(--gf-sky); }
.gp-slider input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border: 3px solid #fff; border-radius: 8px; background: var(--gf-navy); box-shadow: 0 0 0 3px var(--gf-sky); }
.gp-slider-scale { display: flex; justify-content: space-between; gap: 6px; }
.gp-slider-scale button { flex: 1; min-width: 0; padding: 6px 4px; border: 2px solid #d5e6f7; border-radius: 6px; color: var(--gf-navy); background: #fff; font: italic 700 13px/1.1 var(--display); text-transform: uppercase; cursor: pointer; }
.gp-slider-scale button.is-on { color: #fff; border-color: var(--gf-navy); background: var(--gf-navy); }
.gp-slider-ends { display: flex; justify-content: space-between; color: var(--gf-steel); font: italic 700 14px/1 var(--display); text-transform: uppercase; }

.gp-slider-lock { margin: 0; color: var(--gf-steel); font: 600 13px/1.35 var(--font); }
.gp-slider-scale button.is-locked { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.gp .gp-choice.is-locked { opacity: .45; }
.gp .gp-choice.is-locked .x-choice-box { filter: grayscale(.5); }

.gp-dep-hint { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 8px 12px; color: var(--gf-navy); background: #eaf5fe; border-left: 4px solid var(--gf-sky); font: 600 13px/1.35 var(--font); }
.gp-dep-hint i { color: var(--gf-sky); font-size: 15px; }
.gp-dep-hint.is-master { background: #fff6dc; border-left-color: #eea52f; }
.gp-dep-hint.is-master i { color: #df921f; }
.gp-slider-flash { margin: 0; padding: 6px 10px; color: #fff; background: var(--gf-navy); font: 700 13px/1.3 var(--font); animation: gpFlashIn .25s ease; }
.gp-slider-flash.is-open { background: #1f9d55; }
.gp .gp-opt.is-dep-pulse { animation: gpDepPulse 1s ease; }
@keyframes gpDepPulse { 0% { box-shadow: 0 0 0 0 rgba(59,143,230,.0), 0 6px 0 rgba(15,34,69,.08); } 30% { box-shadow: 0 0 0 6px rgba(59,143,230,.45), 0 6px 0 rgba(15,34,69,.08); } 100% { box-shadow: 0 0 0 0 rgba(59,143,230,0), 0 6px 0 rgba(15,34,69,.08); } }
@keyframes gpFlashIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gp .gp-opt.is-dep-pulse, .gp-slider-flash { animation: none; } }

/* option blocks: HUD style */
.gp .gp-opt { position: relative; overflow: hidden; padding: 20px 22px 22px; color: #fff; border: 2px solid rgba(74,168,240,.55); border-radius: 12px;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 18px), radial-gradient(120% 140% at 100% 0%, rgba(74,168,240,.30), transparent 55%), linear-gradient(170deg, var(--gf-navy-2), var(--gf-ink));
  box-shadow: 0 8px 0 rgba(10,24,48,.35), 0 18px 34px rgba(15,34,69,.28), inset 0 1px 0 rgba(255,255,255,.12); }
.gp .gp-opt::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--gf-sky), rgba(74,168,240,0) 75%); pointer-events: none; }
.gp .gp-opt::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(74,168,240,.22), transparent 70%); pointer-events: none; }
.gp .gp-opt > * { position: relative; z-index: 1; }
.gp .gp-opt legend { color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.gp .gp-opt legend .gp-step { background: linear-gradient(160deg, #8fe0ff, var(--gf-sky) 45%, var(--gf-steel)); box-shadow: 0 0 0 2px #fff, 0 0 18px rgba(74,168,240,.75); }
.gp .gp-opt legend em { color: var(--gf-navy); background: var(--gf-gold); font-weight: 700; transform: skewX(-8deg); }
.gp .gp-opt.invalid { border-color: var(--red); box-shadow: 0 0 0 3px rgba(255,77,94,.35), 0 0 26px rgba(255,77,94,.35); }
.gp .gp-opt .x-opt-error { color: #ff9aa5; }

.gp-slider { gap: 10px; }
.gp-slider-readout { display: flex; align-items: baseline; gap: 10px; }
.gp-slider-readout b { color: #fff; font: italic 700 58px/.9 var(--display); text-shadow: 0 0 18px rgba(74,168,240,.85), 0 3px 0 rgba(0,0,0,.45); transition: color .2s, text-shadow .2s; }
.gp-slider-readout small { color: var(--gf-sky-2); font: italic 600 18px/1 var(--display); text-transform: uppercase; opacity: .85; }
.gp-slider-max { display: none; align-self: center; margin-left: 4px; padding: 4px 10px; color: var(--gf-navy); background: linear-gradient(180deg, #ffe88a, #ffb21f); font: italic 700 15px/1 var(--display); letter-spacing: .06em; transform: skewX(-10deg); box-shadow: 0 0 16px rgba(255,207,74,.7); }
.gp-slider.is-max .gp-slider-max { display: inline-block; animation: gpMaxPop .35s ease; }
.gp-slider.is-max .gp-slider-readout b { color: var(--gf-gold); text-shadow: 0 0 22px rgba(255,207,74,.9), 0 3px 0 rgba(0,0,0,.45); }
@keyframes gpMaxPop { from { transform: skewX(-10deg) scale(.6); opacity: 0; } to { transform: skewX(-10deg) scale(1); opacity: 1; } }

.gp-slider input[type="range"] { height: 36px; }
.gp-slider input[type="range"]::-webkit-slider-runnable-track { height: 16px; border: 2px solid rgba(255,255,255,.22); border-radius: 999px;
  background: linear-gradient(90deg, var(--gf-sky), #8fe0ff var(--pos, 0%), rgba(5,14,32,.65) var(--pos, 0%));
  box-shadow: inset 0 2px 6px rgba(0,0,0,.55), 0 0 14px rgba(74,168,240,.35); }
.gp-slider.is-max input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--gf-sky), #ffe88a 70%, #ffb21f var(--pos, 0%), rgba(5,14,32,.65) var(--pos, 0%)); box-shadow: inset 0 2px 6px rgba(0,0,0,.55), 0 0 18px rgba(255,207,74,.45); }
.gp-slider input[type="range"]::-webkit-slider-thumb { width: 34px; height: 34px; margin-top: -11px; border: 3px solid #fff; border-radius: 8px;
  background: linear-gradient(160deg, #8fe0ff, var(--gf-sky) 50%, var(--gf-steel)); box-shadow: 0 0 0 4px rgba(74,168,240,.35), 0 0 22px rgba(74,168,240,.95); transform: skewX(-10deg); transition: transform .15s, box-shadow .15s; }
.gp-slider input[type="range"]:hover::-webkit-slider-thumb, .gp-slider input[type="range"]:active::-webkit-slider-thumb { transform: skewX(-10deg) scale(1.12); box-shadow: 0 0 0 6px rgba(74,168,240,.35), 0 0 30px rgba(74,168,240,1); }
.gp-slider.is-max input[type="range"]::-webkit-slider-thumb { background: linear-gradient(160deg, #fff3b8, #ffcf4a 50%, #e39a12); box-shadow: 0 0 0 4px rgba(255,207,74,.35), 0 0 26px rgba(255,207,74,.95); }
.gp-slider input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 3px solid #fff; outline-offset: 3px; }
.gp-slider input[type="range"]::-moz-range-track { height: 14px; border: 2px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(5,14,32,.65); box-shadow: inset 0 2px 6px rgba(0,0,0,.55); }
.gp-slider input[type="range"]::-moz-range-progress { height: 14px; border-radius: 999px; background: linear-gradient(90deg, var(--gf-sky), #8fe0ff); box-shadow: 0 0 12px rgba(74,168,240,.6); }
.gp-slider.is-max input[type="range"]::-moz-range-progress { background: linear-gradient(90deg, var(--gf-sky), #ffe88a 70%, #ffb21f); }
.gp-slider input[type="range"]::-moz-range-thumb { width: 30px; height: 30px; border: 3px solid #fff; border-radius: 8px; background: linear-gradient(160deg, #8fe0ff, var(--gf-sky) 50%, var(--gf-steel)); box-shadow: 0 0 0 4px rgba(74,168,240,.35), 0 0 22px rgba(74,168,240,.95); }
.gp-slider.is-max input[type="range"]::-moz-range-thumb { background: linear-gradient(160deg, #fff3b8, #ffcf4a 50%, #e39a12); box-shadow: 0 0 0 4px rgba(255,207,74,.35), 0 0 26px rgba(255,207,74,.95); }

.gp-slider-ticks { height: 8px; margin: -6px 17px 0; border-right: 2px solid rgba(168,220,255,.55);
  background: linear-gradient(90deg, rgba(168,220,255,.55) 0 2px, transparent 2px) 0 0 / calc((100% - 2px) / var(--n, 10)) 100% repeat-x; opacity: .8; }
.gp-slider-ends { color: var(--gf-sky-2); }
.gp-slider-scale button { color: #dcefff; border: 2px solid rgba(168,220,255,.3); background: rgba(5,14,32,.45); transform: skewX(-8deg); transition: background .15s, color .15s, border-color .15s; }
.gp-slider-scale button:hover:not(:disabled) { border-color: var(--gf-sky); color: #fff; }
.gp-slider-scale button.is-on { color: var(--gf-navy); border-color: #fff; background: linear-gradient(180deg, #d7f4ff, var(--gf-sky)); box-shadow: 0 0 14px rgba(74,168,240,.7); }
.gp-slider-lock { color: var(--gf-sky-2); }

.gp-dep-hint { color: #dcefff; background: rgba(255,255,255,.06); border-left: 3px solid var(--gf-sky); border-radius: 0 6px 6px 0; backdrop-filter: blur(2px); }
.gp-dep-hint i { color: #8fe0ff; }
.gp-dep-hint.is-master { background: rgba(255,207,74,.1); border-left-color: var(--gf-gold); }
.gp-dep-hint.is-master i { color: var(--gf-gold); }
.gp-slider-flash { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin: 2px 0 0; padding: 7px 16px 7px 8px;
  color: #fff; font: italic 700 15px/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; border-radius: 6px; transform: skewX(-8deg);
  background: linear-gradient(100deg, #ff9f1c, #ff6b3d); border: 2px solid rgba(255,255,255,.75);
  box-shadow: 0 0 0 3px rgba(255,140,40,.25), 0 0 22px rgba(255,120,40,.55); text-shadow: 0 1px 0 rgba(0,0,0,.3);
  animation: gpFlashPop .45s cubic-bezier(.2,1.6,.4,1); }
.gp-slider-flash::before { content: "\25BC"; display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; color: #ff6b3d; background: #fff; border-radius: 4px; font: 900 12px/1 var(--font); text-shadow: none; }
.gp-slider-flash::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); animation: gpFlashShine 1.1s .25s ease-out; pointer-events: none; }
.gp-slider-flash.is-open { background: linear-gradient(100deg, #12b76a, #2ee6a0); box-shadow: 0 0 0 3px rgba(46,230,160,.25), 0 0 24px rgba(46,230,160,.6); }
.gp-slider-flash.is-open::before { content: "\25B2"; color: #12b76a; }
@keyframes gpFlashPop { from { opacity: 0; transform: skewX(-8deg) translateY(-6px) scale(.85); } to { opacity: 1; transform: skewX(-8deg); } }
@keyframes gpFlashShine { to { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .gp-slider-flash, .gp-slider-flash::after { animation: none; } }
.gp .gp-opt.is-dep-pulse { animation: gpDepPulseHud 1s ease; }
@keyframes gpDepPulseHud { 0%, 100% { border-color: rgba(74,168,240,.55); } 30% { border-color: #8fe0ff; box-shadow: 0 0 0 4px rgba(74,168,240,.45), 0 0 34px rgba(74,168,240,.6); } }

.gp .gp-opt .gp-choice input:checked + .x-choice-box { box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--gf-sky), 0 0 30px rgba(74,168,240,.85); }
.gp .gp-opt .gp-choice:hover .x-choice-box { box-shadow: 0 0 0 3px var(--gf-sky), 0 0 22px rgba(74,168,240,.55); }
.gp .gp-opt .gp-choice .x-choice-price { background: var(--gf-ink); box-shadow: 0 0 0 2px rgba(255,255,255,.6); }

@media (max-width: 767px) {
  .gp-slider-readout b { font-size: 44px; }
  .gp .gp-opt { padding: 16px 14px 18px; }
}
@media (prefers-reduced-motion: reduce) { .gp-slider.is-max .gp-slider-max { animation: none; } }