/* Additions for the standalone site. Uses the same design tokens as style.css. */

.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.breadcrumb { font-size: .875rem; color: var(--muted-foreground); margin: 1.5rem 0; }
.breadcrumb a:hover { color: var(--primary); }
.small { font-size: .875rem; }

/* Two columns with sticky side column on desktop. */
.with-aside { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 960px) {
  .with-aside { grid-template-columns: minmax(0, 1fr) 300px; }
  .with-aside > aside { position: sticky; top: 96px; }
}

/* Forms */
.nptcl-form { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.form-grid { display: grid; gap: 1rem; }
@media (min-width: 720px) { .form-grid { grid-template-columns: 1fr 1fr; } .field--wide { grid-column: 1 / -1; } }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 500; font-size: .925rem; }
.field input:not([type=checkbox]), .field select, .field textarea {
  width: 100%; font: inherit; color: var(--foreground); background: var(--card);
  border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); padding: .7rem .85rem;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }
.field [aria-invalid="true"] { border-color: #dc2626; }
.field .check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.nptcl-form .btn { justify-self: start; }
.nptcl-form .btn:disabled { opacity: .6; cursor: progress; }
.newsletter-msg { min-height: 1.4em; font-size: .925rem; }
.newsletter-msg.is-error { color: #b91c1c; }
.newsletter-msg.is-success { color: var(--foreground); }
.nptcl-form-verification { min-height: 65px; }
.newsletter-form .form-grid { grid-template-columns: 1fr; }
.newsletter-form .field label { position: absolute; left: -9999px; }
@media (min-width: 720px) { .newsletter-form { grid-template-columns: 1fr auto; align-items: start; } .newsletter-form .newsletter-msg, .newsletter-form .nptcl-form-verification { grid-column: 1 / -1; } }
.security-report { padding: 1.75rem; margin: 2.5rem 0; }

/* Products */
.shop-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.shop-card { overflow: hidden; display: flex; flex-direction: column; }
.shop-card-media { position: relative; aspect-ratio: 1; background: var(--surface); display: block; }
.shop-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .35s; }
.shop-card-media img.is-alt { opacity: 0; }
.shop-card:hover .shop-card-media img.is-alt { opacity: 1; }
.shop-card-body { padding: 1.25rem; display: grid; gap: .6rem; flex: 1; align-content: start; }
.shop-card-price, .product-price { font-weight: 700; font-family: var(--font-display); }
.shop-card-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: auto; }
.product-detail { display: grid; gap: 2rem; }
@media (min-width: 900px) { .product-detail { grid-template-columns: 1.1fr 1fr; } .product-info { position: sticky; top: 96px; align-self: start; } }
.product-gallery { display: grid; gap: 1rem; }
.product-gallery img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--surface); border-radius: var(--radius); }
.product-info { display: grid; gap: 1rem; align-content: start; }

/* Team profile */
.member-profile { display: grid; gap: 2rem; }
@media (min-width: 860px) { .member-profile { grid-template-columns: 360px 1fr; align-items: start; } .member-photo { position: sticky; top: 96px; } }
.member-photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); }

/* FAQ */
.faq-group { margin: 2rem 0 .75rem; scroll-margin-top: 96px; }
.faq-item { padding: 1rem 1.25rem; margin-bottom: .6rem; }
.faq-item summary { cursor: pointer; font-weight: 600; }
.faq-item p { margin-top: .6rem; }

/* Blog */
.blog-cards { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.blog-card { overflow: hidden; display: flex; flex-direction: column; }
.blog-card-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-card-body { padding: 1.25rem; display: grid; gap: .5rem; }
.blog-card h3 a:hover, .side-post-list a:hover strong { color: var(--primary); }
.blog-meta { font-size: .85rem; color: var(--muted-foreground); }
.blog-article h1 { margin-top: .5rem; }
.blog-article .lede { margin-top: 1rem; }
.blog-cover { width: 100%; border-radius: var(--radius); margin: 1.5rem 0; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-article .prose { margin-top: 1.5rem; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin-top: 2rem; }
.prose ul { list-style: disc; padding-left: 1.4rem; }
.prose ol { padding-left: 1.4rem; }
.prose a { color: var(--primary); text-decoration: underline; }
.prose img { border-radius: var(--radius); }
.prose blockquote { border-left: 3px solid var(--primary); padding-left: 1rem; color: var(--muted-foreground); margin-left: 0; }
.prose pre { background: var(--surface); padding: 1rem; border-radius: 10px; overflow: auto; }
.blog-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0; }
.blog-tags a, .pagination a { border: 1px solid var(--border); border-radius: 999px; padding: .3rem .9rem; font-size: .875rem; }
.blog-tags a[aria-current], .pagination a[aria-current] { background: var(--foreground); color: var(--background); border-color: var(--foreground); }
.pagination { display: flex; gap: .5rem; justify-content: center; margin: 2.5rem 0; }
.blog-aside { display: grid; gap: 1.25rem; }
.side-post-list li + li { margin-top: .85rem; }
.side-post-list a { display: grid; gap: .15rem; }

/* Admin */
.admin-main { padding: 2rem 0 4rem; }
.admin-login { display: grid; gap: 1rem; max-width: 360px; margin-top: 2rem; }
.admin-login input { width: 100%; padding: .7rem; border: 1px solid var(--border); border-radius: 10px; font: inherit; margin-top: .4rem; }
.admin-error { color: #b91c1c; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 1rem; }
.admin-tabs a { padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--border); }
.admin-tabs a[aria-current] { background: var(--foreground); color: var(--background); }
.admin-tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.admin-tools input { padding: .5rem .75rem; border: 1px solid var(--border); border-radius: 10px; font: inherit; min-width: 260px; }
.admin-logout { margin-left: auto; color: var(--muted-foreground); }
.admin-table { overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.admin-table table { border-collapse: collapse; width: 100%; font-size: .85rem; }
.admin-table th, .admin-table td { padding: .55rem .75rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; max-width: 360px; }
.admin-table th { background: var(--surface); position: sticky; top: 0; }
.admin-table a { color: var(--primary); }