/*
 * Glass — an optional skin over style.css, in the spirit of Apple's Liquid Glass.
 * Loaded only when the `vrs_glass` option is on (or ?glass=1 preview), so turning
 * it off restores the original look instantly. Nothing in style.css depends on it.
 *
 * Recipe: translucent white over a warm ambient field, a bright 1px top edge,
 * soft long shadow, generous radii, pill controls. Real backdrop blur only where
 * something actually scrolls underneath (header, dock, hero card, dialogs) —
 * blur on every card in a grid costs frames on phones and adds nothing over a
 * still background. Brand gold stays a filled colour: glass frames it, never
 * replaces it.
 */

:root {
	--r: 20px;
	--r-s: 14px;
	--glass: rgba(255, 255, 255, .62);
	--glass-strong: rgba(255, 255, 255, .78);
	--glass-dark: rgba(24, 24, 28, .62);
	--glass-blur: blur(22px) saturate(170%);
	--glass-edge: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(255, 255, 255, .45);
	--glass-edge-dark: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .08);
	--glass-line: rgba(140, 128, 104, .18);
	--shadow: 0 1px 2px rgba(27, 29, 34, .05), 0 10px 30px rgba(27, 29, 34, .08);
	--shadow-up: 0 2px 6px rgba(27, 29, 34, .08), 0 24px 60px rgba(27, 29, 34, .16);
}

