/* AnyTee site shell: warm paper, ink type, one accent per page. Shared by every rebuilt page. */
:root {
    --paper: #f6f2ea;
    --paper-2: #ede6da;
    --card: #fbf8f2;
    --ink: #1c1a16;
    --muted: #6a645a;
    --line: #ddd5c7;
    --accent: #3f6fb8;
    --accent-soft: #d4def0;
    --danger: #a8322d;
    --display: 'Bricolage Grotesque', 'Arial Narrow', Arial, sans-serif;
    --body: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --gutter: clamp(16px, 5vw, 120px);
}
.accent-pets { --accent: #c8582f; --accent-soft: #f1d9cb; }
.accent-bachelorette { --accent: #b84a74; --accent-soft: #efd3de; }
.accent-gifts { --accent: #3d8a5a; --accent-soft: #d3e6d8; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.site { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.site h1, .site h2, .site h3, .site p { margin: 0; }
.site a { color: inherit; }
.site img { max-width: 100%; }
.site [hidden] { display: none !important; }

.skip-link { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 8px; }

/* announcement + header */
.site-announce { background: var(--ink); color: var(--paper); display: flex; justify-content: center; gap: 16px; font-size: 13px; font-weight: 500; padding: 9px 16px; }
.site-announce span:nth-child(2) { opacity: 0.4; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(246, 242, 234, 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px var(--gutter); min-height: 68px; }
.site-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.site-logo-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--ink); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; }
.site-logo-word { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -0.03em; }
.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav-link { font-size: 15px; font-weight: 500; color: var(--muted) !important; text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.site-nav-link:hover { color: var(--ink) !important; }
.site-nav-link.is-active { color: var(--ink) !important; font-weight: 700; border-bottom-color: var(--accent); }
.site-header-actions { display: flex; align-items: center; gap: 8px; }
.site-cart { position: relative; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: #fff; }
.site-cart:hover { border-color: var(--ink); }
.site-cart-count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.site-menu-button { display: none; width: 44px; height: 44px; border: 0; background: none; color: var(--ink); cursor: pointer; align-items: center; justify-content: center; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--body); font-weight: 700; font-size: 16px; text-decoration: none; border-radius: 999px; border: 1px solid transparent; padding: 14px 24px; min-height: 52px; cursor: pointer; }
.btn-primary { background: var(--accent); color: #fff !important; box-shadow: 0 8px 24px -14px var(--accent); }
.btn-dark { background: var(--ink); color: #fff !important; }
.btn-quiet { background: transparent; color: var(--ink) !important; border-color: var(--line); }
.btn:hover { filter: brightness(1.05); }

.container { padding-left: var(--gutter); padding-right: var(--gutter); }
.site-fine { font-size: 13px; color: var(--muted); }

/* recent designs (homepage + create page), from this browser's saved designs */
.recent-designs { margin-bottom: 20px; }
.recent-designs-row { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; }
.recent-design { flex: none; width: 132px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.recent-design img { width: 132px; height: 132px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px; }
.recent-design:hover img { border-color: var(--ink); }
.recent-design span { font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* footer */
.site-footer { border-top: 1px solid var(--line); margin-top: 48px; }
.site-footer-inner { display: flex; justify-content: space-between; gap: 48px; padding: 48px var(--gutter); flex-wrap: wrap; }
.site-footer-brand { display: flex; flex-direction: column; gap: 12px; max-width: 320px; }
.site-footer-brand p { font-size: 15px; color: var(--muted); }
.site-footer-cols { display: flex; gap: 72px; flex-wrap: wrap; }
.site-footer-cols > div { display: flex; flex-direction: column; gap: 10px; }
.site-footer-heading { font-size: 13px; font-weight: 700; }
.site-footer-cols a { font-size: 15px; color: var(--muted); text-decoration: none; }
.site-footer-cols a:hover { color: var(--ink); }

@media (max-width: 860px) {
    .site-menu-button { display: inline-flex; }
    .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 16px; }
    .site-nav.is-open { display: flex; }
    .site-nav-link { padding: 12px 0; font-size: 17px; border-bottom: 1px solid var(--line); }
    .site-nav-link.is-active { border-bottom-color: var(--line); color: var(--accent) !important; }
    .site-logo-word { font-size: 21px; }
    .site-footer-cols { gap: 36px; }
}
@media (min-width: 861px) { .site-nav-secondary { display: none; } }