/* ======================================================= KÁMO — Interactive CSS (product detail focused) - mobile-centered layout - image hover micro-interactions - stronger CTAs with subtle pulse + sheen - safe overflow handling (no horizontal scroll) - dropdown menu (dark) kept ======================================================= */ /* --- Webfonts --- */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Manrope:wght@600;700;800&display=swap"); /* --------- Tokens --------- */ :root { --bg: #ffffff; --card: #ffffff; --text: #0a0a0a; --muted: #2c3261; --blue-900: #000a66; --blue-800: #0012a6; --blue-700: #0019d9; --blue-600: #0024ff; --blue-500: #0000ff; --blue-400: #4c63ff; --blue-300: #8092ff; --blue-200: #b5c0ff; --blue-100: #e6e9ff; --blue-050: #f4f6ff; --line: rgba(0, 36, 255, 0.16); --radius: 16px; --shadow: 0 10px 30px rgba(2, 6, 23, 0.08); --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, Arial, sans-serif; --font-display: Manrope, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, Arial, sans-serif; --leading: 1.55; --container: min(1200px, 92vw); --btn-h: 44px; --btn-px: 18px; --btn-radius: 999px; --overlay-opacity: 0.42; --logo-h: 100px; --logo-h-footer: clamp(28px, 5vw, 40px); --logo-gap: 10px; /* CTA gradient + glow */ --cta-from: #0028ff; --cta-to: #0016d4; --cta-hover-from: #1f3eff; --cta-hover-to: #001dd6; --cta-active-from: #001fe0; --cta-active-to: #0013b8; --cta-glow: rgba(0, 27, 255, 0.32); } :root { color-scheme: only light; accent-color: var(--blue-500); } /* --------- Base / background --------- */ html, body { margin: 0; padding: 0; height: 100%; max-width: 100%; overflow-x: clip; } @supports not (overflow: clip) { html, body { overflow-x: hidden; } } /* Paint the GIF on ; the artwork stays untouched without extra overlays */ html { background-color: #000000; background-image: url("./gif/bg.gif"); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } @media (max-width: 900px) { html { background-attachment: scroll; } } body { min-height: 100dvh; display: flex; flex-direction: column; font-family: var(--font-sans); line-height: var(--leading); background: transparent; position: relative; isolation: isolate; overflow-wrap: anywhere; word-break: break-word; } body::before { content: ""; position: fixed; inset: 0; z-index: 5; background: rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } body[data-nav-open]::before { opacity: 1; pointer-events: auto; } body[data-nav-open] { overflow: hidden; touch-action: none; } :where(.inner, .container, .card, .admin-card, .site-section, .admin-order-card, .admin-orders-table) { overflow-wrap: anywhere; word-break: break-word; } @media (max-width: 767px) { html { background-image: url("./gif/smoke.gif"); background-attachment: fixed; background-position: center top; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } body>* { position: relative; z-index: 1; } * { box-sizing: border-box; } img { max-width: 100%; height: auto; display: block; } a { color: var(--blue-600); text-decoration: none; text-underline-offset: 2px; transition: color 0.15s ease, opacity 0.2s ease, transform 0.05s ease; } a:active { transform: translateY(1px); } a:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(0, 64, 255, 0.25); border-radius: 10px; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--blue-600); margin: 0 0 10px; line-height: 1.15; letter-spacing: -0.01em; } p { margin: 0 0 12px; color: var(--muted); } /* --------- Scroll animations --------- */ [data-animate] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--animate-delay, 0s); will-change: transform, opacity; } [data-animate="fade-up"] { transform: translateY(28px); } [data-animate="fade-scale"] { transform: translateY(18px) scale(0.96); } [data-animate="tilt-in"] { transform: translateY(18px) rotateX(6deg); } [data-animate].is-visible { opacity: 1; transform: none; } .site-shell { width: min(100%, var(--container)); margin: 0 auto; padding-block: clamp(24px, 6vw, 72px); padding-inline: clamp(16px, 6vw, 36px); padding-inline-start: max(clamp(16px, 6vw, 36px), env(safe-area-inset-left, 0px)); padding-inline-end: max(clamp(16px, 6vw, 36px), env(safe-area-inset-right, 0px)); } .site-shell>* { min-width: 0; } .site-shell>*+* { margin-top: clamp(24px, 5vw, 48px); } .grid { display: grid; gap: clamp(10px, 3vw, 18px); } .grid.grid-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .form-grid { display: grid; gap: clamp(12px, 3vw, 18px); } @media (max-width: 640px) { .grid.grid-2 { grid-template-columns: 1fr; } } .container { width: min(100%, var(--container)); margin: 0 auto; padding-inline: clamp(16px, 5vw, 32px); padding-inline-start: max(clamp(16px, 5vw, 32px), env(safe-area-inset-left, 0px)); padding-inline-end: max(clamp(16px, 5vw, 32px), env(safe-area-inset-right, 0px)); } .section { padding: clamp(24px, 6vw, 48px) 0; } .hr { height: 1px; background: var(--line); margin: 18px 0; } .card { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(20px, 4vw, 28px); } .card+.card { margin-top: clamp(16px, 4vw, 28px); } /* --------- Admin layout --------- */ body.is-admin { background-color: #0e1424; color: #e4ebff; } body.is-admin .site-shell { width: 100%; max-width: none; padding-block: clamp(16px, 4vw, 36px); padding-inline-start: max(clamp(12px, 4vw, 28px), env(safe-area-inset-left, 0px)); padding-inline-end: max(clamp(12px, 4vw, 28px), env(safe-area-inset-right, 0px)); background: #0b101d; } .is-admin::before { opacity: 0.18; } .admin-header { background: linear-gradient(135deg, #0f172a, #0b2251); border-bottom: 1px solid rgba(255, 255, 255, 0.04); box-shadow: 0 18px 36px rgba(3, 7, 18, 0.45); color: #e4ebff; } .admin-header__bar { padding: 14px 0; } .admin-header__content { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .admin-header .inner { width: 100%; max-width: none; padding-inline-start: max(clamp(16px, 5vw, 40px), env(safe-area-inset-left, 0px)); padding-inline-end: max(clamp(16px, 5vw, 40px), env(safe-area-inset-right, 0px)); } .admin-header__meta { display: grid; gap: 6px; align-items: flex-start; } .admin-header__note { color: rgba(228, 235, 255, 0.74); font-size: 14px; } .admin-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.08); color: #f6f8ff; font-weight: 700; letter-spacing: 0.02em; width: fit-content; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2); } .admin-brand { display: inline-flex; align-items: center; gap: 12px; } .admin-brand img { width: 46px; height: auto; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04); padding: 6px; } .admin-brand__text { display: grid; gap: 2px; } .admin-brand__title { font-family: var(--font-display); color: #f4f7ff; letter-spacing: -0.01em; } .admin-brand__subtitle { color: rgba(228, 235, 255, 0.72); font-size: 13px; } .admin-header__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .admin-back { color: #e4ebff; border-color: rgba(228, 235, 255, 0.22); } .admin-back:hover, .admin-back:focus-visible { color: #0f172a; background: #e4ebff; } .admin-user { color: rgba(228, 235, 255, 0.86); font-size: 14px; } .site-shell--admin { position: relative; width: 100%; max-width: none; margin: 0; } .admin-shell { display: grid; grid-template-columns: minmax(220px, 260px) 1fr; gap: clamp(14px, 3vw, 22px); row-gap: clamp(12px, 3vw, 18px); align-items: start; } .admin-shell__content { display: grid; gap: clamp(16px, 3vw, 24px); } .admin-shell__content>*+* { margin-top: 0; } .admin-sidebar { background: linear-gradient(180deg, rgba(15, 23, 42, 0.36), rgba(11, 17, 34, 0.8)); border: 1px solid rgba(228, 235, 255, 0.16); border-radius: 14px; padding: clamp(12px, 2.5vw, 18px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3); display: grid; gap: clamp(10px, 2vw, 14px); position: sticky; top: 14px; } .admin-sidebar__section { display: grid; gap: 6px; } .admin-sidebar__section--footer { border-top: 1px solid rgba(228, 235, 255, 0.12); padding-top: 10px; } .admin-sidebar__label { font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; font-size: 12px; color: rgba(228, 235, 255, 0.76); } .admin-sidebar__link { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(228, 235, 255, 0.12); color: #f1f5ff; text-decoration: none; background: rgba(255, 255, 255, 0.02); transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .admin-sidebar__link-title { font-weight: 800; letter-spacing: 0.01em; } .admin-sidebar__hint { color: rgba(228, 235, 255, 0.68); font-size: 12px; } .admin-sidebar__link:hover, .admin-sidebar__link:focus-visible { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); transform: translateX(4px); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24); } .admin-sidebar__link.is-active { border-color: rgba(109, 185, 255, 0.8); background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(58, 123, 255, 0.16)); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.32); } .admin-sidebar__link--secondary { background: rgba(255, 255, 255, 0.04); } .admin-sidebar__actions { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .admin-sidebar__action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(228, 235, 255, 0.18); background: rgba(255, 255, 255, 0.08); color: #f6f8ff; text-decoration: none; font-weight: 700; transition: background 0.2s ease, border-color 0.2s ease; } .admin-sidebar__action:hover, .admin-sidebar__action:focus-visible { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.32); } @media (max-width: 960px) { .admin-shell { grid-template-columns: 1fr; } .admin-sidebar { position: relative; top: 0; } .admin-header__content { align-items: flex-start; flex-direction: column; } .admin-grid { grid-template-columns: 1fr; } } @media (max-width: 820px) { .admin-shell__content { gap: 14px; } .admin-panel { padding: 12px 14px; } .admin-panel__head { flex-direction: column; align-items: flex-start; } .admin-chip-row { width: 100%; } .admin-dashboard { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .admin-sidebar { padding: 12px; } } @media (max-width: 640px) { .admin-header__content { flex-direction: column; align-items: flex-start; } .admin-brand { width: 100%; } .admin-header__meta { width: 100%; } .admin-sidebar__actions { grid-template-columns: 1fr; } .admin-grid { gap: 14px; } .admin-dashboard { grid-template-columns: 1fr; } .admin-chip-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .admin-card__header { margin-bottom: 10px; } .admin-order-card__grid { grid-template-columns: 1fr; gap: 14px; } } .is-admin .card { background: #ffffff; box-shadow: 0 16px 38px rgba(15, 23, 42, 0.12); border-color: rgba(15, 23, 42, 0.08); backdrop-filter: blur(8px); } .admin-card { margin-inline: auto; width: 100%; } .admin-card--wide { max-width: 100%; } .admin-card--narrow { max-width: 620px; } .admin-card__header { display: grid; gap: 4px; margin-bottom: clamp(10px, 2.4vw, 18px); padding-bottom: 10px; border-bottom: 1px solid rgba(15, 23, 42, 0.08); } .admin-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.95fr); gap: clamp(14px, 3vw, 22px); align-items: start; } .admin-grid__primary, .admin-grid__secondary { display: grid; gap: clamp(12px, 2.6vw, 18px); } .admin-panel { padding: clamp(14px, 3vw, 20px); border-radius: 16px; border: 1px solid rgba(15, 23, 42, 0.08); background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.98)); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.1); display: grid; gap: clamp(10px, 2vw, 14px); } .admin-panel--ghost { background: rgba(248, 250, 255, 0.9); border-style: dashed; border-color: rgba(15, 23, 42, 0.12); } .admin-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .admin-panel__title { margin: 0; } .admin-eyebrow { margin: 0; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; color: rgba(15, 23, 42, 0.62); font-weight: 800; } .admin-chip-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .admin-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.12); background: rgba(255, 255, 255, 0.88); color: #0f172a; font-weight: 700; font-size: 12px; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .admin-chip--solid { background: linear-gradient(135deg, rgba(0, 40, 255, 0.1), rgba(0, 40, 255, 0.18)); border-color: rgba(0, 40, 255, 0.3); color: #0b1550; } .admin-chip--muted { background: rgba(15, 23, 42, 0.04); border-style: dashed; } .admin-chip--link { background: #0b1550; color: #ffffff; border: 1px solid rgba(11, 21, 80, 0.28); } .admin-chip--link:hover, .admin-chip--link:focus-visible, .admin-chip:hover, .admin-chip:focus-visible { background: rgba(0, 40, 255, 0.1); border-color: rgba(0, 40, 255, 0.2); color: #0b1550; transform: translateY(-1px); } .admin-chip--link:hover, .admin-chip--link:focus-visible { background: #0b1550; color: #fff; } .admin-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: clamp(12px, 3vw, 22px); } .admin-summary__item { padding: clamp(12px, 2.6vw, 18px); border-radius: 14px; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08); display: grid; gap: 6px; min-height: 72px; } .admin-summary__item--accent { background: linear-gradient(135deg, rgba(0, 40, 255, 0.06), rgba(0, 40, 255, 0.02)); border-color: rgba(0, 40, 255, 0.16); box-shadow: 0 20px 50px rgba(0, 32, 140, 0.12); } .admin-summary__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .admin-summary__label { color: rgba(15, 23, 42, 0.58); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 800; } .admin-summary__value { font-size: 22px; font-weight: 800; color: #0f172a; } .admin-summary__value-row { display: flex; align-items: baseline; gap: 8px; } .admin-summary__hint { color: rgba(15, 23, 42, 0.62); font-weight: 600; letter-spacing: 0.01em; font-size: 12px; } .admin-summary__meta { display: flex; flex-wrap: wrap; gap: 6px; } .admin-summary__link { color: #0b1550; font-weight: 800; text-decoration: none; padding: 6px 9px; border-radius: 10px; border: 1px solid rgba(15, 23, 42, 0.12); background: rgba(15, 23, 42, 0.04); transition: all 0.2s ease; } .admin-summary__link:hover, .admin-summary__link:focus-visible { background: rgba(0, 40, 255, 0.1); border-color: rgba(0, 40, 255, 0.18); } .admin-dashboard { display: grid; gap: clamp(14px, 3.4vw, 22px); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .admin-tile { display: flex; flex-direction: column; gap: 10px; padding: clamp(16px, 3vw, 24px); border-radius: 14px; border: 2px solid rgba(15, 23, 42, 0.14); background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 255, 0.96)); text-decoration: none; color: inherit; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease, filter 0.25s ease; box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12); } .admin-tile:hover, .admin-tile:focus-visible { transform: translateY(-3px); border-color: rgba(17, 24, 39, 0.28); box-shadow: 0 32px 64px rgba(15, 23, 42, 0.18); background: #ffffff; filter: saturate(1.05); } .admin-tile h3 { margin: 0; font-size: 20px; letter-spacing: 0.01em; } .admin-tile p { margin: 0; color: rgba(20, 32, 88, 0.78); font-size: 14px; line-height: 1.5; } .admin-tile__cta { margin-top: auto; font-weight: 700; font-size: 14px; color: #0b1550; display: inline-flex; align-items: center; gap: 6px; } .admin-quick { margin-top: clamp(14px, 3.4vw, 22px); padding-top: clamp(10px, 2.6vw, 16px); border-top: 1px solid rgba(15, 23, 42, 0.08); } .admin-quick h3 { margin: 0 0 8px; font-size: 15px; } .admin-quick__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .admin-quick__link { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(15, 23, 42, 0.08); background: rgba(255, 255, 255, 0.9); text-decoration: none; color: inherit; font-weight: 600; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); } .admin-quick__link span { color: rgba(15, 23, 42, 0.6); font-size: 12px; } .admin-quick__link:hover, .admin-quick__link:focus-visible { border-color: rgba(17, 24, 39, 0.18); background: #ffffff; transform: translateY(-2px); box-shadow: 0 18px 32px rgba(15, 23, 42, 0.14); } .admin-quick__list--stacked { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .admin-quick__list--stacked .admin-quick__link { flex-direction: column; align-items: flex-start; gap: 4px; } .admin-quick__list--stacked .admin-quick__link span { margin-left: 0; } .admin-sidecard { padding: clamp(14px, 3vw, 20px); border-radius: 16px; border: 1px solid rgba(15, 23, 42, 0.1); background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 247, 255, 0.96)); box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12); display: grid; gap: 10px; } .admin-sidecard--neutral { background: rgba(248, 250, 255, 0.92); border-style: dashed; } .admin-sidecard__actions { display: flex; flex-wrap: wrap; gap: 8px; } .admin-status { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .admin-status li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(0, 40, 255, 0.1); background: rgba(0, 40, 255, 0.03); } .admin-status__label { font-weight: 700; color: #0f172a; } .admin-status__hint { margin: 4px 0 0; font-size: 12px; color: rgba(15, 23, 42, 0.7); } .admin-status__value { font-weight: 800; color: #0b1550; font-size: 18px; white-space: nowrap; } .admin-chip-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 8px 0 4px; } .admin-stat { padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(0, 40, 255, 0.14); background: linear-gradient(180deg, rgba(0, 40, 255, 0.06), rgba(0, 40, 255, 0.02)); box-shadow: 0 18px 34px rgba(8, 24, 96, 0.12); } .admin-stat__label { margin: 0 0 6px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0, 24, 100, 0.7); } .admin-stat__value { margin: 0; font-size: 28px; font-weight: 800; color: var(--blue-900); } .admin-stat__value--highlight { color: #0b8643; } .admin-form { display: grid; gap: clamp(18px, 4vw, 28px); } .admin-section { border: 1px solid rgba(0, 40, 255, 0.18); border-radius: var(--radius); padding: clamp(16px, 3.2vw, 24px); background: rgba(255, 255, 255, 0.92); display: grid; gap: clamp(12px, 2.6vw, 18px); } .admin-section legend { font-weight: 700; font-size: 18px; color: var(--blue-900); margin-bottom: 8px; padding: 0; } .admin-section .small { color: rgba(32, 44, 96, 0.65); } .admin-section .form-row { gap: clamp(14px, 3vw, 20px); } .phone-input-group { display: flex; gap: 8px; align-items: stretch; } .phone-input-group__prefix { max-width: 140px; min-width: 110px; } .phone-input-group__number { flex: 1; } @media (max-width: 620px) { .phone-input-group { flex-direction: column; } .phone-input-group__prefix { max-width: none; } } .admin-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .admin-order-list { display: flex; flex-direction: column; gap: 24px; margin-top: 16px; } .admin-order-actions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 12px 0 20px; align-items: stretch; } .admin-order-actions-grid__block { padding: 16px; border: 1px solid rgba(0, 36, 255, 0.12); border-radius: 16px; background: linear-gradient(180deg, rgba(0, 24, 255, 0.03), rgba(0, 24, 255, 0.01)); box-shadow: 0 10px 26px rgba(2, 6, 23, 0.08); display: grid; gap: 10px; align-content: start; } .admin-order-actions-grid__title { margin: 0; font-size: 18px; color: var(--blue-900); } .admin-order-actions-grid__eyebrow { margin: 0 0 4px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; color: rgba(0, 18, 150, 0.7); font-weight: 700; } .admin-order-actions-grid__controls { display: grid; gap: 6px; } .admin-order-actions-grid__controls--stacked { gap: 10px; } .admin-order-actions-grid__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .admin-order-actions-grid__filter { display: inline-flex; align-items: center; gap: 8px; margin: 0; } .admin-order-actions-grid__filter select { width: auto; padding: 6px 10px; } .admin-orders-table-wrapper { margin-top: 16px; overflow-x: auto; } .admin-orders-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 1100px; background: var(--card); border: 1px solid rgba(0, 36, 255, 0.12); border-radius: 16px; box-shadow: 0 12px 30px rgba(2, 6, 23, 0.08); } .admin-orders-table thead th { text-align: left; padding: 14px 16px; font-size: 14px; font-weight: 700; color: var(--blue-900); background: rgba(0, 24, 255, 0.04); } .admin-sort-btn { border: none; background: transparent; display: inline-flex; align-items: center; gap: 6px; font: inherit; color: inherit; cursor: pointer; padding: 0; } .admin-sort-btn__icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 6px; font-size: 13px; color: rgba(0, 18, 150, 0.8); background: rgba(0, 18, 150, 0.06); } .admin-sort-btn.is-active .admin-sort-btn__icon { background: rgba(0, 18, 150, 0.12); color: var(--blue-900); } .admin-orders-table tbody td { padding: 14px 16px; vertical-align: top; border-top: 1px solid rgba(0, 36, 255, 0.08); font-size: 14px; color: var(--text); word-break: break-word; overflow-wrap: anywhere; } .admin-orders-table tbody tr:hover { background: rgba(0, 24, 255, 0.02); } .admin-order-title, .admin-order-meta-row, .admin-order-product-list li, .admin-order-card__meta-row, .admin-order-card__value { word-break: break-word; overflow-wrap: anywhere; } .admin-order-title { font-weight: 800; font-size: 16px; color: var(--blue-900); } .admin-order-select { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(12, 16, 48, 0.7); margin-bottom: 6px; user-select: none; } .admin-order-select__input { width: 16px; height: 16px; } .admin-order-meta { margin-top: 4px; font-size: 13px; color: rgba(12, 16, 48, 0.6); } .admin-order-statuses { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .admin-order-meta-row { margin: 4px 0 0; font-size: 13px; color: rgba(12, 16, 48, 0.72); } .admin-order-meta-row span { font-weight: 700; color: rgba(0, 18, 150, 0.9); margin-right: 4px; } .admin-order-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .admin-order-cards-mobile { display: none; flex-direction: column; gap: 16px; margin-top: 16px; } .admin-order-card { border: 1px solid rgba(0, 36, 255, 0.12); border-radius: 18px; padding: 22px 24px; background: var(--card); box-shadow: 0 12px 30px rgba(2, 6, 23, 0.08); transition: transform 0.2s ease, box-shadow 0.2s ease; } .admin-order-card:hover, .admin-order-card:focus-within { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(2, 6, 23, 0.12); } .admin-order-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .admin-order-card__title { font-size: 20px; font-weight: 800; color: var(--blue-900); } .admin-order-card__meta { margin-top: 4px; font-size: 13px; color: rgba(12, 16, 48, 0.6); } .admin-order-card__status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .admin-order-card__note { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; background: rgba(0, 24, 255, 0.06); color: rgba(0, 10, 80, 0.9); font-size: 13px; } .admin-order-card__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px 24px; margin-top: 18px; } .admin-order-card__section h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--blue-900); } .admin-order-card__value { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--text); } .admin-order-card__meta-row { margin: 4px 0 0; font-size: 13px; color: rgba(12, 16, 48, 0.72); } .admin-order-card__meta-row span { font-weight: 600; color: rgba(0, 18, 150, 0.9); margin-right: 4px; } .admin-order-card__buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .admin-order-card__buttons .btn { background: linear-gradient(135deg, #0ea5e9, #2563eb); border-color: rgba(14, 165, 233, 0.7); color: #f8fafc; box-shadow: 0 14px 32px rgba(37, 99, 235, 0.28); } .admin-order-card__buttons .btn:hover, .admin-order-card__buttons .btn:focus-visible { background: linear-gradient(135deg, #0284c7, #1d4ed8); border-color: rgba(37, 99, 235, 0.85); box-shadow: 0 18px 38px rgba(30, 64, 175, 0.36); } .admin-order-card__buttons .btn.soft { background: rgba(14, 165, 233, 0.12); color: #0f172a; border-color: rgba(14, 165, 233, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 26px rgba(2, 6, 23, 0.18); } .admin-order-card__buttons .btn.soft:hover, .admin-order-card__buttons .btn.soft:focus-visible { background: rgba(37, 99, 235, 0.16); color: #0b1224; border-color: rgba(37, 99, 235, 0.58); } @media (max-width: 960px) { .admin-orders-table-wrapper { display: none; } .admin-log-table-wrapper { display: none; } .admin-order-cards-mobile { display: flex; } } .admin-order-card__details { margin-top: 14px; font-size: 13px; color: rgba(12, 16, 48, 0.7); } .admin-order-card__details summary { cursor: pointer; font-weight: 600; color: var(--blue-900); } .admin-order-card__details ul { margin: 8px 0 0 18px; padding: 0; } .admin-order-card__details li { margin: 4px 0; } .admin-order-product-list { margin: 0; padding-left: 16px; display: grid; gap: 4px; color: rgba(12, 16, 48, 0.72); font-size: 13px; } .admin-orders-print { display: none; margin-top: 18px; } .admin-order-print-actions__badge { background: rgba(0, 18, 150, 0.08); color: var(--blue-900); padding: 8px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; } .admin-orders-print__table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid rgba(0, 36, 255, 0.12); box-shadow: 0 8px 20px rgba(2, 6, 23, 0.08); } .admin-orders-print__table th, .admin-orders-print__table td { padding: 8px 10px; border: 1px solid rgba(0, 36, 255, 0.12); font-size: 12px; vertical-align: top; text-align: left; } .admin-orders-print__table th { background: rgba(0, 24, 255, 0.06); color: var(--blue-900); } .admin-orders-print__meta { margin-top: 2px; color: rgba(12, 16, 48, 0.65); font-size: 11px; } .admin-orders-print__list { margin: 0; padding-left: 18px; } .admin-orders-print__list li { margin: 2px 0; } .admin-orders-print__checkbox { text-align: center; } .admin-orders-print__checkbox input { width: 14px; height: 14px; } .admin-orders-print__cell--compact { font-size: 11px; } @media print { body { background: #fff; } .no-print, .site-header, .site-footer, .admin-orders-table-wrapper, .admin-order-cards-mobile, .admin-order-card, .admin-order-card__buttons, .admin-order-card__actions { display: none !important; } .admin-orders-print { display: block; } } .admin-order-card__link { display: inline-block; margin-top: 6px; font-size: 13px; color: var(--blue-800); text-decoration: none; font-weight: 600; } .admin-order-card__warning { margin: 8px 0 0; font-size: 13px; color: #b3261e; } .admin-order-card__footer { margin-top: 18px; display: flex; justify-content: flex-end; } .admin-order-info { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; } .admin-order-info li { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: rgba(12, 16, 48, 0.74); } .admin-order-info span:first-child { font-weight: 600; color: rgba(0, 24, 180, 0.9); } .admin-order-info strong { color: var(--text); } .admin-order-empty { margin: 18px 0 8px; text-align: center; font-size: 14px; } .admin-log-feedback { margin-top: 12px; } .admin-log-summary { margin: 16px 0; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } .admin-log-table-wrapper { margin-top: 6px; overflow: auto; } .admin-log-table { min-width: 840px; text-align: left; } .admin-log-table th, .admin-log-table td { padding: 14px 16px; } .admin-log-table td { vertical-align: top; } .admin-log-table details { margin-top: 6px; } .admin-log-table pre { background: rgba(0, 0, 0, 0.04); padding: 10px; border-radius: 12px; white-space: pre-wrap; word-break: break-word; margin-top: 6px; } .admin-log-link { cursor: pointer; } .admin-log-meta { margin-top: 4px; } .admin-log-recipient-list { display: flex; flex-wrap: wrap; gap: 6px; } @media (max-width: 900px) { .admin-log-table-wrapper { -webkit-overflow-scrolling: touch; } .admin-log-table { min-width: unset; width: 100%; } .admin-log-table thead { display: none; } .admin-log-table tr { display: grid; gap: 10px; padding: 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); background: #fff; } .admin-log-table td { display: flex; gap: 10px; padding: 4px 0; } .admin-log-table td::before { content: attr(data-label); min-width: 110px; color: var(--muted-text, #5f6b7a); font-weight: 600; font-size: 13px; } .admin-log-table .status-pill { width: fit-content; } .admin-log-table pre { max-width: 100%; } } .feedback-card { width: 100%; position: relative; border-radius: clamp(20px, 5vw, 30px); padding: clamp(26px, 5vw, 42px); border: 1px solid rgba(0, 56, 255, 0.16); box-shadow: 0 26px 60px rgba(0, 32, 160, 0.12); background: linear-gradient(135deg, rgba(244, 246, 255, 0.95), rgba(255, 255, 255, 0.98)); display: grid; gap: clamp(18px, 3vw, 28px); overflow: hidden; } .feedback-shell { position: relative; padding: clamp(18px, 4vw, 36px); max-width: 1180px; margin: 0 auto; } .feedback-shell::before, .feedback-shell::after { content: ""; position: absolute; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(16, 180, 140, 0.08), transparent 60%); filter: blur(4px); z-index: 0; } .feedback-shell::before { inset: auto -40px -40px auto; } .feedback-shell::after { inset: -30px auto auto -60px; } .feedback-shell>* { position: relative; z-index: 1; } .feedback-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 0% 0%, rgba(0, 80, 255, 0.12) 0%, transparent 45%); opacity: 0.9; } .feedback-card>* { position: relative; z-index: 1; } .feedback-card--success { border-color: rgba(10, 180, 140, 0.26); box-shadow: 0 30px 70px rgba(10, 140, 120, 0.2); background: linear-gradient(135deg, rgba(224, 255, 247, 0.98), rgba(240, 245, 255, 0.96)); } .feedback-card--error { border-color: rgba(220, 40, 60, 0.24); box-shadow: 0 30px 70px rgba(220, 36, 70, 0.18); background: linear-gradient(135deg, rgba(255, 240, 244, 0.98), rgba(248, 248, 255, 0.96)); } .feedback-header { display: flex; align-items: center; gap: clamp(16px, 4vw, 28px); flex-wrap: wrap; } .feedback-icon { width: clamp(64px, 8vw, 86px); height: clamp(64px, 8vw, 86px); border-radius: 28px; display: grid; place-items: center; font-size: clamp(26px, 4vw, 34px); font-weight: 700; background: rgba(0, 48, 255, 0.16); color: var(--blue-700); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); } .feedback-card--success .feedback-icon { background: rgba(0, 180, 140, 0.16); color: #02674f; } .feedback-card--error .feedback-icon { background: rgba(255, 80, 96, 0.18); color: #a1123a; } .feedback-body { display: grid; gap: 12px; max-width: 620px; } .feedback-body h1 { font-size: clamp(28px, 6vw, 38px); margin: 0; } .feedback-body p { font-size: clamp(15px, 3.2vw, 18px); margin: 0; color: rgba(12, 26, 84, 0.82); } .feedback-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .feedback-highlight { background: rgba(255, 255, 255, 0.82); border-radius: 16px; padding: 14px 16px; border: 1px solid rgba(0, 48, 255, 0.08); box-shadow: 0 12px 30px rgba(4, 20, 70, 0.08); display: grid; gap: 4px; } .feedback-highlight p { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(12, 26, 84, 0.6); } .feedback-highlight strong { font-size: 20px; color: var(--blue-800); } .feedback-highlight span { font-size: 13px; color: rgba(12, 26, 84, 0.7); } .feedback-highlight[data-tone="primary"] { border-color: rgba(0, 64, 255, 0.2); } .feedback-highlight[data-tone="success"] { border-color: rgba(4, 180, 140, 0.2); } .feedback-highlight[data-tone="accent"] { border-color: rgba(255, 170, 0, 0.22); } @media (min-width: 992px) { .feedback-card { padding: 48px 56px; gap: 28px; } .feedback-header { align-items: center; } .feedback-body h1 { font-size: 40px; } .feedback-highlights { grid-template-columns: repeat(3, minmax(0, 1fr)); } .feedback-actions { justify-content: flex-start; } } @media (max-width: 768px) { .feedback-shell { padding: 18px; } .feedback-card { padding: 22px; border-radius: 18px; gap: 18px; } .feedback-header { align-items: flex-start; flex-direction: column; } .feedback-body { max-width: none; text-align: left; } .feedback-highlights { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .meta-grid { grid-template-columns: 1fr; } .feedback-card .meta-card__header { align-items: flex-start; } } @media (max-width: 540px) { .feedback-card { padding: 18px; } .feedback-icon { width: 64px; height: 64px; } .feedback-highlight strong { font-size: 18px; } } .status-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(0, 40, 255, 0.2); background: rgba(0, 40, 255, 0.12); font-size: 13px; font-weight: 800; letter-spacing: 0.06em; line-height: 1.1; text-transform: uppercase; color: var(--blue-700); white-space: nowrap; } .badge { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; line-height: 1.1; letter-spacing: 0.02em; background: rgba(0, 48, 255, 0.08); color: var(--blue-800); } .badge.pill { border-radius: 999px; padding-inline: 14px; } .badge.success { background: rgba(10, 180, 140, 0.18); color: #035f47; } .badge.muted { background: rgba(15, 23, 42, 0.08); color: rgba(15, 23, 42, 0.72); } .badge.danger { background: rgba(238, 72, 90, 0.16); color: #a01834; } .badge.info { background: rgba(0, 48, 255, 0.12); color: var(--blue-900); } .status-pill[data-tone="success"] { border-color: rgba(4, 180, 140, 0.3); background: rgba(4, 180, 140, 0.16); color: #02674f; } .status-pill[data-tone="warning"] { border-color: rgba(255, 170, 0, 0.38); background: rgba(255, 195, 0, 0.18); color: #8a5800; } .status-pill[data-tone="danger"] { border-color: rgba(238, 72, 90, 0.32); background: rgba(238, 72, 90, 0.16); color: #9b1236; } .status-pill[data-tone="muted"] { border-color: rgba(120, 132, 158, 0.28); background: rgba(120, 132, 158, 0.16); color: #3f4c66; } .status-pill[data-tone="info"] { border-color: rgba(0, 64, 240, 0.28); background: rgba(0, 80, 255, 0.14); color: #0d2ba8; } .order-overview-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 20px 0 10px; } .overview-chip { padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(0, 64, 255, 0.12); background: linear-gradient(120deg, rgba(0, 64, 255, 0.06), rgba(0, 180, 140, 0.06)); box-shadow: 0 14px 28px rgba(4, 22, 80, 0.1); display: grid; gap: 8px; } .overview-chip__label { margin: 0; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(12, 26, 84, 0.65); } .overview-chip__value { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .overview-chip__hint { font-size: 12px; font-weight: 650; color: rgba(12, 26, 84, 0.72); } .overview-chip__amount { font-size: 20px; font-weight: 800; color: var(--blue-800); } .admin-order-overview .overview-chip { border-color: rgba(12, 26, 84, 0.12); background: linear-gradient(120deg, rgba(12, 26, 84, 0.04), rgba(0, 64, 255, 0.04)); box-shadow: 0 10px 24px rgba(4, 20, 70, 0.08); } .meta-grid { display: grid; gap: clamp(16px, 3vw, 22px); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .meta-card { position: relative; border-radius: var(--radius); padding: 2px; background: linear-gradient(135deg, var(--meta-accent-from, rgba(0, 32, 160, 0.18)), var(--meta-accent-to, rgba(0, 24, 120, 0.05))); border: 1px solid rgba(0, 32, 160, 0.16); box-shadow: 0 20px 48px rgba(2, 12, 70, 0.12); --meta-icon-bg: rgba(0, 24, 120, 0.14); --meta-icon-color: var(--blue-700); --meta-eyebrow: rgba(20, 32, 88, 0.65); } .meta-card::after { content: ''; position: absolute; inset: 10% 8% auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent); opacity: 0.7; pointer-events: none; } .meta-card__inner { background: rgba(255, 255, 255, 0.96); border-radius: calc(var(--radius) - 3px); padding: clamp(18px, 3vw, 24px); display: grid; gap: 16px; position: relative; } .meta-card__header { display: flex; align-items: center; gap: 16px; } .meta-card__icon { width: 48px; height: 48px; border-radius: 18px; background: var(--meta-icon-bg); color: var(--meta-icon-color); display: grid; place-items: center; font-size: 24px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 10px 20px rgba(2, 12, 70, 0.12); } .meta-card__titles { display: grid; gap: 4px; } .meta-card__eyebrow { margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--meta-eyebrow); } .meta-card__titles h3 { margin: 0; font-size: 18px; color: var(--blue-700); } .meta-card[data-accent='order'] { --meta-accent-from: rgba(0, 64, 255, 0.28); --meta-accent-to: rgba(0, 64, 255, 0.1); --meta-icon-bg: rgba(0, 64, 255, 0.16); } .meta-card[data-accent='payment'] { --meta-accent-from: rgba(99, 102, 241, 0.28); --meta-accent-to: rgba(99, 102, 241, 0.1); --meta-icon-bg: rgba(99, 102, 241, 0.18); --meta-icon-color: #3730a3; } .meta-card[data-accent='shipping'] { --meta-accent-from: rgba(16, 185, 129, 0.26); --meta-accent-to: rgba(16, 185, 129, 0.08); --meta-icon-bg: rgba(16, 185, 129, 0.18); --meta-icon-color: #036a4a; } .meta-card[data-accent='items'] { --meta-accent-from: rgba(244, 114, 182, 0.26); --meta-accent-to: rgba(244, 114, 182, 0.08); --meta-icon-bg: rgba(244, 114, 182, 0.18); --meta-icon-color: #9d174d; } .meta-card[data-accent='customer'] { --meta-accent-from: rgba(236, 72, 153, 0.24); --meta-accent-to: rgba(236, 72, 153, 0.08); --meta-icon-bg: rgba(236, 72, 153, 0.18); --meta-icon-color: #861349; --meta-eyebrow: rgba(134, 19, 73, 0.7); } .order-items-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .order-items-list li { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; border-bottom: 1px dashed rgba(0, 40, 255, 0.12); padding-bottom: 10px; } .order-items-list li:last-child { border-bottom: none; padding-bottom: 0; } .order-item-main { flex: 1 1 180px; min-width: 0; display: grid; gap: 6px; } .order-item-tags { display: flex; flex-wrap: wrap; gap: 6px; } .order-item-meta { display: flex; gap: 12px; align-items: center; font-weight: 700; color: var(--blue-800); } .order-item-meta span { white-space: nowrap; } .meta-card h3 { margin: 0; color: var(--blue-700); } .meta-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .meta-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .meta-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(20, 32, 88, 0.65); min-width: 120px; } .meta-value { font-weight: 700; color: var(--blue-900); word-break: break-word; } .meta-note { font-size: 12px; color: rgba(20, 32, 88, 0.65); } .muted { color: rgba(20, 32, 88, 0.6); } .pickup-detail { margin-top: 14px; padding: 14px 16px; border-radius: var(--radius); border: 1px dashed rgba(0, 40, 255, 0.24); background: rgba(0, 40, 255, 0.06); display: grid; gap: 10px; } .pickup-detail h4 { margin: 0; font-size: 14px; color: var(--blue-700); } .pickup-hours { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: rgba(20, 32, 88, 0.76); } .definition-list { display: grid; gap: 10px; margin: 0; } .definition-list dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(20, 32, 88, 0.6); } .definition-list dd { margin: 0; font-weight: 700; color: var(--blue-900); } .feedback-actions { display: flex; flex-wrap: wrap; gap: 12px; } .feedback-actions .btn { flex: 0 0 auto; } @media (max-width: 640px) { .meta-row { flex-direction: column; align-items: flex-start; gap: 6px; } .meta-label { min-width: 0; } .feedback-actions { justify-content: center; } } /* --------- Tables --------- */ .table-scroll { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding-bottom: 12px; } .table-scroll::-webkit-scrollbar { height: 8px; } .table-scroll::-webkit-scrollbar-thumb { background: rgba(0, 40, 255, 0.35); border-radius: 999px; } .table { width: 100%; min-width: 640px; border-collapse: collapse; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid rgba(0, 32, 255, 0.12); overflow: hidden; } .table.stackable { min-width: 0; } .table.stackable thead { display: table-header-group; } .table thead { background: linear-gradient(120deg, rgba(0, 30, 180, 0.96), rgba(0, 12, 120, 0.92)); color: #fff; } .table thead th { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; padding: 16px 18px; } .table tbody tr { background: rgba(255, 255, 255, 0.94); transition: background 0.2s ease, box-shadow 0.2s ease; } .table tbody tr+tr { border-top: 1px solid rgba(0, 36, 255, 0.08); } .table tbody td { padding: 18px; vertical-align: top; } .order-product-name { overflow-wrap: normal; word-break: normal; white-space: normal; } .table tbody tr:hover { background: rgba(239, 243, 255, 0.75); } .table tfoot td { padding: 20px 24px; background: rgba(236, 240, 255, 0.6); } .table tfoot tr:first-child td { border-top: 1px solid rgba(0, 40, 255, 0.12); } @media (max-width: 960px) { .table.stackable { min-width: 0; border-radius: var(--radius); } .table.stackable thead { display: none; } .table.stackable tbody { display: grid; gap: 16px; } .table.stackable tbody tr { display: grid; gap: 12px; padding: 16px; border: 1px solid rgba(0, 40, 255, 0.12); border-radius: var(--radius); box-shadow: 0 10px 24px rgba(2, 18, 90, 0.08); } .table.stackable tbody td { padding: 0; display: flex; justify-content: space-between; gap: 12px; align-items: center; } .table.stackable tbody td::before { content: attr(data-label); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .table.stackable tbody td[data-label="Detail"] { justify-content: flex-start; } .table.stackable tbody td[data-label="Detail"]::before { margin-right: 12px; } .table.stackable tbody td .status-pill, .table.stackable tbody td .small { margin-top: 4px; } } .table tfoot td { padding: 20px 24px; background: rgba(236, 240, 255, 0.6); } .table tfoot tr:first-child td { border-top: 1px solid rgba(0, 40, 255, 0.12); } /* --------- Topbar & Navbar --------- */ .site-header { position: sticky; top: 0; z-index: 120; display: block; --topbar-height: 0px; } .site-header.has-topbar { --topbar-height: clamp(36px, 5vw, 48px); } .topbar { background: linear-gradient(90deg, rgba(0, 40, 255, 0.95), rgba(0, 0, 140, 0.9)); color: #fff; text-align: center; padding: 8px 12px; font-weight: 700; letter-spacing: 0.32px; font-size: 14px; position: relative; z-index: 90; min-height: var(--topbar-height); } .navbar { position: sticky; top: var(--topbar-height); z-index: 100; background: rgba(0, 0, 0, 0.9); border-bottom: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(18px); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35); --nav-height: 76px; transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .site-header.no-topbar .navbar { top: 0; } .site-header.is-scrolled .navbar { background: rgba(0, 0, 0, 0.96); border-bottom-color: rgba(255, 255, 255, 0.16); box-shadow: 0 20px 46px rgba(0, 0, 0, 0.45); } .site-header.is-scrolled .topbar { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3); } .navbar .inner { width: var(--container); margin: 0 auto; padding: 14px 20px; min-height: var(--nav-height); display: flex; align-items: center; gap: clamp(16px, 4vw, 48px); flex-wrap: wrap; } .brand { display: inline-flex; align-items: center; gap: var(--logo-gap); min-width: 0; margin-right: auto; } .brand img { height: clamp(52px, 10vw, var(--logo-h)); width: auto; object-fit: contain; image-rendering: auto; filter: drop-shadow(0 8px 20px rgba(0, 12, 160, 0.32)); } .nav-links { display: flex; align-items: center; gap: clamp(12px, 3vw, 24px); font-weight: 700; letter-spacing: 0.02em; margin-left: clamp(20px, 5vw, 80px); transition: opacity 0.24s ease, transform 0.24s ease; flex-wrap: wrap; } .nav-links a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 0; padding: 10px 4px; border-radius: 6px; font-size: 15px; color: var(--blue-300); background: none; border: 0; box-shadow: none; transition: color 0.2s ease; isolation: isolate; } .nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--blue-600), var(--blue-300)); opacity: 0; transform: scaleX(0); transform-origin: center; transition: transform 0.3s ease, opacity 0.3s ease; pointer-events: none; } .nav-links a:hover, .nav-links a:focus-visible { color: var(--blue-100); } .nav-links a:hover::after, .nav-links a:focus-visible::after { opacity: 1; transform: scaleX(1); } .nav-links a:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.35); } .nav-actions { display: flex; align-items: center; gap: 12px; padding-right: clamp(12px, 2.6vw, 28px); min-width: 0; flex-wrap: nowrap; margin-left: clamp(16px, 4vw, 32px); } .nav-icon, .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: var(--blue-100); cursor: pointer; text-decoration: none; transition: transform 0.18s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; position: relative; } .nav-icon:hover, .nav-icon:focus-visible, .nav-toggle:hover, .nav-toggle:focus-visible { background: rgba(255, 255, 255, 0.12); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); } .nav-icon:focus-visible, .nav-toggle:focus-visible { outline: none; border-color: rgba(0, 102, 255, 0.45); box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.3); } .nav-icon svg, .nav-toggle svg { pointer-events: none; } .nav-icon .nav-icon-badge { position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: linear-gradient(135deg, var(--blue-600), var(--blue-400)); color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(0, 28, 160, 0.4); } .nav-icon .nav-icon-badge[hidden] { display: none; } .nav-toggle { display: none; flex-direction: column; gap: 6px; } .nav-toggle span { width: 22px; height: 2px; border-radius: 999px; background: currentColor; transition: transform 0.24s ease, opacity 0.24s ease; } body[data-nav-open] #navToggle { background: rgba(255, 255, 255, 0.16); } body[data-nav-open] #navToggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); } body[data-nav-open] #navToggle span:nth-child(2) { opacity: 0; } body[data-nav-open] #navToggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* --------- Buttons --------- */ .btn, a.btn, button.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--btn-h); padding: 0 var(--btn-px); border-radius: var(--btn-radius); font-weight: 800; font-size: 16px; line-height: 1.1; letter-spacing: 0.01em; cursor: pointer; white-space: nowrap; border: 1px solid rgba(72, 128, 255, 0.6); background: radial-gradient(120% 140% at 50% 0%, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0)), linear-gradient(135deg, var(--cta-from), var(--cta-to)); color: #fff; box-shadow: 0 16px 36px rgba(0, 32, 160, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.26); text-decoration: none; transition: transform 0.12s ease, box-shadow 0.28s ease, background 0.28s ease; position: relative; overflow: hidden; } .btn:hover { transform: translateY(-1px); box-shadow: 0 24px 48px rgba(0, 48, 200, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.32); background: radial-gradient(120% 140% at 50% 0%, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0)), linear-gradient(135deg, var(--cta-hover-from), var(--cta-hover-to)); } .btn:active { transform: translateY(0); box-shadow: 0 14px 32px rgba(0, 32, 160, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.2); background: radial-gradient(120% 140% at 50% 0%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)), linear-gradient(135deg, var(--cta-active-from), var(--cta-active-to)); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 24px 48px rgba(0, 48, 200, 0.5); } .btn.block { width: 100%; } .btn.soft { background: #fff; color: var(--blue-600); border-color: rgba(0, 52, 255, 0.28); box-shadow: 0 6px 18px rgba(2, 6, 23, 0.08); } .btn.soft:hover { background: var(--blue-100); border-color: rgba(0, 68, 255, 0.35); } .btn-link { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; padding: 4px 0; color: var(--blue-600); font-weight: 700; cursor: pointer; text-decoration: underline; font-size: 14px; } .btn-link:hover { color: var(--blue-500); } .btn-link:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; } /* --------- Checkout shipping helpers --------- */ .shipping-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 18px; } .ship-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--card); transition: border-color 0.2s ease, box-shadow 0.2s ease; cursor: pointer; } .ship-card-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 1 1 auto; text-align: left; } .ship-card-title { font-weight: 700; color: inherit; } .ship-card-price { font-weight: 700; font-size: 14px; color: var(--blue-800); } .ship-card-note { font-size: 13px; line-height: 1.35; color: var(--muted); font-weight: 500; } .ship-card:hover, .ship-card:focus-within { border-color: rgba(0, 64, 255, 0.45); box-shadow: 0 0 0 3px rgba(0, 64, 255, 0.12); } .ship-card input[type="radio"] { transform: scale(1.1); } .pickup-actions { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; } .pickup-provider { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .pickup-summary { background: var(--blue-050); border: 1px solid rgba(0, 52, 255, 0.18); padding: 8px 12px; border-radius: var(--radius); color: var(--blue-900); font-weight: 600; margin-top: 6px; } .pickup-summary[hidden] { display: none !important; } /* --------- Modal (PPL picker) --------- */ .modal-overlay { position: fixed; inset: 0; background: rgba(6, 12, 40, 0.6); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 250; } .modal-overlay.hidden { display: none; } body[data-modal-open] { overflow: hidden; } body[data-scroll-lock] { position: fixed; width: 100%; overflow: hidden; } .modal-overlay.ppl-widget-overlay { padding: clamp(6px, 1.6vw, 18px); background: rgba(0, 53, 121, 0.72); overflow: auto; } .modal { width: min(640px, 100%); max-height: calc(100vh - 80px); background: #fff; border-radius: 22px; box-shadow: 0 24px 68px rgba(0, 20, 120, 0.3); display: flex; flex-direction: column; overflow: hidden; } .modal.ppl-widget-modal { width: min(1100px, 100%); } .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid rgba(0, 48, 255, 0.12); } .modal-header h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--blue-900); } .modal-close { border: none; background: rgba(0, 40, 255, 0.08); border-radius: 999px; width: 36px; height: 36px; font-size: 22px; line-height: 1; cursor: pointer; color: var(--blue-800); } .modal-close:hover { background: rgba(0, 40, 255, 0.16); } .modal-body { padding: 20px 24px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; } .modal.ppl-widget-modal .modal-body { padding: 20px 24px 24px; gap: 12px; } .modal-footer { padding: 14px 24px; background: var(--blue-050); border-top: 1px solid rgba(0, 48, 255, 0.12); } .modal-search { display: flex; flex-direction: column; gap: 10px; } .modal-search .search-row { display: flex; gap: 12px; flex-wrap: wrap; } .modal-search input[type="search"] { flex: 1 1 220px; } .modal-search .btn { min-height: 42px; font-size: 15px; padding: 0 18px; } .modal-status { font-size: 14px; color: var(--muted); } .modal-status[hidden] { display: none !important; } .modal-status.error { background: rgba(255, 71, 46, 0.12); border-radius: var(--radius); padding: 10px 12px; color: #a32115; } .ppl-widget-frame { position: relative; display: flex; width: min(92vw, 1200px); height: min(92vh, 880px); max-width: 100%; max-height: 100vh; background: #fff; border: 4px solid #00539f; border-radius: 0; box-shadow: 0 40px 90px rgba(0, 32, 77, 0.35); overflow: hidden; box-sizing: border-box; } .ppl-widget-frame iframe, .ppl-widget-map iframe { width: 100%; height: 100%; border: 0; display: block; } .ppl-widget-map-shell { flex: 1 1 auto; display: flex; flex-direction: column; background: #f2f6fb; border-radius: 0; border: none; box-shadow: none; overflow: hidden; } .ppl-widget-map { flex: 1 1 auto; width: 100%; min-height: 0; height: 100%; background: linear-gradient(180deg, #f2f6fb 0%, #dde8f5 100%); } .ppl-widget-close { position: absolute; top: clamp(10px, 2vw, 22px); right: clamp(10px, 2vw, 22px); width: clamp(40px, 5vw, 56px); height: clamp(40px, 5vw, 56px); border: 2px solid #ffd100; border-radius: 999px; background: rgba(255, 255, 255, 0.98); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; box-shadow: 0 12px 28px rgba(0, 83, 159, 0.2); color: #00539f; font-size: clamp(24px, 4.2vw, 34px); font-weight: 700; line-height: 1; z-index: 5; } .ppl-widget-close::before, .ppl-widget-close::after { content: none; } .ppl-widget-close span { display: inline-block; transform: translateY(-1px); } .ppl-widget-close:hover, .ppl-widget-close:focus-visible { background: #00539f; border-color: #00539f; color: #fff; transform: translateY(-1px); box-shadow: 0 16px 32px rgba(0, 83, 159, 0.25); outline: none; } .btn--small { min-height: 36px; padding: 0 14px; font-size: 14px; } .btn--ghost, .btn.btn--ghost { background: rgba(0, 0, 0, 0.02); border: 1px solid rgba(0, 36, 255, 0.14); color: var(--blue-900); box-shadow: none; } .btn--ghost:hover, .btn--ghost:focus-visible, .btn.btn--ghost:hover, .btn.btn--ghost:focus-visible { background: rgba(0, 40, 255, 0.08); border-color: rgba(0, 24, 180, 0.3); color: var(--blue-800); box-shadow: none; } @media (max-width: 900px) { .ppl-widget-frame { width: min(96vw, 960px); height: min(92vh, 760px); border-width: 3px; border-radius: 0; } .ppl-widget-close { width: clamp(36px, 6vw, 48px); height: clamp(36px, 6vw, 48px); font-size: clamp(22px, 4.4vw, 30px); } } @media (max-width: 640px) { .modal-overlay.ppl-widget-overlay { padding: 0; } .ppl-widget-frame { width: 100vw; height: 100vh; border-width: 0; border-radius: 0; } .ppl-widget-close { top: 16px; right: 16px; width: 44px; height: 44px; font-size: clamp(26px, 7vw, 34px); } } .pickup-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .pickup-item { border: 1px solid rgba(0, 52, 255, 0.14); border-radius: var(--radius); padding: 14px 16px; background: #fff; box-shadow: 0 12px 24px rgba(0, 24, 140, 0.12); display: flex; flex-direction: column; gap: 8px; } .pickup-item-main strong { display: block; font-size: 16px; color: var(--blue-900); } .pickup-item-note { color: var(--blue-700); } .pickup-item-hours { font-style: italic; } .pickup-item-actions { display: flex; justify-content: flex-end; } .pickup-item-actions .btn { min-height: 38px; padding: 0 16px; font-size: 14px; } @media (max-width: 640px) { .modal { width: 100%; max-height: calc(100vh - 40px); border-radius: 18px; } .modal-body { padding: 18px; } .modal-header, .modal-footer { padding-inline: 18px; } .modal-search .search-row { flex-direction: column; align-items: stretch; } .modal-search .btn { width: 100%; } } .form-feedback { margin: 16px 0; padding: 12px 16px; border-radius: var(--radius); font-weight: 600; font-size: 14px; border: 1px solid transparent; } .form-feedback.error { background: rgba(0, 36, 255, 0.12); border-color: rgba(0, 52, 255, 0.28); color: rgba(0, 42, 180, 0.9); } .form-feedback.success { background: rgba(0, 48, 255, 0.15); border-color: rgba(0, 68, 255, 0.32); color: rgba(0, 52, 190, 0.92); } .form-error { color: rgba(0, 52, 200, 0.82); font-size: 13px; margin: 6px 0; } .form-info { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: rgba(10, 180, 140, 0.12); border: 1px solid rgba(10, 180, 140, 0.26); color: #055f48; font-weight: 700; letter-spacing: 0.01em; } /* --------- Forms --------- */ .input, select, textarea { width: 100%; background: #fff; color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; outline: none; transition: border-color 0.15s ease, box-shadow 0.2s ease; } .input:focus, select:focus, textarea:focus { border-color: var(--blue-400); box-shadow: 0 0 0 4px rgba(0, 64, 255, 0.22); } label { display: block; margin: 8px 0 6px; font-size: 14px; color: var(--blue-900); } /* --------- Product cards (listing) --------- */ .product-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 42vw, 260px), 1fr)); } .product-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .product-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0, 28, 120, 0.2); border-color: rgba(0, 52, 255, 0.32); } .product-card .media { position: relative; aspect-ratio: 1/1; background: #fff; display: block; padding: 18px; border-bottom: 1px solid var(--line); } .product-card .body { padding: 14px; display: grid; gap: 10px; } .product-card .title { font-weight: 800; color: var(--text); line-height: 1.2; font-family: var(--font-display); } .product-card .price { font-size: 18px; font-weight: 900; color: var(--blue-900); } .product-card .actions { margin-top: auto; padding: 14px; display: flex; gap: 12px; flex-wrap: wrap; } /* --------- PRODUCT DETAIL --------- */ .product-hero { background: transparent; border: 0; border-radius: 0; } .product-hero .product-wrap { width: 100%; margin: 0 auto; display: flex; justify-content: center; } .product-hero .hero-inner { width: 100%; max-width: var(--container); margin-inline: auto; padding: clamp(16px, 4vw, 34px) 20px; display: grid; grid-template-columns: minmax(320px, 1.25fr) minmax(280px, 1fr); gap: clamp(18px, 3.2vw, 40px); align-items: center; justify-content: center; } .hero-col-copy { display: flex; justify-content: center; align-items: center; } /* Allow children to shrink inside columns */ .product-hero .hero-inner>*, .hero-col-media, .hero-col-copy, .product-figure, .product-info { min-width: 0; } /* Media (left) — transparent, interactive */ .hero-col-media { perspective: 1200px; } .product-figure { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } .product-media-frame { position: relative; } .product-media { width: min(720px, 100%); display: block; margin-inline: auto; filter: drop-shadow(0 30px 40px rgba(2, 6, 23, 0.28)); transform: translateZ(0); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s ease; } .product-media--picture { display: block; } .product-media--picture>img, .product-media-img { display: block; width: 100%; height: auto; } .product-media--image { height: auto; } .product-media--gif, .product-media--animated { background-repeat: no-repeat; background-position: center; background-size: contain; aspect-ratio: var(--media-aspect, 1/1); min-height: clamp(220px, 52vw, 560px); } .product-media--animated { position: relative; display: block; overflow: hidden; } .product-media--animated .product-media-canvas { display: block; width: 100%; height: 100%; object-fit: contain; } .product-media--frames { aspect-ratio: var(--media-aspect, 1 / 1); min-height: clamp(220px, 52vw, 560px); object-fit: contain; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-drag: none; background: transparent; } .product-gallery { position: relative; } .product-gallery__slides { position: relative; overflow: hidden; } .product-gallery__slide { display: none; transition: opacity 0.3s ease; } .product-gallery__slide.is-active { display: block; } .product-gallery__media { width: 100%; } .product-gallery__thumbs { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; } .product-gallery__thumb { width: 72px; height: 72px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); display: grid; place-items: center; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } .product-gallery__thumb img { max-width: 100%; max-height: 100%; object-fit: contain; } .product-gallery__thumb.is-active { border-color: var(--text-strong); box-shadow: 0 0 0 2px color-mix(in srgb, var(--text-strong) 20%, transparent); transform: translateY(-1px); } .product-gallery__thumb:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; } .product-gallery__controls { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 12px; } .product-gallery__arrow { background: var(--bg-2); border: 1px solid var(--line); color: var(--text-strong); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; cursor: pointer; transition: transform 0.15s ease, background-color 0.15s ease; } .product-gallery__arrow:hover { transform: scale(1.03); background: var(--bg-1); } .product-gallery__dots { display: flex; gap: 8px; } .product-gallery__dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-2); cursor: pointer; transition: transform 0.15s ease, background-color 0.15s ease; } .product-gallery__dot.is-active { background: var(--text-strong); transform: scale(1.08); } .frame-viewer { position: relative; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-tap-highlight-color: transparent; } .frame-viewer.is-dragging .product-media--frames { cursor: grabbing; } .frame-viewer-hint { text-align: center; color: #e5e7eb; font-size: 0.95rem; margin: 8px 0 0; letter-spacing: 0.01em; } .frame-viewer-controls { margin-top: 10px; padding: 12px; border-radius: 14px; background: rgba(0, 0, 0, 0.45); color: #e5e7eb; display: grid; gap: 8px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28); backdrop-filter: blur(6px); } .frame-viewer-controls__label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.82); } .frame-viewer-controls__row { display: flex; align-items: center; gap: 12px; } .frame-viewer-controls input[type='range'] { flex: 1; accent-color: var(--blue-500); } .frame-viewer-controls__value { min-width: 110px; text-align: right; font-weight: 700; color: #f8fafc; letter-spacing: 0.01em; } .frame-viewer-controls__hint { margin: 0; color: rgba(229, 231, 235, 0.86); font-size: 0.9rem; line-height: 1.4; } @media (max-width: 720px) { .frame-viewer-controls { padding: 10px; gap: 6px; } .frame-viewer-controls__row { gap: 8px; flex-wrap: wrap; } .frame-viewer-controls__value { min-width: 96px; text-align: left; font-size: 13px; } .frame-viewer-controls__hint { font-size: 13px; } } @media (hover: hover) { .product-figure:hover .product-media { transform: translateY(-6px) rotateX(2deg) rotateY(-2deg) scale(1.02); filter: drop-shadow(0 36px 60px rgba(2, 6, 23, 0.33)); } } /* Info card (right) — neon border + shadow */ .product-info { background: #fff; border-radius: var(--radius); padding: clamp(18px, 3vw, 28px); border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, rgba(0, 0, 255, 0.42), rgba(0, 64, 255, 0.68) 60%, rgba(128, 146, 255, 0.92)) border-box; box-shadow: 0 24px 70px rgba(0, 12, 160, 0.2); display: grid; gap: 12px; justify-items: center; text-align: center; } .product-info .kicker { display: inline-flex; align-items: center; gap: 8px; justify-self: center; padding: 8px 18px; border-radius: 999px; border: 1px solid #2eff2f; background: #2eff2f; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: 0 12px 30px rgba(8, 120, 70, 0.22); } .product-title-group { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 100%; } .hero-title { color: var(--blue-600); text-wrap: balance; } .product-title-group .hero-title { margin: 0; text-align: center; width: 100%; } .hero-subtitle { font-size: clamp(16px, 2.2vw, 20px); font-weight: 600; color: var(--blue-700); margin: 0; text-align: center; width: 100%; } .hero-sub { text-align: center; } .product-description { margin: clamp(12px, 2.4vw, 18px) 0; display: grid; gap: 12px; justify-items: center; } .product-description__toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(12, 24, 60, 0.18); background: rgba(255, 255, 255, 0.85); color: var(--blue-900); font-weight: 600; font-size: 15px; cursor: pointer; transition: background 0.24s ease, color 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease; justify-self: center; white-space: nowrap; } .product-description__toggle:hover, .product-description__toggle:focus-visible { background: rgba(0, 40, 255, 0.1); border-color: rgba(0, 40, 255, 0.35); color: var(--blue-800); box-shadow: 0 12px 24px rgba(12, 40, 120, 0.12); } .product-description__toggle:focus-visible { outline: 2px solid rgba(0, 40, 255, 0.4); outline-offset: 2px; } .product-description__icon { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.25s ease; } [data-product-description].is-expanded .product-description__icon { transform: rotate(-135deg); } .product-description__content { display: block; } .product-description__db-block { display: grid; gap: 6px; justify-items: center; } .product-description__note { margin: 0; font-weight: 700; color: var(--blue-800); } .product-description__figure { margin: 14px 0 0; display: flex; justify-content: center; width: 100%; } .product-description__figure img { width: min(100%, 720px); height: auto; border-radius: 16px; box-shadow: 0 14px 30px rgba(8, 24, 88, 0.16); background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.24), transparent 40%), linear-gradient(120deg, rgba(255, 255, 255, 0.28), rgba(0, 72, 255, 0.08)); } [data-product-description].is-collapsible .product-description__content { overflow: hidden; max-height: 0; opacity: 0; visibility: hidden; transition: max-height 0.35s ease, opacity 0.25s ease; } [data-product-description].is-collapsible.is-expanded .product-description__content { opacity: 1; visibility: visible; } [data-product-description].is-collapsible:not(.is-expanded) .product-description__content { pointer-events: none; } [data-product-description].is-collapsible.is-expanded .product-description__content { pointer-events: auto; } @media (max-width: 720px) { .product-description { justify-items: center; } [data-product-description].is-collapsible .product-description__content { width: 100%; padding-inline: 6px; } } .product-info .price { font-size: clamp(22px, 2.6vw, 30px); font-weight: 900; color: var(--blue-900); } .hero-meta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin: clamp(10px, 2.4vw, 16px) 0; } .rating-pill, .urgency-badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; line-height: 1.2; box-shadow: 0 12px 28px rgba(0, 40, 255, 0.16); } .rating-pill { background: rgba(0, 32, 255, 0.12); color: var(--blue-700); border: 1px solid rgba(0, 40, 255, 0.28); } .urgency-badge { background: linear-gradient(135deg, rgba(255, 138, 0, 0.18), rgba(255, 64, 0, 0.26)); color: #a83200; border: 1px solid rgba(255, 90, 0, 0.36); } .hero-bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; justify-items: center; } .hero-bullets li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 40, 255, 0.14); font-weight: 600; color: var(--muted); text-align: center; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12); } .hero-reassurance { margin-top: clamp(18px, 3vw, 24px); display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; font-weight: 600; color: var(--blue-700); } .hero-reassurance span { padding: 8px 14px; border-radius: 999px; background: rgba(0, 24, 120, 0.08); border: 1px solid rgba(0, 24, 120, 0.16); } .price .small s { color: var(--blue-300); } /* Deal + stock */ .deal-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 4px; flex-wrap: wrap; text-align: center; } .save-badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; padding: 6px 10px; border-radius: 999px; color: var(--blue-900); background: linear-gradient(135deg, rgba(0, 40, 255, 0.16), rgba(0, 40, 255, 0.28)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 28px rgba(0, 32, 255, 0.18); } .stockline { margin: 12px 0 8px; text-align: center; } .stock { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(0, 40, 255, 0.28); background: rgba(0, 30, 255, 0.12); font-size: 14px; font-weight: 700; color: var(--blue-600); transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .stock [data-stock-message] { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: rgba(22, 30, 78, 0.75); } .stock.ok { border-color: rgba(0, 80, 255, 0.4); background: rgba(0, 48, 255, 0.18); color: var(--blue-700); } .stock.ok [data-stock-message] { color: rgba(0, 68, 210, 0.86); } .stock.out { border-color: rgba(0, 24, 120, 0.32); background: rgba(0, 18, 80, 0.16); color: rgba(0, 26, 104, 0.76); } .stock.out [data-stock-message] { color: rgba(0, 20, 90, 0.7); } /* USPs — nice pills */ .usp-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 12px 0 0; } .usp-list li { font-size: 13px; font-weight: 700; color: var(--blue-900); padding: 8px 12px; border-radius: 999px; background: var(--blue-050); border: 1px solid rgba(0, 40, 255, 0.16); } /* Size picker */ .size-picker { margin: 18px 0 10px; padding: 0; border: none; } .size-picker legend { font-weight: 700; font-size: 14px; margin-bottom: 10px; color: var(--muted); } .size-options { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .size-input { position: absolute; opacity: 0; pointer-events: none; } .size-option { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 58px; padding: 10px 16px; border-radius: var(--btn-radius); border: 1px solid rgba(0, 40, 255, 0.2); background: var(--blue-050); color: var(--blue-600); font-weight: 700; gap: 4px; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .size-option span { font-size: 15px; } .size-option small { font-size: 11px; color: var(--muted); font-weight: 600; } .size-option:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 28, 120, 0.22); } .size-input:checked+.size-option { border-color: var(--blue-500); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue-500) 18%, transparent); } .size-input:focus-visible+.size-option { outline: 3px solid var(--blue-400); outline-offset: 2px; } .size-input:disabled+.size-option { opacity: 0.45; cursor: not-allowed; transform: none; background: rgba(0, 20, 80, 0.08); border-color: rgba(0, 28, 120, 0.18); color: rgba(0, 32, 90, 0.52); } /* Quantity + actions */ .qty-row { display: grid; gap: 12px; justify-items: center; } .qty-control { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; background: var(--blue-050); padding: 6px; border-radius: 999px; border: 1px solid rgba(0, 40, 255, 0.18); } .qty-control .btn.secondary { min-width: 44px; height: 44px; border-radius: 999px; } .qty-input { width: 120px; max-width: 140px; text-align: center; height: 44px; border-radius: var(--radius); } /* Actions */ .purchase-actions { display: flex; align-items: stretch; justify-content: center; gap: 10px; flex-wrap: wrap; } .purchase-actions .btn { flex: 1 1 auto; min-height: 48px; border-radius: 999px; position: relative; overflow: hidden; transition: transform 0.08s ease, box-shadow 0.2s ease, filter 0.2s ease; } /* primary CTA attention on load (two gentle pulses) */ .product-info .purchase-actions .btn:not(.secondary) { animation: ctaPulse 3.5s ease 0.7s 2 both; } @keyframes ctaPulse { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); transform: translateY(0); } 40% { box-shadow: 0 12px 28px var(--cta-glow); transform: translateY(-1px); } 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); transform: translateY(0); } } .purchase-actions .btn:hover { transform: translateY(-1px); box-shadow: 0 16px 40px var(--cta-glow); } .purchase-actions .btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(130deg, transparent 20%, rgba(255, 255, 255, 0.35) 40%, transparent 60%); transform: translateX(-120%); transition: transform 0.9s ease; pointer-events: none; } .purchase-actions .btn:hover::after { transform: translateX(120%); } .purchase-actions .btn.secondary { background: linear-gradient(140deg, rgba(255, 255, 255, 0.98), rgba(226, 233, 255, 0.96)); color: var(--blue-600); border-color: rgba(0, 72, 255, 0.3); box-shadow: 0 16px 34px rgba(15, 23, 42, 0.16); } .purchase-actions .btn.secondary:hover { background: linear-gradient(140deg, rgba(255, 255, 255, 0.99), rgba(210, 222, 255, 0.99)); } .section-heading { text-align: center; max-width: 720px; margin: 0 auto clamp(24px, 4vw, 32px); display: grid; gap: 10px; } .section-kicker { font-size: 13px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(0, 40, 255, 0.8); margin: 0; } .section-title { margin: 0; font-size: clamp(22px, 4vw, 34px); color: var(--blue-700); } .section-subtitle { margin: 0; color: rgba(22, 30, 78, 0.72); font-weight: 500; } .gift-counter { padding: clamp(28px, 5vw, 52px) clamp(14px, 5vw, 0); } .gift-counter__inner { width: 100%; padding: clamp(20px, 4vw, 28px); border-radius: 20px; background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08), transparent 45%), linear-gradient(135deg, #000c8c, #020f4d); color: #fff; display: grid; gap: 16px; box-shadow: 0 16px 36px rgba(0, 16, 120, 0.24); position: relative; overflow: hidden; } .gift-counter__layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: center; gap: clamp(12px, 3vw, 28px); } .gift-counter__copy h2 { margin: 0 0 4px; font-size: clamp(22px, 4vw, 30px); } .gift-counter__copy p { margin: 0; color: rgba(255, 255, 255, 0.82); } .gift-counter__bonus { color: #fff; font-weight: 600; margin-top: 6px; } .gift-counter__kicker { margin: 0; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; color: rgba(255, 255, 255, 0.7); } .gift-counter__media { width: 100%; justify-self: center; display: flex; align-items: center; justify-content: center; } .gift-counter__media img { width: min(100%, 520px); height: auto; display: block; border-radius: 18px; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.25); background: linear-gradient(120deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); } @media (max-width: 640px) { .gift-counter__layout { grid-template-columns: 1fr; text-align: center; } .gift-counter__copy { text-align: center; } .gift-counter__media { width: min(320px, 100%); margin: 0 auto; } .gift-counter__media img { width: 100%; max-width: 320px; } } .gift-counter__progress { position: relative; width: 100%; height: 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; } .gift-counter__progress-bar { position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, #35f0ff, #5effa3); box-shadow: 0 0 12px rgba(94, 255, 163, 0.6); } .gift-counter__labels { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; color: rgba(255, 255, 255, 0.84); font-weight: 600; } .stats-section, .testimonial-section, .highlight-section, .creator-section, .faq-section, .cta-banner { padding: clamp(32px, 6vw, 72px) 0; } .stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(16px, 3vw, 24px); } .stat-card { background: rgba(255, 255, 255, 0.92); border-radius: var(--radius); border: 1px solid rgba(0, 40, 255, 0.12); padding: clamp(18px, 3vw, 26px); box-shadow: 0 20px 40px rgba(0, 32, 140, 0.16); display: grid; gap: 8px; text-align: center; } .stat-value { font-size: clamp(28px, 4vw, 40px); font-weight: 900; color: var(--blue-700); } .stat-label { font-size: 15px; font-weight: 700; color: rgba(10, 15, 60, 0.82); } .stat-description { margin: 0; font-size: 14px; color: rgba(10, 15, 60, 0.7); } .testimonial-grid { display: grid; gap: clamp(16px, 3vw, 24px); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .testimonial-card { background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(0, 40, 255, 0.14); border-radius: var(--radius); padding: clamp(18px, 3vw, 26px); box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18); display: grid; gap: 12px; } .testimonial-header { display: flex; align-items: center; gap: 12px; } .testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #0012a6, #4c63ff); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 18px; } .testimonial-name { margin: 0; font-weight: 800; color: var(--blue-700); } .testimonial-role { margin: 0; font-size: 13px; color: rgba(15, 24, 64, 0.64); } .testimonial-quote { margin: 0; font-size: 15px; font-weight: 600; color: rgba(22, 30, 78, 0.86); } .testimonial-rating { color: #ffb300; font-size: 16px; letter-spacing: 2px; } .highlight-inner { display: grid; gap: clamp(20px, 4vw, 32px); align-items: center; } .highlight-copy { text-align: center; display: grid; gap: 10px; } .highlight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(16px, 3vw, 24px); } .highlight-card { padding: clamp(18px, 3vw, 26px); border-radius: var(--radius); border: 1px solid rgba(0, 40, 255, 0.12); background: rgba(255, 255, 255, 0.92); box-shadow: 0 18px 38px rgba(0, 24, 120, 0.16); } .highlight-card h3 { margin: 0 0 8px; color: var(--blue-700); } .highlight-card p { margin: 0; color: rgba(22, 30, 78, 0.74); } .creator-card { display: grid; gap: clamp(20px, 4vw, 36px); background: rgba(255, 255, 255, 0); border-radius: var(--radius); border: 1px solid rgba(0, 40, 255, 0.12); box-shadow: 0 22px 44px rgba(0, 32, 140, 0.18); padding: clamp(20px, 4vw, 32px); justify-items: center; } .creator-media { justify-self: stretch; width: 100%; max-width: none; position: relative; } .creator-media__trigger { position: relative; display: block; width: 100%; border: none; padding: 0; background: none; cursor: zoom-in; border-radius: calc(var(--radius) - 4px); overflow: hidden; margin-inline: auto; } .creator-media__trigger:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.85); outline-offset: 3px; } .creator-media picture { display: block; width: 100%; } .creator-media__trigger picture { pointer-events: none; } .creator-media img { display: block; width: 100%; height: auto; border-radius: calc(var(--radius) - 4px); box-shadow: 0 18px 32px rgba(0, 28, 120, 0.18); background-color: #57575700; } .creator-media__hint { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(15, 23, 42, 0.68); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; pointer-events: none; box-shadow: 0 12px 28px rgba(4, 12, 48, 0.45); } .creator-media__hint svg { width: 16px; height: 16px; display: block; } .creator-media__hint-text { display: inline-block; } @media (min-width: 1024px) { .creator-media { overflow: visible; } .creator-media__trigger { width: min(150%, 960px); max-width: none; left: 50%; transform: translateX(-50%); } } .creator-lightbox { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 6vw, 48px); background: rgba(6, 12, 38, 0.85); backdrop-filter: blur(6px); overflow-y: auto; } .creator-lightbox[hidden] { display: none; } .creator-lightbox__backdrop { position: absolute; inset: 0; background: rgba(6, 12, 38, 0.65); } .creator-lightbox__content { position: relative; z-index: 1; max-width: min(960px, 92vw); width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: clamp(12px, 2vw, 20px); } .creator-lightbox__picture { display: block; width: 100%; } .creator-lightbox__picture img { width: 100%; height: auto; display: block; border-radius: clamp(12px, 2vw, 18px); box-shadow: 0 24px 48px rgba(2, 8, 34, 0.65); } .creator-lightbox__close { align-self: flex-end; width: 40px; height: 40px; border-radius: 50%; border: none; display: inline-flex; align-items: center; justify-content: center; background: rgba(10, 18, 58, 0.9); color: #fff; font-size: 20px; cursor: pointer; box-shadow: 0 14px 32px rgba(2, 6, 26, 0.55); margin-bottom: clamp(4px, 1.5vw, 12px); } .creator-lightbox__close--mobile { display: none; } .creator-lightbox__close:hover { background: rgba(14, 24, 70, 0.95); } .creator-lightbox__close:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.9); outline-offset: 3px; } body.has-lightbox-open { overflow: hidden; } body.has-lightbox-open .site-header { visibility: hidden; pointer-events: none; } @media (max-width: 640px) { .creator-lightbox { align-items: flex-start; padding: 24px 16px 32px; } .creator-lightbox__content { max-width: 100%; } .creator-lightbox__picture img { border-radius: 18px; } .creator-lightbox__close { width: 44px; height: 44px; margin-left: auto; margin-bottom: 16px; font-size: 22px; } .creator-lightbox__close--mobile { display: inline-flex; width: 100%; height: auto; margin: 20px 0 0; padding: 12px 18px; border-radius: 999px; font-size: 15px; font-weight: 600; letter-spacing: 0.02em; gap: 8px; } } .creator-copy { display: grid; gap: 12px; text-align: center; } .creator-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .creator-link { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(0, 40, 255, 0.18); font-weight: 600; color: var(--blue-700); background: rgba(0, 32, 255, 0.08); transition: transform 0.18s ease, box-shadow 0.2s ease; } .creator-link:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(0, 32, 140, 0.18); } .faq-list { display: grid; gap: clamp(12px, 2.4vw, 18px); max-width: 760px; margin: 0 auto; } .faq-item { border-radius: var(--radius); border: 1px solid rgba(0, 40, 255, 0.14); background: rgba(255, 255, 255, 0.92); box-shadow: 0 16px 34px rgba(0, 24, 120, 0.16); padding: clamp(14px, 2.6vw, 18px) clamp(16px, 3vw, 24px); } .faq-item summary { cursor: pointer; font-weight: 700; font-size: 15px; color: var(--blue-700); display: flex; align-items: center; justify-content: space-between; gap: 16px; } .faq-item summary::marker { display: none; content: ""; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-weight: 800; color: rgba(0, 40, 255, 0.7); transition: transform 0.2s ease; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item p { margin: 12px 0 0; color: rgba(22, 30, 78, 0.75); font-size: 14px; } .cta-banner-inner { background: linear-gradient(135deg, rgba(0, 28, 255, 0.92), rgba(0, 12, 160, 0.88)); border-radius: var(--radius); padding: clamp(24px, 5vw, 36px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: clamp(16px, 4vw, 24px); box-shadow: 0 22px 52px rgba(0, 12, 120, 0.35); color: #fff; } .cta-banner-copy { display: grid; gap: 8px; max-width: 540px; } .cta-banner .section-kicker, .cta-banner .section-title, .cta-banner .section-subtitle { color: inherit; } .cta-banner .btn { background: #fff; color: var(--blue-700); font-weight: 800; box-shadow: 0 18px 32px rgba(0, 0, 0, 0.22); } .cta-banner .btn:hover { transform: translateY(-2px); } /* Disabled states */ button[disabled], .btn[disabled] { opacity: 0.65; cursor: not-allowed; box-shadow: none; } .qty-control button[disabled] { filter: grayscale(1); } input[type="number"].input::-webkit-outer-spin-button, input[type="number"].input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"].input { -moz-appearance: textfield; appearance: textfield; } /* USP cards */ .container.narrow { max-width: min(760px, 100%); } .usp-section { padding: clamp(32px, 6vw, 64px) 0; } .usp-grid { display: grid; gap: clamp(16px, 3vw, 28px); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .usp-card { display: flex; gap: 16px; align-items: flex-start; padding: clamp(18px, 2.8vw, 26px); background: rgb(255, 255, 255); border-radius: var(--radius); border: 1px solid rgba(0, 40, 255, 0.14); box-shadow: 0 16px 40px rgba(0, 24, 140, 0.16); backdrop-filter: blur(8px); } @media (max-width: 1024px) { .hero-bullets { justify-items: stretch; } .hero-bullets li { width: 100%; } .cta-banner-inner { text-align: center; justify-content: center; } .cta-banner .btn { width: 100%; justify-content: center; } } @media (max-width: 720px) { .hero-meta { flex-direction: column; } .hero-reassurance { gap: 8px; } .stat-strip, .testimonial-grid, .highlight-grid { grid-template-columns: 1fr; } .creator-card { grid-template-columns: 1fr; } .creator-links { justify-content: center; } .section-title { font-size: clamp(22px, 7vw, 30px); } } .usp-section, .footer { content-visibility: auto; } .usp-section { contain-intrinsic-size: 420px; } .footer { contain-intrinsic-size: 120px; } .usp-icon { width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; background: linear-gradient(135deg, var(--blue-500), var(--blue-400)); color: #fff; flex-shrink: 0; } .usp-body h3 { margin: 0 0 6px; font-size: 18px; color: var(--blue-900); } .usp-body p { margin: 0; font-size: 14px; } /* Info sections */ .info-section { padding: clamp(36px, 7vw, 72px) 0; background: rgba(244, 246, 255, 0.92); } .info-section:nth-of-type(even) { background: rgba(236, 240, 255, 0.9); } .info-card { background: #fff; border-radius: var(--radius); border: 1px solid rgba(0, 40, 255, 0.14); box-shadow: 0 18px 44px rgba(0, 20, 160, 0.14); padding: clamp(24px, 4vw, 36px); display: grid; gap: 14px; } .info-card h2 { margin-bottom: 4px; font-size: clamp(24px, 3vw, 30px); } .info-list, .info-steps { margin: 0; padding-left: 20px; color: var(--muted); line-height: 1.6; } .info-list li, .info-steps li { margin-bottom: 6px; font-weight: 600; color: var(--blue-900); } .info-note { font-size: 14px; color: var(--muted); } .info-card .btn.secondary { align-self: flex-start; } .info-actions { display: flex; flex-wrap: wrap; gap: 12px; } .input.error, select.error, textarea.error { border-color: rgba(0, 64, 255, 0.55); box-shadow: 0 0 0 4px rgba(0, 64, 255, 0.22); } /* Standalone pages */ .page-hero { padding: clamp(56px, 9vw, 104px) 0; background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); color: #fff; } .page-hero .container { display: grid; gap: 16px; } .page-kicker { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.75); } .page-hero h1 { color: #fff; font-size: clamp(32px, 5vw, 44px); } .page-sub { max-width: 640px; color: rgba(255, 255, 255, 0.92); margin-bottom: 4px; } .page-meta { display: flex; flex-wrap: wrap; gap: 14px 24px; font-weight: 600; color: rgba(255, 255, 255, 0.85); } .page-meta a { color: #fff; text-decoration: underline; } .page-actions { display: flex; flex-wrap: wrap; gap: 12px; } .page-hero a:hover { color: rgba(226, 232, 255, 0.86); } .page-section { padding: clamp(40px, 7vw, 80px) 0; background: rgba(255, 255, 255, 0.9); } .terms-section { background: #fff; border-radius: 12px; border: 1px solid rgba(12, 20, 60, 0.12); box-shadow: none; } .returns-section { background: rgba(255, 255, 255, 0.92); border-radius: var(--radius); } .terms-layout, .returns-layout { display: grid; gap: clamp(24px, 4vw, 48px); } @media (min-width: 960px) { .terms-layout, .returns-layout { grid-template-columns: minmax(0, 2.6fr) minmax(0, 1.4fr); } } .terms-main, .returns-main { display: grid; gap: clamp(18px, 2.4vw, 28px); } .terms-block { background: #fff; border-radius: 12px; border: 1px solid rgba(12, 24, 60, 0.16); box-shadow: none; padding: clamp(22px, 3.2vw, 32px); display: grid; gap: 12px; } .terms-block h2 { margin-bottom: 4px; font-size: clamp(22px, 3vw, 28px); color: #0e1b3c; text-transform: none; } .terms-block p { margin: 0; color: #1f2548; } .terms-list { margin: 0; padding-left: 20px; color: #1f2548; line-height: 1.6; } .terms-list li { margin-bottom: 6px; font-weight: 500; } .terms-side, .returns-side { display: grid; gap: 16px; align-content: start; } .terms-box, .support-box { background: #fff; border-radius: 12px; border: 1px solid rgba(12, 24, 60, 0.14); box-shadow: none; padding: clamp(22px, 3.2vw, 30px); display: grid; gap: 12px; } .terms-quick-list { margin: 0; padding-left: 18px; color: #1f2548; line-height: 1.6; } .terms-quick-list li { margin-bottom: 6px; } .support-box .info-steps { margin: 0; padding-left: 20px; } .support-note { font-size: 14px; color: var(--muted); } .returns-form { background: #fff; border-radius: var(--radius); border: 1px solid rgba(0, 40, 255, 0.14); box-shadow: 0 18px 44px rgba(0, 20, 160, 0.14); padding: clamp(24px, 3.4vw, 36px); display: grid; gap: 18px; } .size-stock-group { border: 1px solid rgba(0, 40, 255, 0.14); border-radius: var(--radius); padding: clamp(20px, 3vw, 30px); background: #fff; box-shadow: 0 18px 44px rgba(0, 20, 160, 0.14); margin: 24px 0; } .size-stock-group legend { font-weight: 800; font-size: 16px; padding: 0 8px; color: var(--blue-900); } .size-stock-group .small { margin-top: 0; } .size-stock-grid { display: grid; gap: 14px; margin: 14px 0; } .size-stock-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .size-stock-row label { margin-top: 0; } .variant-group { border: 1px solid rgba(0, 40, 255, 0.14); border-radius: var(--radius); padding: clamp(20px, 3vw, 30px); background: #fff; box-shadow: 0 18px 44px rgba(0, 20, 160, 0.12); margin: 24px 0; display: grid; gap: 14px; } .variant-group legend { font-weight: 800; font-size: 16px; padding: 0 8px; color: var(--blue-900); } .variant-group .small { margin: 0; color: var(--muted); } .variant-grid { display: grid; gap: 14px; } .variant-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; } .variant-row label { margin-top: 0; } .variant-row .small { margin-top: 6px; } .form-row, .returns-field-grid { display: grid; gap: 14px; } @media (min-width: 720px) { .form-row, .returns-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .form-hint { font-size: 13px; color: var(--muted); margin: -6px 0 4px; } .form-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .terms-hero { background: #f5f6fa; border-radius: 16px; border: 1px solid rgba(12, 20, 60, 0.12); color: var(--blue-900); box-shadow: none; } .page-hero.terms-hero .page-kicker { color: rgba(31, 37, 72, 0.7); } .page-hero.terms-hero h1 { color: var(--blue-900); } .page-hero.terms-hero .page-sub { color: #1f2548; } .page-hero.terms-hero .page-meta { color: rgba(31, 37, 72, 0.8); } .page-hero.terms-hero .page-meta span, .page-hero.terms-hero .page-meta a { color: rgba(31, 37, 72, 0.8); } .page-hero.terms-hero .page-actions .btn.secondary { border-color: rgba(12, 24, 60, 0.24); color: var(--blue-900); background: rgba(255, 255, 255, 0.9); } .page-hero.terms-hero .page-actions .btn.secondary:hover { background: #eef1f9; } .returns-hero { background: linear-gradient(135deg, var(--blue-600), var(--blue-800)); border-radius: var(--radius); } .returns-hero .page-meta span, .returns-hero .page-meta a { color: rgba(226, 232, 255, 0.9); } .cart-line { display: flex; flex-direction: column; gap: 14px; } .cart-media { position: relative; display: flex; justify-content: center; } .cart-media-asset { width: 120px; height: 120px; border-radius: 16px; box-shadow: 0 12px 30px rgba(10, 22, 70, 0.18); } .cart-media-asset--image { object-fit: cover; width: 100%; height: 100%; } .cart-media-asset--gif { background-repeat: no-repeat; background-position: center; background-size: cover; } .admin-preview-media { width: 100%; min-height: 220px; border: 1px solid var(--line); border-radius: 12px; background-repeat: no-repeat; background-position: center; background-size: contain; } .shipping-option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 18px; } .shipping-option-card { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 16px; border: 1px solid rgba(0, 32, 120, 0.18); background: rgba(0, 36, 255, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6); } .shipping-option-card__header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .shipping-option-card__name { font-weight: 600; color: var(--blue-900); } .shipping-option-card__total { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; } .shipping-option-card__total strong { font-size: 1.05rem; color: var(--blue-800); } .shipping-option-card__total-note { font-size: 0.75rem; color: rgba(10, 20, 60, 0.8); } .shipping-option-card__body { display: flex; flex-direction: column; gap: 10px; } .shipping-option-card__body .input { background: #fff; } .shipping-note-group__hint { margin-top: 16px; } .shipping-note-group__footer { margin-top: 20px; padding: 18px; border-radius: 14px; border: 1px dashed rgba(0, 32, 120, 0.28); background: rgba(0, 36, 255, 0.06); display: flex; flex-direction: column; gap: 10px; } .shipping-note-group__footer-label { font-weight: 600; color: var(--blue-900); } .shipping-note-group__footer-control { display: flex; flex-direction: column; gap: 6px; } .cart-head-media, .cart-media-cell { width: 140px; } .cart-media-cell, .cart-product-cell, .cart-variant-cell { vertical-align: top; } .cart-variant-cell { width: 160px; } .cart-tag--muted { background: rgba(24, 36, 78, 0.1); color: rgba(24, 36, 78, 0.7); border: 1px dashed rgba(24, 36, 78, 0.25); } .cart-line-body { display: flex; flex-direction: column; gap: 10px; } .cart-line-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .cart-line-title { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; min-width: 0; } .cart-remove { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 12px; border: 1px solid rgba(0, 40, 255, 0.2); background: rgba(0, 32, 120, 0.08); color: var(--blue-700); cursor: pointer; transition: transform 0.18s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .cart-remove:hover { background: rgba(0, 40, 255, 0.12); border-color: rgba(0, 56, 255, 0.32); box-shadow: 0 8px 18px rgba(0, 24, 120, 0.18); transform: translateY(-1px); } .cart-remove:active { transform: translateY(0); } .cart-remove:focus-visible { outline: none; border-color: rgba(0, 80, 255, 0.46); box-shadow: 0 0 0 4px rgba(0, 80, 255, 0.32); } .cart-remove svg { pointer-events: none; } .cart-line-pricing { display: none; gap: 20px; align-items: flex-end; justify-content: space-between; } .cart-line-price .price-stack { align-items: flex-start; } .cart-line-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(24, 36, 78, 0.7); margin-bottom: 6px; } .cart-qty { display: flex; flex-direction: column; gap: 10px; } .cart-line-label--qty { display: none; } .cart-line-total { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .cart-line-total-amount { font-size: 22px; font-weight: 800; color: var(--blue-900); letter-spacing: -0.01em; } .cart-qty-cell { width: 160px; } .cart-price-cell, .cart-total-cell { width: 160px; } .cart-line-header strong { font-size: 16px; color: var(--blue-900); } .cart-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--blue-050); color: var(--blue-600); letter-spacing: 0.02em; text-transform: uppercase; } .cart-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .cart-note[hidden], [data-cart-warning][hidden] { display: none !important; } .stock-pill { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(0, 60, 255, 0.12); color: var(--blue-700); letter-spacing: 0.04em; text-transform: uppercase; } .stock-pill.is-missing { background: rgba(0, 34, 120, 0.12); color: rgba(0, 42, 120, 0.78); } .cart-note { margin: 0; padding: 12px 14px; border-radius: var(--radius); background: rgba(0, 48, 255, 0.08); color: var(--blue-900); font-size: 13px; font-weight: 600; } .price-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .price-stack .price-current, .price-stack strong { font-size: 16px; color: var(--blue-900); } .price-stack .price-old { font-size: 12px; text-decoration: line-through; color: rgba(10, 22, 80, 0.58); } .price-stack.total strong { font-size: 18px; } .cart-summary { display: flex; flex-direction: column; gap: 10px; align-items: stretch; } .cart-summary-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .cart-summary-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .cart-summary-value { font-size: 16px; font-weight: 700; color: var(--blue-900); text-align: right; } .cart-summary-note { margin: 0; font-size: 13px; color: var(--muted); } .cart-summary-divider { width: 100%; height: 1px; background: rgba(0, 36, 255, 0.16); border-radius: 999px; } .cart-summary-total .cart-summary-value { font-size: 20px; font-weight: 800; } .cart-alert { margin: 0 0 16px; padding: 12px 16px; border-radius: var(--radius); border: 1px solid rgba(0, 48, 255, 0.22); background: rgba(0, 56, 255, 0.12); color: var(--blue-900); font-weight: 600; font-size: 14px; } .cart-alert.danger { border-color: rgba(239, 68, 68, 0.45); background: rgba(248, 113, 113, 0.18); color: #991b1b; } .cart-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } .cart-actions .btn { flex: 1 1 220px; } .checkout-review { display: grid; gap: 24px; margin-top: 18px; } .summary-card { border: 1px solid rgba(0, 36, 255, 0.12); border-radius: var(--radius); background: rgba(0, 48, 255, 0.04); padding: 20px; display: flex; flex-direction: column; gap: 18px; } .summary-card h3 { margin-bottom: 4px; } .summary-block { display: flex; flex-direction: column; gap: 6px; } .summary-block h4 { margin: 0; font-size: 14px; color: var(--blue-600); text-transform: uppercase; letter-spacing: 0.08em; } .summary-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; color: var(--blue-900); font-weight: 600; } .summary-card--order { gap: 20px; } .order-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .order-item-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .order-item-info { display: flex; flex-direction: column; gap: 6px; } .order-item-title { display: flex; align-items: baseline; gap: 10px; font-size: 16px; color: var(--blue-900); } .order-item-qty { font-size: 14px; color: var(--muted); font-weight: 600; } .order-item-meta { display: flex; flex-wrap: wrap; gap: 6px; } .order-item-price { font-weight: 700; color: var(--blue-900); white-space: nowrap; } .order-breakdown { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid rgba(0, 36, 255, 0.12); padding-top: 16px; } .order-breakdown-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .order-breakdown-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .order-breakdown-value { font-size: 16px; font-weight: 700; color: var(--blue-900); } .order-breakdown-total .order-breakdown-label { color: var(--blue-600); } .order-breakdown-grand { font-size: 22px; font-weight: 800; } .payment-box { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid rgba(0, 36, 255, 0.12); padding-top: 16px; } .payment-form .btn { width: 100%; } @media (min-width: 900px) { .checkout-review { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .cart-empty { margin-top: 24px; display: flex; flex-direction: column; gap: 14px; } tr[data-cart-loading] { opacity: 0.6; transition: opacity 0.2s ease; } tr[data-cart-loading] .qty-control button, tr[data-cart-loading] .qty-control input, tr[data-cart-loading] .cart-remove { pointer-events: none; } .qty-control--compact { padding: 4px 6px; gap: 6px; } .qty-control--compact .btn { min-width: 40px; height: 40px; font-size: 20px; } .qty-control--compact .qty-input { width: 90px; height: 40px; } @media (min-width: 960px) { .cart-media-asset { width: 150px; height: 150px; } } @media (max-width: 720px) { .table-scroll { padding-bottom: 0; overflow: visible; } .table.stackable { border: none; background: transparent; box-shadow: none; display: block; } .table.stackable thead { display: none; } .table.stackable tbody { display: grid; gap: 18px; } .table.stackable tbody tr { display: block; padding: 18px; border: 1px solid rgba(0, 40, 255, 0.14); border-radius: var(--radius); box-shadow: var(--shadow); background: rgba(255, 255, 255, 0.96); } .table.stackable tbody tr+tr { border-top: none; } .table.stackable tbody td { display: block; padding: 0; } .table.stackable tbody tr td+td { margin-top: 16px; } .table.stackable tbody tr td::before { display: none; } .table.stackable tfoot { display: block; margin-top: 12px; } .table.stackable tfoot td { padding: 18px; border-top: none; border-radius: var(--radius); } .checkout-review { gap: 16px; } .summary-card { padding: 16px; } .order-item-row { flex-direction: column; align-items: flex-start; gap: 10px; } .order-item-price { align-self: flex-end; } .cart-qty-cell { width: auto; } .cart-price-cell, .cart-total-cell { display: none; } .cart-line { flex-direction: column; gap: 16px; } .cart-media-cell, .cart-product-cell, .cart-variant-cell { width: auto; } .cart-media { justify-content: center; } .cart-media-asset { width: min(220px, 100%); height: auto; } .cart-line-label--qty { display: block; margin-bottom: 6px; } .price-stack, .price-stack.total { align-items: flex-start; } .qty-control { width: 100%; } .cart-summary { flex-direction: column; align-items: flex-start; gap: 6px; } .cart-actions { flex-direction: column; align-items: center; } .cart-actions .btn { width: auto; min-width: min(240px, 100%); align-self: center; } .page-hero .container { text-align: center; display: grid; justify-items: center; gap: 14px; } .page-meta { justify-content: center; text-align: center; } .page-actions { justify-content: center; } .usp-grid { justify-items: center; } .usp-card { flex-direction: column; align-items: center; text-align: center; } .usp-body { text-align: center; } .terms-layout, .returns-layout { justify-items: center; } .terms-main, .returns-main, .terms-side, .returns-side { width: min(100%, 520px); } .terms-side, .returns-side { justify-items: center; text-align: center; } .terms-block, .terms-box, .support-box, .returns-form { width: 100%; } .terms-list, .terms-quick-list, .info-steps { text-align: left; } .returns-form .form-actions { justify-content: center; } } /* --------- Inline info banners --------- */ .info-banner { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(0, 25, 136, 0.16); background: linear-gradient(135deg, rgba(76, 99, 255, 0.1), rgba(181, 192, 255, 0.22)); color: #0b1461; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); } .info-banner[data-tone="muted"] { background: rgba(12, 24, 64, 0.06); border-color: rgba(12, 24, 64, 0.12); color: #111a4f; box-shadow: none; } .info-banner__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 14px; background: rgba(0, 36, 255, 0.16); color: #00136c; font-size: 20px; line-height: 1; } .info-banner[data-tone="muted"] .info-banner__icon { background: rgba(12, 24, 64, 0.12); color: #15235a; } .info-banner__body { display: flex; flex-direction: column; gap: 4px; color: inherit; } .info-banner__title { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; } .info-banner p { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(11, 20, 97, 0.88); } .info-banner[data-tone="muted"] p { color: rgba(21, 35, 90, 0.85); } .info-banner a { color: inherit; text-decoration: underline; font-weight: 700; } .info-banner a:hover, .info-banner a:focus-visible { text-decoration-thickness: 3px; } @media (max-width: 640px) { .info-banner { flex-direction: column; align-items: stretch; padding: 14px 16px; } .info-banner__icon { width: 36px; height: 36px; } } /* --------- Footer documents --------- */ .footer-doc-link { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); transition: transform 180ms ease, background 180ms ease, border-color 180ms ease; } .footer-doc-link:hover, .footer-doc-link:focus-visible { transform: translateY(-2px); background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); } .footer-doc-link__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(0, 0, 0, 0.24); color: #ffffff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); } .footer-doc-link__body { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .footer-doc-link__title { font-size: 15px; font-weight: 700; letter-spacing: 0.01em; } .footer-doc-link__meta { font-size: 12px; font-weight: 600; opacity: 0.7; letter-spacing: 0.04em; text-transform: uppercase; } /* --------- Document pages --------- */ .doc-hero { background: #f5f6fa; border-radius: 16px; border: 1px solid rgba(12, 20, 60, 0.12); color: var(--blue-900); box-shadow: none; position: relative; overflow: hidden; } .page-hero.doc-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at top right, rgba(0, 68, 255, 0.16), transparent 60%); } .page-hero.doc-hero .container { position: relative; z-index: 1; } .page-hero.doc-hero .page-kicker { color: rgba(31, 37, 72, 0.7); } .page-hero.doc-hero h1 { color: var(--blue-900); } .page-hero.doc-hero .page-sub { color: #1f2548; } .page-hero.doc-hero .page-actions .btn.secondary { border-color: rgba(12, 24, 60, 0.24); color: var(--blue-900); background: rgba(255, 255, 255, 0.9); } .page-hero.doc-hero .page-actions .btn.secondary:hover { background: #eef1f9; } .page-hero.doc-hero a { color: var(--blue-900); } .page-hero.doc-hero a:hover { color: var(--blue-800); } .doc-section { padding-top: 48px; padding-bottom: 72px; } .doc-section .container { width: min(100%, var(--container)); } .doc-viewer { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: clamp(20px, 4vw, 32px); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06); display: flex; flex-direction: column; gap: clamp(16px, 3vw, 24px); } .doc-viewer__header { display: flex; gap: 16px; align-items: flex-start; } .doc-viewer__icon { font-size: 28px; line-height: 1; } .doc-viewer__frame { width: 100%; min-height: 520px; border: 1px solid var(--line); border-radius: 16px; background: #ffffff; } .doc-viewer__download a { color: var(--blue-700); font-weight: 600; } @media (max-width: 720px) { .doc-viewer__frame { min-height: 420px; } } /* --------- Footer --------- */ .footer { border-top: 1px solid rgba(255, 255, 255, 0.18); padding: 36px 20px 48px; color: rgba(255, 255, 255, 0.88); background: transparent; border-radius: 0; margin-top: 50px; text-align: left; } .footer .inner { width: min(1100px, 100%); margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 32px; } .footer .small { color: inherit; opacity: 0.9; } .footer-columns { display: grid; gap: 24px; } .footer-block { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; text-align: left; } .footer-block--contact { gap: 16px; } .footer-title { margin: 0; font-size: 20px; letter-spacing: 0.08em; text-transform: uppercase; color: #ffffff; } .footer-text { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.76); max-width: 320px; } .footer a { color: rgba(255, 255, 255, 0.92); font-weight: 600; display: inline-flex; align-items: center; gap: 10px; } .footer a:hover { color: #ffffff; } .footer-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; } .footer-socials { display: flex; flex-wrap: wrap; gap: 16px; } .footer-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .footer-nav li { margin: 0; } .footer-legal { padding-top: 16px; margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.22); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .footer-partners { font-size: 13px; opacity: 0.85; } @media (max-width: 767px) { .footer { text-align: center; } .footer .inner { align-items: center; } .footer-columns { justify-items: center; } .footer-block { align-items: center; text-align: center; } .footer-text { max-width: 100%; } .footer a { justify-content: center; } .footer-legal { align-items: center; text-align: center; } .footer-partners { text-align: center; } .footer-socials { justify-content: center; } } @media (min-width: 768px) { .footer-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-legal { flex-direction: row; align-items: center; justify-content: space-between; } } /* --------- Utilities --------- */ .small { font-size: 13px; color: var(--muted); } .center { text-align: center; } .right { text-align: right; } .mt { margin-top: 18px; } .mb { margin-bottom: 18px; } /* --------- User dropdown (dark) --------- */ .userbox { position: relative; } .usermenu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(0, 40, 255, 0.22); background: linear-gradient(150deg, rgba(255, 255, 255, 0.12), rgba(0, 32, 255, 0.18)); color: #fff; box-shadow: 0 6px 16px rgba(0, 20, 100, 0.18); cursor: pointer; transition: transform 0.08s ease, box-shadow 0.2s ease, background 0.2s ease; } .usermenu-toggle:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 24, 140, 0.22); } .usermenu-toggle:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(0, 64, 255, 0.25); } .usermenu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; background: #0b0c0f; color: #fff; border: 4px solid rgb(7, 30, 202); border-radius: var(--radius); box-shadow: 0 18px 38px rgba(0, 12, 160, 0.45); padding: 12px; transform: translateY(-4px); opacity: 0; pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease; z-index: 40; } .userbox[data-open]>.usermenu { opacity: 1; pointer-events: auto; transform: translateY(0); } .userbox[data-open]>.usermenu::before { content: ""; position: absolute; right: 18px; top: -8px; width: 14px; height: 14px; transform: rotate(45deg); background: linear-gradient(165deg, rgba(0, 8, 90, 0.96), rgba(0, 22, 150, 0.9)); border-left: 1px solid rgba(255, 255, 255, 0.12); border-top: 1px solid rgba(255, 255, 255, 0.12); } .usermenu-header { font-family: var(--font-display); font-weight: 800; color: #fff; margin-bottom: 4px; line-height: 1.2; } .usermenu-meta { font-size: 13px; color: rgba(226, 232, 255, 0.72); margin-bottom: 10px; } .menu-links { display: grid; gap: 8px; } .menu-links a { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--btn-h); padding: 0 var(--btn-px); border-radius: var(--btn-radius); font-weight: 800; font-size: 16px; line-height: 1; border: 1px solid var(--blue-500); background: linear-gradient(180deg, var(--cta-from), var(--cta-to)); color: #fff !important; text-decoration: none; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: transform 0.08s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity 0.18s ease; } .menu-links a:hover { transform: translateY(-1px); box-shadow: 0 12px 28px var(--cta-glow), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .menu-links a.danger { border-color: rgba(0, 68, 255, 0.4); background: linear-gradient(180deg, var(--blue-600), var(--blue-800)); } /* --------- Responsive --------- */ @media (max-width: 1024px) { .navbar .inner { gap: 16px; } .product-hero .hero-inner { grid-template-columns: 1fr; justify-items: center; } } @media (max-width: 860px) { .navbar .inner { flex-wrap: nowrap; justify-content: space-between; gap: 14px; } .nav-links { position: fixed; top: calc(var(--nav-height) + 16px); right: clamp(16px, 6vw, 24px); left: clamp(16px, 6vw, 24px); flex-direction: column; align-items: stretch; justify-content: center; gap: 18px; padding: clamp(24px, 7vw, 32px); background: rgba(0, 0, 0, 0.92); border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 32px 72px rgba(0, 0, 0, 0.55); margin-left: 0; opacity: 0; visibility: hidden; transform: translateY(-12px); pointer-events: none; z-index: 120; } .nav-links a { width: 100%; text-align: center; font-size: 16px; padding: 14px clamp(16px, 6vw, 22px); } body[data-nav-open] .nav-links { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .nav-actions { justify-content: flex-end; padding-right: max(12px, env(safe-area-inset-right, 0px)); gap: 10px; } .nav-toggle { display: inline-flex; } .product-hero .hero-inner { grid-template-columns: 1fr; justify-items: center; gap: 22px; } .product-media { margin-inline: auto; } .product-info { padding: 22px; text-align: center; justify-items: center; } .size-options { justify-content: center; } .qty-row { justify-items: center; } .purchase-actions { justify-content: center; } .hero-title, .hero-sub, .price, .deal-row, .stockline { text-align: center; } .product-title-group { align-items: center; } .product-title-group .hero-title, .product-title-group .hero-subtitle { text-align: center; } .usp-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .nav-actions { gap: 10px; } .product-hero .product-wrap { width: 100vw; margin-inline: calc((100vw - 100%) / -2); } .product-hero .hero-inner { gap: 14px; padding-inline: clamp(12px, 4vw, 18px); } .product-media { width: 100%; } .product-info { display: flex; flex-direction: column; align-items: center; } .product-info .hero-cta { order: 5; width: 100%; } .product-info .product-description { order: 6; width: 100%; } .purchase-actions { flex-direction: column; } .purchase-actions .btn { width: 100%; } .usp-card { align-items: center; } } /* Reduce motion for accessibility */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } [data-animate] { opacity: 1 !important; transform: none !important; } }