shop.tonybtw.com

https://git.tonybtw.com/shop.tonybtw.com.git git://git.tonybtw.com/shop.tonybtw.com.git

9,801 bytes raw

@font-face {
    font-family: 'Iosevka Nerd';
    src: url('/static/fonts/IosevkaNerdFontMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Iosevka Nerd';
    src: url('/static/fonts/IosevkaNerdFont-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrains Mono Nerd';
    src: url('/static/fonts/JetBrainsMonoNerdFontMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrains Mono Nerd';
    src: url('/static/fonts/JetBrainsMonoNerdFontMono-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

:root {
    --bg: #0a0a0a;
    --bg-secondary: #111111;
    --bg-tertiary: #1a1a1a;
    --text: #ffffff;
    --text-muted: #888888;
    --accent: #3b82f6;
    --accent-hover: #60a5fa;
    --border: #222222;
    --success: #10b981;
    --error: #ef4444;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'JetBrains Mono Nerd', 'Iosevka Nerd', monospace;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-size: 15px;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--accent-hover);
}

header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    padding: 1.25rem 2rem;
    backdrop-filter: blur(10px);
}

header nav {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
}

.logo:hover {
    color: var(--accent);
}

.cart-link {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.cart-link:hover {
    border-color: var(--accent);
    background: var(--bg-tertiary);
}

main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    flex: 1;
    width: 100%;
}

h1 {
    margin-bottom: 2rem;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

h2 {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
}

.product-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.product-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
}

.product-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--bg-tertiary);
}

.product-card h2 {
    font-size: 1.125rem;
    padding: 1.25rem 1.25rem 0.5rem;
    color: var(--text);
}

.product-card p {
    padding: 0 1.25rem 1.25rem;
    color: var(--accent);
    font-weight: 600;
    font-size: 1.125rem;
}

.product-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    max-width: 1200px;
}

@media (max-width: 768px) {
    .product-detail {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.product-gallery {
    width: 100%;
}

.gallery-main {
    width: 100%;
    border-radius: 16px;
    background: var(--bg-secondary);
    aspect-ratio: 1;
    object-fit: cover;
}

.gallery-thumbs {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.gallery-thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid var(--border);
    transition: border-color 0.2s;
    background: var(--bg-secondary);
}

.gallery-thumb:hover {
    border-color: var(--accent);
}

.gallery-thumb.active {
    border-color: var(--accent);
}

.product-info {
    display: flex;
    flex-direction: column;
}

.product-info h1 {
    margin-bottom: 1rem;
}

.product-price {
    font-size: 2rem;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.product-description {
    color: var(--text-muted);
    margin-bottom: 2rem;
    line-height: 1.7;
}

form label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

select, input[type="number"] {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 1rem;
    margin-bottom: 1.5rem;
    transition: border-color 0.2s;
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

select:focus, input[type="number"]:focus {
    outline: none;
    border-color: var(--accent);
}

.quantity-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.qty-btn {
    width: 40px;
    height: 40px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-btn:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: white;
}

.qty-display {
    width: 80px;
    text-align: center;
    padding: 0.75rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 1rem;
    margin: 0;
}

.qty-input {
    width: 80px;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.95rem;
    -moz-appearance: textfield;
}

.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.btn-primary {
    background: var(--accent);
    color: white;
    border: none;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
}

.btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.btn-secondary {
    display: inline-block;
    padding: 0.875rem 1.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-weight: 500;
    transition: all 0.2s;
}

.btn-secondary:hover {
    border-color: var(--accent);
    background: var(--bg-tertiary);
}

.btn-remove {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    transition: all 0.2s;
}

.btn-remove:hover {
    border-color: var(--error);
    color: var(--error);
    background: rgba(239, 68, 68, 0.1);
}

.cart-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
    background: var(--bg-secondary);
    border-radius: 12px;
    overflow: hidden;
}

.cart-table th,
.cart-table td {
    padding: 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.cart-table thead {
    background: var(--bg-tertiary);
}

.cart-table th {
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cart-table tbody tr:last-child td {
    border-bottom: none;
}

.cart-table tfoot td {
    border-top: 2px solid var(--border);
    font-size: 1.125rem;
    padding: 1.5rem 1.25rem;
}

.cart-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    vertical-align: middle;
    margin-right: 1rem;
    background: var(--bg-tertiary);
}

.cart-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.empty-cart {
    color: var(--text-muted);
    text-align: center;
    padding: 4rem;
    font-size: 1.125rem;
}

.checkout-summary {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.checkout-summary h2 {
    margin-bottom: 1.5rem;
}

.success-message, .error-message {
    text-align: center;
    padding: 4rem 2rem;
    max-width: 600px;
    margin: 0 auto;
}

.success-message h1 {
    color: var(--success);
    margin-bottom: 1rem;
}

.error-message h1 {
    color: var(--error);
    margin-bottom: 1rem;
}

.success-message p, .error-message p {
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    line-height: 1.7;
}

.success-message .btn-primary, .error-message .btn-primary {
    margin-top: 2rem;
    max-width: 300px;
}

footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    padding: 2rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    main {
        padding: 2rem 1.5rem;
    }

    h1 {
        font-size: 1.75rem;
    }

    .cart-table {
        font-size: 0.875rem;
    }

    .cart-table th,
    .cart-table td {
        padding: 0.875rem;
    }

    .cart-thumb {
        width: 50px;
        height: 50px;
    }
}

1	`@font-face {`
2	`font-family: 'Iosevka Nerd';`
3	`src: url('/static/fonts/IosevkaNerdFontMono-Regular.ttf') format('truetype');`
4	`font-weight: 400;`
5	`font-style: normal;`
6	`}`
7
8	`@font-face {`
9	`font-family: 'Iosevka Nerd';`
10	`src: url('/static/fonts/IosevkaNerdFont-Bold.ttf') format('truetype');`
11	`font-weight: 700;`
12	`font-style: normal;`
13	`}`
14
15	`@font-face {`
16	`font-family: 'JetBrains Mono Nerd';`
17	`src: url('/static/fonts/JetBrainsMonoNerdFontMono-Regular.ttf') format('truetype');`
18	`font-weight: 400;`
19	`font-style: normal;`
20	`}`
21
22	`@font-face {`
23	`font-family: 'JetBrains Mono Nerd';`
24	`src: url('/static/fonts/JetBrainsMonoNerdFontMono-Bold.ttf') format('truetype');`
25	`font-weight: 700;`
26	`font-style: normal;`
27	`}`
28
29	`:root {`
30	`--bg: #0a0a0a;`
31	`--bg-secondary: #111111;`
32	`--bg-tertiary: #1a1a1a;`
33	`--text: #ffffff;`
34	`--text-muted: #888888;`
35	`--accent: #3b82f6;`
36	`--accent-hover: #60a5fa;`
37	`--border: #222222;`
38	`--success: #10b981;`
39	`--error: #ef4444;`
40	`}`
41
42	`* {`
43	`margin: 0;`
44	`padding: 0;`
45	`box-sizing: border-box;`
46	`}`
47
48	`body {`
49	`font-family: 'JetBrains Mono Nerd', 'Iosevka Nerd', monospace;`
50	`background: var(--bg);`
51	`color: var(--text);`
52	`line-height: 1.6;`
53	`min-height: 100vh;`
54	`display: flex;`
55	`flex-direction: column;`
56	`font-size: 15px;`
57	`}`
58
59	`a {`
60	`color: var(--accent);`
61	`text-decoration: none;`
62	`transition: color 0.2s;`
63	`}`
64
65	`a:hover {`
66	`color: var(--accent-hover);`
67	`}`
68
69	`header {`
70	`background: var(--bg-secondary);`
71	`border-bottom: 1px solid var(--border);`
72	`padding: 1.25rem 2rem;`
73	`backdrop-filter: blur(10px);`
74	`}`
75
76	`header nav {`
77	`max-width: 1200px;`
78	`margin: 0 auto;`
79	`display: flex;`
80	`justify-content: space-between;`
81	`align-items: center;`
82	`}`
83
84	`.logo {`
85	`font-size: 1.125rem;`
86	`font-weight: 600;`
87	`color: var(--text);`
88	`letter-spacing: -0.02em;`
89	`}`
90
91	`.logo:hover {`
92	`color: var(--accent);`
93	`}`
94
95	`.cart-link {`
96	`padding: 0.5rem 1rem;`
97	`border: 1px solid var(--border);`
98	`border-radius: 8px;`
99	`font-size: 0.9rem;`
100	`transition: all 0.2s;`
101	`}`
102
103	`.cart-link:hover {`
104	`border-color: var(--accent);`
105	`background: var(--bg-tertiary);`
106	`}`
107
108	`main {`
109	`max-width: 1200px;`
110	`margin: 0 auto;`
111	`padding: 3rem 1.5rem;`
112	`flex: 1;`
113	`width: 100%;`
114	`}`
115
116	`h1 {`
117	`margin-bottom: 2rem;`
118	`font-size: 2rem;`
119	`font-weight: 700;`
120	`letter-spacing: -0.03em;`
121	`}`
122
123	`h2 {`
124	`font-size: 1.25rem;`
125	`font-weight: 600;`
126	`letter-spacing: -0.02em;`
127	`}`
128
129	`.product-grid {`
130	`display: grid;`
131	`grid-template-columns: repeat(3, 1fr);`
132	`gap: 1.5rem;`
133	`}`
134
135	`@media (max-width: 1024px) {`
136	`.product-grid {`
137	`grid-template-columns: repeat(2, 1fr);`
138	`}`
139	`}`
140
141	`@media (max-width: 640px) {`
142	`.product-grid {`
143	`grid-template-columns: 1fr;`
144	`}`
145	`}`
146
147	`.product-card {`
148	`background: var(--bg-secondary);`
149	`border: 1px solid var(--border);`
150	`border-radius: 12px;`
151	`overflow: hidden;`
152	`transition: all 0.3s ease;`
153	`cursor: pointer;`
154	`}`
155
156	`.product-card:hover {`
157	`transform: translateY(-4px);`
158	`border-color: var(--accent);`
159	`box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);`
160	`}`
161
162	`.product-card img {`
163	`width: 100%;`
164	`aspect-ratio: 1;`
165	`object-fit: cover;`
166	`background: var(--bg-tertiary);`
167	`}`
168
169	`.product-card h2 {`
170	`font-size: 1.125rem;`
171	`padding: 1.25rem 1.25rem 0.5rem;`
172	`color: var(--text);`
173	`}`
174
175	`.product-card p {`
176	`padding: 0 1.25rem 1.25rem;`
177	`color: var(--accent);`
178	`font-weight: 600;`
179	`font-size: 1.125rem;`
180	`}`
181
182	`.product-detail {`
183	`display: grid;`
184	`grid-template-columns: 1fr 1fr;`
185	`gap: 4rem;`
186	`max-width: 1200px;`
187	`}`
188
189	`@media (max-width: 768px) {`
190	`.product-detail {`
191	`grid-template-columns: 1fr;`
192	`gap: 2rem;`
193	`}`
194	`}`
195
196	`.product-gallery {`
197	`width: 100%;`
198	`}`
199
200	`.gallery-main {`
201	`width: 100%;`
202	`border-radius: 16px;`
203	`background: var(--bg-secondary);`
204	`aspect-ratio: 1;`
205	`object-fit: cover;`
206	`}`
207
208	`.gallery-thumbs {`
209	`display: flex;`
210	`gap: 0.75rem;`
211	`margin-top: 1rem;`
212	`}`
213
214	`.gallery-thumb {`
215	`width: 80px;`
216	`height: 80px;`
217	`object-fit: cover;`
218	`border-radius: 8px;`
219	`cursor: pointer;`
220	`border: 2px solid var(--border);`
221	`transition: border-color 0.2s;`
222	`background: var(--bg-secondary);`
223	`}`
224
225	`.gallery-thumb:hover {`
226	`border-color: var(--accent);`
227	`}`
228
229	`.gallery-thumb.active {`
230	`border-color: var(--accent);`
231	`}`
232
233	`.product-info {`
234	`display: flex;`
235	`flex-direction: column;`
236	`}`
237
238	`.product-info h1 {`
239	`margin-bottom: 1rem;`
240	`}`
241
242	`.product-price {`
243	`font-size: 2rem;`
244	`color: var(--accent);`
245	`font-weight: 700;`
246	`margin-bottom: 1.5rem;`
247	`}`
248
249	`.product-description {`
250	`color: var(--text-muted);`
251	`margin-bottom: 2rem;`
252	`line-height: 1.7;`
253	`}`
254
255	`form label {`
256	`display: block;`
257	`margin-bottom: 0.75rem;`
258	`font-weight: 600;`
259	`font-size: 0.9rem;`
260	`text-transform: uppercase;`
261	`letter-spacing: 0.05em;`
262	`color: var(--text-muted);`
263	`}`
264
265	`select, input[type="number"] {`
266	`width: 100%;`
267	`padding: 0.875rem 1rem;`
268	`background: var(--bg-tertiary);`
269	`border: 1px solid var(--border);`
270	`border-radius: 8px;`
271	`color: var(--text);`
272	`font-size: 1rem;`
273	`margin-bottom: 1.5rem;`
274	`transition: border-color 0.2s;`
275	`-moz-appearance: textfield;`
276	`}`
277
278	`input[type="number"]::-webkit-outer-spin-button,`
279	`input[type="number"]::-webkit-inner-spin-button {`
280	`-webkit-appearance: none;`
281	`margin: 0;`
282	`}`
283
284	`select:focus, input[type="number"]:focus {`
285	`outline: none;`
286	`border-color: var(--accent);`
287	`}`
288
289	`.quantity-control {`
290	`display: flex;`
291	`align-items: center;`
292	`gap: 0.5rem;`
293	`margin-bottom: 1.5rem;`
294	`}`
295
296	`.qty-btn {`
297	`width: 40px;`
298	`height: 40px;`
299	`background: var(--bg-tertiary);`
300	`border: 1px solid var(--border);`
301	`border-radius: 6px;`
302	`color: var(--text);`
303	`font-size: 1.25rem;`
304	`font-weight: 600;`
305	`cursor: pointer;`
306	`transition: all 0.2s;`
307	`display: flex;`
308	`align-items: center;`
309	`justify-content: center;`
310	`}`
311
312	`.qty-btn:hover {`
313	`border-color: var(--accent);`
314	`background: var(--accent);`
315	`color: white;`
316	`}`
317
318	`.qty-display {`
319	`width: 80px;`
320	`text-align: center;`
321	`padding: 0.75rem;`
322	`background: var(--bg-tertiary);`
323	`border: 1px solid var(--border);`
324	`border-radius: 6px;`
325	`color: var(--text);`
326	`font-size: 1rem;`
327	`margin: 0;`
328	`}`
329
330	`.qty-input {`
331	`width: 80px;`
332	`padding: 0.5rem;`
333	`background: var(--bg-tertiary);`
334	`border: 1px solid var(--border);`
335	`border-radius: 6px;`
336	`color: var(--text);`
337	`font-size: 0.95rem;`
338	`-moz-appearance: textfield;`
339	`}`
340
341	`.qty-input::-webkit-outer-spin-button,`
342	`.qty-input::-webkit-inner-spin-button {`
343	`-webkit-appearance: none;`
344	`margin: 0;`
345	`}`
346
347	`.btn-primary {`
348	`background: var(--accent);`
349	`color: white;`
350	`border: none;`
351	`padding: 1rem 2rem;`
352	`font-size: 1rem;`
353	`font-weight: 600;`
354	`border-radius: 8px;`
355	`cursor: pointer;`
356	`transition: all 0.2s;`
357	`width: 100%;`
358	`}`
359
360	`.btn-primary:hover {`
361	`background: var(--accent-hover);`
362	`transform: translateY(-1px);`
363	`}`
364
365	`.btn-secondary {`
366	`display: inline-block;`
367	`padding: 0.875rem 1.75rem;`
368	`border: 1px solid var(--border);`
369	`border-radius: 8px;`
370	`color: var(--text);`
371	`font-weight: 500;`
372	`transition: all 0.2s;`
373	`}`
374
375	`.btn-secondary:hover {`
376	`border-color: var(--accent);`
377	`background: var(--bg-tertiary);`
378	`}`
379
380	`.btn-remove {`
381	`background: transparent;`
382	`border: 1px solid var(--border);`
383	`color: var(--text-muted);`
384	`width: 32px;`
385	`height: 32px;`
386	`border-radius: 6px;`
387	`cursor: pointer;`
388	`font-size: 1.25rem;`
389	`line-height: 1;`
390	`transition: all 0.2s;`
391	`}`
392
393	`.btn-remove:hover {`
394	`border-color: var(--error);`
395	`color: var(--error);`
396	`background: rgba(239, 68, 68, 0.1);`
397	`}`
398
399	`.cart-table {`
400	`width: 100%;`
401	`border-collapse: collapse;`
402	`margin-bottom: 2rem;`
403	`background: var(--bg-secondary);`
404	`border-radius: 12px;`
405	`overflow: hidden;`
406	`}`
407
408	`.cart-table th,`
409	`.cart-table td {`
410	`padding: 1.25rem;`
411	`text-align: left;`
412	`border-bottom: 1px solid var(--border);`
413	`}`
414
415	`.cart-table thead {`
416	`background: var(--bg-tertiary);`
417	`}`
418
419	`.cart-table th {`
420	`color: var(--text-muted);`
421	`font-weight: 600;`
422	`font-size: 0.875rem;`
423	`text-transform: uppercase;`
424	`letter-spacing: 0.05em;`
425	`}`
426
427	`.cart-table tbody tr:last-child td {`
428	`border-bottom: none;`
429	`}`
430
431	`.cart-table tfoot td {`
432	`border-top: 2px solid var(--border);`
433	`font-size: 1.125rem;`
434	`padding: 1.5rem 1.25rem;`
435	`}`
436
437	`.cart-thumb {`
438	`width: 60px;`
439	`height: 60px;`
440	`object-fit: cover;`
441	`border-radius: 8px;`
442	`vertical-align: middle;`
443	`margin-right: 1rem;`
444	`background: var(--bg-tertiary);`
445	`}`
446
447	`.cart-actions {`
448	`display: flex;`
449	`gap: 1rem;`
450	`justify-content: flex-end;`
451	`}`
452
453	`.empty-cart {`
454	`color: var(--text-muted);`
455	`text-align: center;`
456	`padding: 4rem;`
457	`font-size: 1.125rem;`
458	`}`
459
460	`.checkout-summary {`
461	`background: var(--bg-secondary);`
462	`border: 1px solid var(--border);`
463	`border-radius: 12px;`
464	`padding: 2rem;`
465	`margin-bottom: 2rem;`
466	`}`
467
468	`.checkout-summary h2 {`
469	`margin-bottom: 1.5rem;`
470	`}`
471
472	`.success-message, .error-message {`
473	`text-align: center;`
474	`padding: 4rem 2rem;`
475	`max-width: 600px;`
476	`margin: 0 auto;`
477	`}`
478
479	`.success-message h1 {`
480	`color: var(--success);`
481	`margin-bottom: 1rem;`
482	`}`
483
484	`.error-message h1 {`
485	`color: var(--error);`
486	`margin-bottom: 1rem;`
487	`}`
488
489	`.success-message p, .error-message p {`
490	`color: var(--text-muted);`
491	`margin-bottom: 0.75rem;`
492	`line-height: 1.7;`
493	`}`
494
495	`.success-message .btn-primary, .error-message .btn-primary {`
496	`margin-top: 2rem;`
497	`max-width: 300px;`
498	`}`
499
500	`footer {`
501	`background: var(--bg-secondary);`
502	`border-top: 1px solid var(--border);`
503	`padding: 2rem;`
504	`text-align: center;`
505	`color: var(--text-muted);`
506	`font-size: 0.9rem;`
507	`}`
508
509	`@media (max-width: 768px) {`
510	`main {`
511	`padding: 2rem 1.5rem;`
512	`}`
513
514	`h1 {`
515	`font-size: 1.75rem;`
516	`}`
517
518	`.cart-table {`
519	`font-size: 0.875rem;`
520	`}`
521
522	`.cart-table th,`
523	`.cart-table td {`
524	`padding: 0.875rem;`
525	`}`
526
527	`.cart-thumb {`
528	`width: 50px;`
529	`height: 50px;`
530	`}`
531	`}`