/* ------------------------------------------------------------ ambient field */
/* Glass needs something to refract: soft marble light behind the whole page. */
body { background: #F4F1EB; }
body::before {
	content: ''; position: fixed; inset: -10vmax; z-index: -1; pointer-events: none;
	background:
		radial-gradient(38vmax 30vmax at 12% 8%, rgba(201, 178, 122, .30), transparent 70%),
		radial-gradient(42vmax 34vmax at 92% 22%, rgba(186, 192, 204, .38), transparent 70%),
		radial-gradient(46vmax 36vmax at 70% 92%, rgba(216, 198, 181, .42), transparent 72%),
		radial-gradient(30vmax 26vmax at 8% 78%, rgba(255, 255, 255, .9), transparent 70%);
}

/* ------------------------------------------------------------------ header */
.topbar { background: rgba(20, 20, 24, .88); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.header {
	position: sticky; top: 0; z-index: 40;
	background: rgba(255, 255, 255, .66);
	backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
	border-bottom: 1px solid rgba(255, 255, 255, .6);
	box-shadow: 0 1px 0 var(--glass-line), 0 8px 24px rgba(27, 29, 34, .05);
}
.catbar { background: rgba(255, 255, 255, .38); border-top: 1px solid rgba(255, 255, 255, .55); }
.catbar__a { border-radius: 999px; }
.logo__tag { border-radius: 999px; }

/* ------------------------------------------------------------ pills & inputs */
.btn, .docbtn, .cartbtn, .chip, .catbar__a { border-radius: 999px; }
.btn--gold, .cartbtn, .search--hero .search__go {
	background: linear-gradient(180deg, #9C8647 0%, var(--gold-deep) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 16px rgba(116, 98, 46, .28);
}
.btn--ink { background: linear-gradient(180deg, #2E3139 0%, var(--ink) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 16px rgba(27, 29, 34, .22); }
.btn--line, .docbtn { background: var(--glass); border-color: rgba(255, 255, 255, .7); box-shadow: var(--glass-edge), 0 2px 8px rgba(27, 29, 34, .06); }

.search__input, .field input, .field select, .field textarea, .form input:not([type=checkbox]):not([type=radio]), .form select, .form textarea, .qty {
	background: var(--glass-strong); border-color: rgba(140, 128, 104, .22);
}
.search__input { border-radius: 999px 0 0 999px; }
.search__go { border-radius: 0 999px 999px 0; }
.search--hero .search__input { background: rgba(255, 255, 255, .9); }

/* Hover: every button keeps its own colour and brightens under a soft light
   layer (an inset shadow animates; swapping a gradient for a flat colour can't,
   which made the buttons jump). Base style.css hovers set flat backgrounds, so
   each variant restates its gradient here. */
.btn, .docbtn, .cartbtn, .search__go { transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s, color .2s, background-color .2s; }
.btn--gold:hover, .cartbtn:hover, .search--hero .search__go:hover {
	background: linear-gradient(180deg, #9C8647 0%, var(--gold-deep) 100%); color: #fff;
	box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .4), 0 10px 22px rgba(116, 98, 46, .34);
	transform: translateY(-1px);
}
.btn:not(.btn--gold):not(.btn--line):not(.btn--viber):not(.btn--wa):hover,
.btn--ink:hover {
	background: linear-gradient(180deg, #2E3139 0%, var(--ink) 100%); color: #fff;
	box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 22px rgba(27, 29, 34, .26);
	transform: translateY(-1px);
}
.btn--line:hover, .docbtn:hover {
	background: rgba(255, 255, 255, .9); color: var(--ink); border-color: rgba(139, 118, 59, .55);
	box-shadow: var(--glass-edge), 0 6px 16px rgba(27, 29, 34, .1);
	transform: translateY(-1px);
}
.btn--viber:hover, .btn--wa:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .08), 0 8px 18px rgba(27, 29, 34, .2); }
.btn:active, .docbtn:active, .cartbtn:active { transform: translateY(1px); }

/* Document buttons keep their meaning colours on glass. */
.docbtn--sds { background: rgba(251, 238, 221, .9); border-color: #E8C79A; color: var(--warn); }
.docbtn--sds:hover { background: #FBEEDD; border-color: #D9AE6E; color: var(--warn); }
.docbtn--viber, .docbtn--viber:hover { color: var(--viber); }

@media (prefers-reduced-motion: reduce) {
	.btn:hover, .docbtn:hover, .cartbtn:hover, .search__go:hover, .btn:active, .docbtn:active, .cartbtn:active { transform: none; }
}

/* ------------------------------------------------------------- surfaces */
.tile, .card, .block, .authcard, .summary, .gate, .empty, .req, .docrow, .acct,
.buy__codes, .codetable-wrap, .step, .channel, .xsell {
	background: var(--glass);
	border: 1px solid rgba(255, 255, 255, .7);
	box-shadow: var(--glass-edge), var(--shadow);
	border-radius: var(--r);
}
.tile:hover, .card:hover { box-shadow: var(--glass-edge), var(--shadow-up); transform: translateY(-2px); }
.tile, .card { transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.tile__media, .card__media { background: rgba(255, 255, 255, .55); }
.gallery__main { background: rgba(255, 255, 255, .8); box-shadow: var(--glass-edge), var(--shadow); border-radius: calc(var(--r) + 4px); }

.pick { background: var(--glass); border-color: rgba(255, 255, 255, .75); box-shadow: var(--glass-edge); border-radius: var(--r-s); }
.pick:has(input:checked) { background: rgba(241, 234, 216, .82); border-color: var(--gold); box-shadow: var(--glass-edge), 0 6px 18px rgba(139, 118, 59, .18); }
.buy__gate, .buy__codes { border-radius: var(--r); }
.buy__gate { background: rgba(241, 234, 216, .72); box-shadow: var(--glass-edge); }

.section--sunk, .helpband { background: rgba(255, 255, 255, .34); border-color: rgba(255, 255, 255, .6); }

/* Phones: the header (logo + search) scrolls away — a sticky 120px bar plus the
   dock would leave a quarter of the screen to chrome. The dock stays. */
@media (max-width: 1023px) {
	.header { position: relative; }
	html { scroll-padding-top: 1rem; }
}

/* ------------------------------------------------------------- filters */
/* Phones: an off-canvas panel over the page — it must be (nearly) opaque. */
.filters { background: rgba(255, 255, 255, .94); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.filters__head { background: transparent; }
@media (min-width: 1024px) {
	/* Desktop: a glass card that clears the sticky header. */
	.filters { top: 6rem; padding: .25rem 1.15rem 1rem; background: var(--glass); border: 1px solid rgba(255, 255, 255, .7);
		box-shadow: var(--glass-edge), var(--shadow); border-radius: var(--r); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------------------------------------------------------------- spacing */
.step { padding: 1.25rem 1.35rem; gap: .35rem 1rem; }
.step__title { margin-top: .35rem; }
.tile__body { padding: 1rem 1.1rem 1.15rem; }
.catgroup .tile__body { padding: .9rem 1rem 1rem; }
.catgroup__head { border-bottom-color: var(--glass-line); }
.brand { min-height: 112px; border-radius: var(--r); background: linear-gradient(180deg, #2E3139 0%, var(--ink) 100%);
	box-shadow: var(--glass-edge-dark), 0 10px 26px rgba(27, 29, 34, .16); border: 1px solid rgba(255, 255, 255, .06); }
.brand:hover { transform: translateY(-2px); box-shadow: var(--glass-edge-dark), 0 16px 34px rgba(27, 29, 34, .24); }
.brand { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
html { scroll-padding-top: 6.5rem; }

/* ---------------------------------------------------------------- hero */
.search--hero { filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .3)); }

/* ------------------------------------------------- floating, blurred layers */
.qa, .toast, .search__results {
	background: rgba(255, 255, 255, .8);
	backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
	box-shadow: var(--glass-edge), var(--shadow-up);
	border-radius: var(--r);
}

/* Mobile dock: a floating dark glass bar, like an iOS tab bar. */
.dock {
	left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
	padding-bottom: 0; border-radius: 22px; overflow: hidden;
	background: var(--glass-dark);
	backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
	box-shadow: var(--glass-edge-dark), 0 12px 32px rgba(0, 0, 0, .28);
}
.dock--viber, .dock--wa, .dock--cart { background: transparent; }
.dock--viber .ic { color: #B9B1F0; }
.dock--wa .ic { color: #7FD8A2; }
.dock--cart .ic { color: var(--gold-lit); }
body { --dock-gap: 0px; }
@media (max-width: 1023px) { body { padding-bottom: calc(var(--dock-h) + 20px); } }

/* ------------------------------------------------------------- footer */
.footer { background: #16161A; }

/* ------------------------------------------------------- accessibility */
/* People who ask the OS for less transparency get solid surfaces. */
@media (prefers-reduced-transparency: reduce) {
	.header, .topbar, .qa, .toast, .search__results, .dock { backdrop-filter: none; -webkit-backdrop-filter: none; }
	.header, .qa, .toast, .search__results { background: #fff; }
	.tile, .card, .block, .authcard, .summary, .gate, .empty, .req, .docrow, .acct, .pick, .buy__codes, .codetable-wrap { background: #fff; }
	.dock { background: var(--ink); }
	body::before { display: none; }
}
/* Browsers without backdrop-filter: more opaque, so text never sits on a busy photo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.header { background: rgba(255, 255, 255, .96); }
	.dock { background: rgba(24, 24, 28, .96); }
}
@media (prefers-reduced-motion: reduce) {
	.tile:hover, .card:hover { transform: none; }
}