/* VPS component styling, aligned with the canonical UI/UX guide.
   Authority and migration notes: docs/branding-alignment.md. */
:root {
    color-scheme: dark;
    --lwr-black: #0B0D0F;
    --lwr-charcoal: #15191D;
    --lwr-gunmetal: #242A30;
    --lwr-silver: #B9C0C7;
    --lwr-white: #F2F3F4;
    --lwr-red: #FF2E36;
    --lwr-red-dark: #8E1B1B;
    --lwr-rust: #D66A2C;
    --lwr-success: #2E9D61;
    --lwr-warning: #D79B32;
    --lwr-danger: #D64545;
    --lwr-info: #4287C9;
    --lwr-muted: #707880;
    --color-action-primary: var(--lwr-red);
    --color-action-primary-pressed: var(--lwr-red-dark);
    --primary-color: var(--color-action-primary);
    --hover-color: var(--color-action-primary-pressed);
    --primary-ink: var(--lwr-black);
    --primary-pressed-ink: var(--lwr-white);
    --control-border: #707880;
    --action-border: #E05252;
    --accent-fg: var(--lwr-red);
    --link-fg: var(--accent-fg);
    --danger-fg: #F2909A;
    --ok-fg: #7FD8A6;
    --warning-fg: #E8B96A;
    --font-ui: Inter, "Segoe UI", Arial, sans-serif;
    --font-display: "Barlow Condensed", Inter, Arial, sans-serif;
    --font-mono: "Cascadia Mono", Consolas, monospace;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --radius-control: .25rem;
    --radius-card: .5rem;
    --duration-fast: 120ms;
    --duration-standard: 180ms;
    --duration-overlay: 240ms;
    --background-color: var(--lwr-black);
    --content-color: var(--lwr-charcoal);
    --content-light-color: var(--lwr-gunmetal);
    --text-primary: var(--lwr-white);
    --text-muted: var(--lwr-silver);
    --content-width: 1344px;
}
body { font: 400 .875rem/1.5 var(--font-ui); color: var(--text-primary); }
.lwr-background { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--background-color); }
.lwr-background img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.lwr-background::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--background-color) 55%, transparent); }
h1, h2, h3, h4 { font-family: var(--font-ui); font-weight: 700; }
.view--home .inner-content > .bg-content:first-of-type h1 { font-family: var(--font-display); }
code, kbd, samp { font-family: var(--font-mono); }
.price, .product-price, .cart-total, input[type='number'] { font-variant-numeric: tabular-nums; }
.product-price, .cart-total { color: var(--lwr-white); }
a, button, input, select, textarea { transition: color 120ms, background-color 120ms, border-color 120ms; }
a { text-underline-offset: .2em; }
.text-primary, .hover\:text-primary:hover { color: var(--link-fg); }
.text-muted, .text-gray-400, .text-neutral-300 { color: var(--text-muted); }
.text-white { color: var(--lwr-white); }
.bg-content { background: var(--content-color); }
.bg-content-light { background: var(--content-light-color); }
.bg-content-light:is(.rounded-xl, .rounded-2xl) { border-radius: var(--radius-card); }
.border-content-light { border-color: var(--lwr-gunmetal) !important; }
#storeApp {
    position: relative;
    z-index: 1;
    max-width: min(var(--content-width), calc(100% - 2rem));
    margin: 1.5rem auto;
    background: color-mix(in srgb, var(--background-color) 90%, transparent);
    border: 1px solid var(--lwr-gunmetal);
    border-radius: .5rem;
    padding: 1.5rem;
    min-height: calc(100vh - 3rem);
}
#content { padding: 1.5rem 0 2rem; }
#content > .container { padding-inline: 0; gap: 1.5rem; }
.inner-content { min-width: 0; gap: 1.5rem; }
.sidebar { max-width: 260px; gap: 1.5rem; }
.bg-content { border: 1px solid var(--lwr-gunmetal); border-radius: .5rem; box-shadow: none; }
.inner-content > .bg-content { padding: 1.5rem; }
.category-packages { gap: 1.25rem; }
.category-packages > .bg-content { transform: none; }
.category-packages > .bg-content:hover { border-color: var(--control-border); }
.category-packages img { transform: none; }
.category-packages .group-hover\:bg-primary { background: var(--content-light-color); }
.category-packages .text-red-400 { color: var(--danger-fg); }
.content-header { min-height: 76px; height: auto; padding: 1rem; gap: 1rem; }
.category-meta { gap: .75rem; }
.category-meta > a, #category-socials > a { width: 44px; height: 44px; box-shadow: none; }
.category-meta h2 { font-size: 1.5rem; }
.category-meta p { font-size: .75rem; font-weight: 500; }
.user-block { height: auto; min-height: 44px; gap: .75rem; padding: .25rem; border-radius: .25rem; }
.user-block > .bg-gradient-to-l { display: none; }
.user-block .custom-avatar { margin: 0; width: 36px; height: 36px; }
.user-block .text { padding: 0; transform: none; }
.user-block h2 { font: 600 .875rem/1.4 var(--font-ui); }
.user-block p { font-weight: 400; }
.store-menu-toggle { height: auto; min-height: 76px; padding: 1rem; border-radius: var(--radius-control); box-shadow: none; transform: none; }
.store-menu-toggle strong { font-size: 1.5rem; }
.store-menu-toggle .text > span { font-size: .75rem; font-weight: 400; }
.bg-primary, .bg-secondary { background-color: var(--primary-color); color: var(--primary-ink); }
.bg-primary :is(.text-white, .text-muted) { color: inherit; }
:is(button, a).bg-primary, .store-menu-toggle, .lwr-button {
    color: var(--primary-ink);
    background: var(--primary-color);
    border: 1px solid var(--action-border);
    border-radius: var(--radius-control);
    font-weight: 600;
    box-shadow: none;
}
:is(button, a).bg-primary:hover, .store-menu-toggle:hover, .lwr-button:hover {
    background: var(--hover-color);
    color: var(--primary-pressed-ink);
    opacity: 1;
    transform: none;
}
.btn-shine:hover::before { display: none; }
.lwr-button, .lwr-button-secondary { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .625rem 1.125rem; min-height: 44px; }
.lwr-button-secondary { background: transparent; color: var(--lwr-white); border: 1px solid var(--control-border); border-radius: var(--radius-control); font-weight: 600; }
.lwr-button-secondary:hover { background: var(--content-light-color); }
.buttons > a, .view--home a[href^='/legal/'] { background: transparent; border-color: var(--control-border); color: var(--lwr-white); }
.buttons > a:hover, .view--home a[href^='/legal/']:hover { background: var(--content-light-color); color: var(--lwr-white); }
input:not([type='checkbox'], [type='radio'], [type='hidden']), select, textarea {
    color: var(--lwr-white);
    background: var(--content-light-color);
    border: 1px solid var(--control-border);
    border-radius: .25rem;
    min-height: 44px;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input[type='checkbox'], input[type='radio'] { accent-color: var(--primary-color); }
button:disabled, [aria-disabled='true'] { opacity: .6; cursor: not-allowed; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--lwr-white);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--lwr-info);
}
.lwr-masthead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--lwr-gunmetal); }
.lwr-brand { display: flex; align-items: center; gap: .75rem; color: var(--lwr-white); font: 700 2rem/1.1 var(--font-display); min-width: 0; }
.lwr-brand img { width: 48px; height: 48px; object-fit: contain; flex: none; margin: 5px; }
.lwr-brand span { overflow-wrap: anywhere; }
.lwr-brand small { display: block; color: var(--text-muted); font: 500 .75rem/1.5 var(--font-ui); margin-top: .25rem; }
.lwr-account { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.lwr-auth-form { display: contents; }
.lwr-account > form > button:not(.lwr-button-secondary) { color: var(--link-fg); }
.lwr-account > a:not(.lwr-button-secondary) { color: var(--link-fg); overflow-wrap: anywhere; }
.lwr-navigation { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; padding-top: 1rem; }
.lwr-navigation > :is(a, button) { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem .875rem; min-height: 44px; border: 1px solid transparent; border-radius: .25rem; color: var(--text-muted); font-weight: 600; }
.lwr-navigation > :is(a, button):hover { background: var(--content-color); color: var(--lwr-white); }
.lwr-navigation > [aria-current='page'] { background: var(--content-light-color); color: var(--lwr-white); border-bottom: 2px solid var(--action-border); }
footer { background: transparent; border-color: var(--lwr-gunmetal); }
footer > .container { padding: 1.5rem 0 0; }
footer a:hover { color: var(--link-fg); }
.gift-icon { background: var(--content-light-color); border-color: var(--control-border); box-shadow: none; }
.lwr-product-artwork { position: relative; display: flex; align-items: center; justify-content: center; width: 128px; height: 128px; }
.lwr-product-modal-image { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.lwr-cart-image { display: block; flex: none; width: 64px; height: 64px; object-fit: contain; border-radius: var(--radius-control); background: var(--content-color); }
#cart-dialog h3 { overflow-wrap: anywhere; }
.lwr-recent-order { display: flex; align-items: flex-start; gap: .75rem; }
.lwr-order-avatar { flex: none; width: 48px; height: 48px; border-radius: var(--radius-control); object-fit: cover; }
.lwr-order-details { min-width: 0; overflow-wrap: anywhere; }
.lwr-order-summary { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .5rem; }
.lwr-order-amount { white-space: nowrap; }
.modal-nav::-webkit-scrollbar-track { background: var(--content-light-color); }
.modal-nav::-webkit-scrollbar-thumb { background: var(--control-border); }
#notification-alert { background: var(--content-light-color); color: var(--lwr-white); border: 1px solid var(--control-border); max-width: calc(100vw - 2rem); }
#cart-notification { max-width: calc(100vw - 2rem); background: var(--content-color); border: 1px solid var(--control-border); color: var(--lwr-white); }
#cart-notification[data-tone='success'] { color: var(--ok-fg); border-color: var(--ok-fg); }
#cart-notification[data-tone='error'] { color: var(--danger-fg); border-color: var(--danger-fg); }
#cart-notification[data-tone='warning'] { color: var(--warning-fg); border-color: var(--warning-fg); }
#cart-notification[data-tone='info'] { color: var(--link-fg); border-color: var(--link-fg); }
[role='dialog'] button[aria-label^='Close'] { min-width: 44px; min-height: 44px; }
[role='dialog'] { border-radius: .5rem; }
[x-show='modal.isOpen'], [x-show='cart.isOpen'] { transition-duration: var(--duration-overlay); }
/* Control corners and readable targets take precedence over legacy utilities. */
button, a.btn-shine, .add-btn, .add-gift-btn { border-radius: var(--radius-control); min-height: 44px; height: auto; white-space: normal; }
button:not(.store-menu-toggle) { min-width: 44px; }
.btn-shine { padding-block: .625rem; }
.lwr-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lwr-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lwr-icon-expanded { transform: rotate(180deg); }
svg[fill='none'] { stroke-width: 2; }
.lwr-icon-spin { animation: rotation 1s linear infinite; }
.hover\:bg-primary:hover { background-color: var(--content-light-color); color: var(--lwr-white); }
.group:hover .group-hover\:bg-white { background-color: var(--content-light-color); color: var(--lwr-white); }
.group:hover .group-hover\:text-white { color: inherit; }
.bg-primary .lwr-icon { color: inherit; }
.add-btn, button.bg-emerald-500 { padding: .625rem 1rem; background: var(--primary-color); color: var(--primary-ink); border: 1px solid var(--action-border); }
.add-btn:hover, button.bg-emerald-500:hover { background: var(--hover-color); color: var(--primary-pressed-ink); }
.add-gift-btn { padding: .625rem 1rem; background: transparent; border: 1px solid var(--control-border); color: var(--lwr-white); }
.text-red-300, .text-red-400 { color: var(--danger-fg); }
.text-green-300, .text-emerald-300 { color: var(--ok-fg); }
.text-yellow-200, .text-yellow-400 { color: var(--warning-fg); }
.bg-red-500, .bg-red-600\/10, .bg-red-500\/20, .hover\:bg-red-600:hover { background: var(--content-color); color: var(--danger-fg); border: 1px solid var(--danger-fg); }
.bg-yellow-900, .bg-yellow-500\/10 { background: var(--content-color); color: var(--warning-fg); border-color: var(--warning-fg); }
.bg-green-900, .bg-emerald-600\/10 { background: var(--content-color); color: var(--ok-fg); }
.bg-red-500 .text-white { color: inherit; }
.product-description, .text-block, .view--home .left > .text-muted { max-width: 80ch; }
.product-name { font: 700 2rem/1.1875 var(--font-ui); }
.lwr-product-detail { width: 100%; max-width: 60rem; margin-inline: auto; min-width: 0; }
.lwr-product-summary { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 1.5rem; }
.lwr-product-image-wrap { display: flex; align-items: center; justify-content: center; }
.lwr-product-image { display: block; width: 100%; max-width: 240px; height: 240px; max-height: 240px; object-fit: contain; }
.lwr-product-purchase { width: 100%; max-width: 36rem; min-width: 0; text-align: center; overflow-wrap: anywhere; }
.lwr-product-detail > .product-description { max-width: none; }
.lwr-product-detail .prose { max-width: 80ch; margin-inline: auto; overflow-wrap: anywhere; }
.lwr-product-detail .prose img { max-width: 100%; height: auto; }
.product-description .prose :is(ul, ol) { margin-block: 1rem; padding-inline-start: 1.75rem; list-style-position: outside; }
.product-description .prose ul { list-style-type: disc; }
.product-description .prose ul ul { list-style-type: circle; }
.product-description .prose ul ul ul { list-style-type: square; }
.product-description .prose ol { list-style-type: decimal; }
.product-description .prose ol[type='a'] { list-style-type: lower-alpha; }
.product-description .prose ol[type='A'] { list-style-type: upper-alpha; }
.product-description .prose ol[type='i'] { list-style-type: lower-roman; }
.product-description .prose ol[type='I'] { list-style-type: upper-roman; }
.product-description .prose li { display: list-item; }
.product-description .prose li + li { margin-block-start: .5rem; }
.product-description .prose li > :is(ul, ol) { margin-block: .5rem; }
[data-tooltip] { position: relative; }
#product-dialog { position: relative; }
.lwr-dialog-close[data-tooltip] { position: absolute; inset: 1rem 1rem auto auto; z-index: 10; display: flex; align-items: center; justify-content: center; }
.lwr-category-menu { padding-top: 4.5rem; }
.lwr-category-description { overflow-wrap: anywhere; white-space: pre-line; }
.lwr-category-icon { flex: none; overflow: hidden; }
.lwr-category-icon img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--content-light-color); }
[data-tooltip]::after { content: attr(data-tooltip); display: none; position: absolute; z-index: 60; inset-block-end: 100%; inset-inline-end: 0; width: max-content; max-width: 220px; padding: .375rem .625rem; border: 1px solid var(--control-border); border-radius: var(--radius-control); background: var(--content-color); color: var(--lwr-white); font: 400 .75rem/1.5 var(--font-ui); pointer-events: none; }
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { display: block; }
.lwr-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lwr-skip-link { position: fixed; top: .5rem; left: 1rem; z-index: 100; padding: .75rem 1rem; background: var(--content-color); color: var(--lwr-white); transform: translateY(-200%); }
.lwr-skip-link:focus { transform: translateY(0); }
@media (max-width: 1023px) {
    .sidebar { max-width: none; }
    .mobile-navigation { gap: 1rem; }
    .mobile-navigation .store-menu-toggle { height: auto; min-height: 60px; }
    #mobile-secondary { padding: .75rem; gap: .75rem; border-radius: .5rem; box-shadow: none; }
}
@media (max-width: 640px) {
    #storeApp { max-width: calc(100% - 1rem); margin: .5rem auto; padding: 1rem; }
    .lwr-brand { font-size: 1.75rem; }
    .lwr-account { width: 100%; }
    .inner-content > .bg-content { padding: 1.25rem; }
    .inner-content h1 { font-size: 2rem; }
    .category-packages { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}