/* TriCore Innovations — store styles (v5, 2026-09-26): cart, checkout, account, downloads.
 * Loaded after site.css. Tokens: tokens.css · design system: design.md → "Store". */

/* Nav: cart + account icons */
.nav__icon { position: relative; display: inline-flex; align-items: center; gap: var(--space-2xs); height: 2.5rem; padding-inline: var(--space-xs); border-radius: var(--radius-sm); color: var(--color-ink-2); font-size: 0.9375rem; font-weight: 500; text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.nav__icon:hover, .nav__icon[aria-current="page"] { color: var(--color-accent); }
.nav__icon .ico { width: 1.375rem; height: 1.375rem; }
.nav__icon-label { display: none; }
@media (min-width: 80rem) { .nav__icon-label { display: inline; } }
.nav__count { position: absolute; top: 0.125rem; left: 1.375rem; min-width: 1.125rem; height: 1.125rem; padding: 0 0.25rem; border-radius: 999px; background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; line-height: 1.125rem; text-align: center; }
.nav__count--inline { position: static; margin-inline-start: var(--space-xs); }

/* Buttons */
.btn--sm { min-height: 2.25rem; padding-inline: var(--space-md); font-size: 0.875rem; }
.icon-btn { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border: var(--rule-hair) solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--color-muted); cursor: pointer; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.icon-btn:hover { color: var(--color-danger); border-color: var(--color-rule); }
.icon-btn[data-copy]:hover { color: var(--color-accent); }
.icon-btn .ico { width: 1.25rem; height: 1.25rem; }
.icon-btn.is-copied { color: var(--color-success); }
.btn-link { padding: 0; border: 0; background: none; color: var(--color-danger); font-size: 0.9375rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-arrow .ico { width: 1.125rem; height: 1.125rem; align-self: center; }
.tag--accent { display: inline-flex; align-items: center; gap: 0.25rem; border-color: var(--color-accent); color: var(--color-accent); }
.tag--accent .ico { width: 0.8125rem; height: 0.8125rem; }
.tag--perk { display: inline-flex; align-items: center; gap: 0.25rem; border-color: var(--color-success); color: var(--color-success); }
.tag--perk .ico { width: 0.8125rem; height: 0.8125rem; }

/* Flash messages (inline, never toast) */
.flash { display: flex; align-items: flex-start; gap: var(--space-xs); margin-block-end: var(--space-lg); padding: var(--space-sm) var(--space-md); border-left: 3px solid var(--color-success); border-radius: var(--radius-sm); background: var(--color-success-soft); color: var(--color-ink); font-size: 0.9375rem; }
.flash .ico { width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; color: var(--color-success); }
.flash--error { border-color: var(--color-danger); background: var(--color-danger-soft); }
.flash--error .ico { color: var(--color-danger); }
.flash--info { border-color: var(--color-accent); background: var(--color-accent-soft); }
.flash--info .ico { color: var(--color-accent); }

/* Catalog toolbar + pagination */
.catalog-bar { display: grid; gap: var(--space-md); margin-block-end: var(--space-xl); }
.catalog-bar .filter-chips { margin: 0; }
@media (min-width: 64rem) { .catalog-bar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.catalog-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs); }
.catalog-search select { grid-column: 1; }
.catalog-search .btn { grid-column: 2; grid-row: 1; }
@media (min-width: 40rem) {
  .catalog-search { grid-template-columns: minmax(12rem, 1fr) 11rem auto; }
  .catalog-search select, .catalog-search .btn { grid-column: auto; grid-row: auto; }
}
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-block-start: var(--space-xl); padding-block-start: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: 0.9375rem; }
.pager__edge { color: var(--color-ink); font-weight: 500; text-decoration: none; }
a.pager__edge:hover { color: var(--color-accent); }
.pager__edge[aria-disabled="true"] { color: var(--color-rule-2); }
.pager__info { color: var(--color-muted); }

/* Price + cover badge */
.price__was { margin-inline-end: var(--space-2xs); color: var(--color-muted); font-size: 0.8em; font-weight: 400; }
.cover__badge { position: absolute; top: var(--space-sm); left: var(--space-sm); padding: 0 var(--space-xs); border-radius: var(--radius-sm); background: var(--color-accent); color: var(--color-accent-ink); font-size: 0.8125rem; font-weight: 600; line-height: 1.6rem; }
.cover__badge--free { background: var(--color-success); }

/* Product detail buy box */
.buybox { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.buybox form { display: contents; }
.buybox__owned { flex-basis: 100%; display: flex; align-items: center; gap: var(--space-xs); color: var(--color-success); font-weight: 500; }
.buybox__owned .ico { width: 1.25rem; height: 1.25rem; }
.buybox__note { flex-basis: 100%; margin: 0; font-size: var(--text-sm); color: var(--color-muted); }
/* Promo gratis instalasi & setup (Product::includesFreeInstall) */
.perk { display: flex; align-items: flex-start; gap: var(--space-xs); margin: 0; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); background: var(--color-success-soft); color: var(--color-ink-2); font-size: 0.9375rem; line-height: 1.45; }
.perk .ico { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; color: var(--color-success); }
.perk b { display: block; color: var(--color-ink); font-weight: 600; }
.totals__perk dd { color: var(--color-success); font-weight: 500; }
.product-facts { display: grid; gap: var(--space-2xs); list-style: none; font-size: 0.9375rem; }
.product-facts li { display: flex; align-items: center; gap: var(--space-xs); }
.product-facts .ico { width: 1.125rem; height: 1.125rem; color: var(--color-accent); }
.changelog summary { font-size: var(--text-lg); }

/* Slim page head for utility pages */
.page-head--slim { padding-block: var(--space-xl) var(--space-lg); }
.page-head--slim .page-head__grid { padding-block-end: var(--space-lg); }
.page-head--slim h1 { font-size: clamp(2rem, 2.4vw + 1rem, 3rem); }

/* Cart + checkout */
.checkout { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 60rem) { .checkout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-2xl); } }
.line-items { display: grid; margin-block-end: var(--space-lg); list-style: none; border-top: 2px solid var(--color-ink); }
.line-item { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--space-xs) var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.line-item__cover { border-radius: var(--radius-sm); }
.line-item__cover .ico-tile { width: 2rem; height: 2rem; }
.line-item__cover .cover__label, .line-item__cover .cover__badge { display: none; }
.line-item__body { display: grid; justify-items: start; gap: var(--space-3xs); }
.line-item__name { color: var(--color-ink); font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.2; text-decoration: none; }
.line-item__name:hover { color: var(--color-accent); }
.line-item__price { grid-column: 2; }
.line-item form { grid-column: 3; grid-row: 1 / span 2; }
@media (min-width: 40rem) {
  .line-item { grid-template-columns: 6.5rem minmax(0, 1fr) auto auto; }
  .line-item__price { grid-column: 3; }
  .line-item form { grid-column: 4; grid-row: auto; }
}

.summary { display: grid; gap: var(--space-md); padding: var(--space-lg); background: var(--surface-card); border: var(--rule-hair) solid var(--color-rule); border-top: var(--rule-double) double var(--color-ink); border-radius: var(--radius-md); box-shadow: var(--shadow-whisper); }
@media (min-width: 60rem) { .summary { position: sticky; top: calc(var(--nav-h) + var(--space-md)); } }
.summary .h-sm { margin: 0; }
.summary .btn--primary { width: 100%; }
.summary__items { display: grid; gap: var(--space-xs); list-style: none; font-size: 0.9375rem; }
.summary__items li { display: flex; justify-content: space-between; gap: var(--space-md); }
.summary__items li.is-owned { color: var(--color-muted); text-decoration: line-through; }
.coupon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-xs); }
.coupon .help { grid-column: 1 / -1; min-height: 0; }
.coupon--applied { align-items: center; padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-sm); border: var(--rule-hair) dashed var(--color-accent); border-radius: var(--radius-sm); background: var(--color-accent-soft); }
.coupon--applied span { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-ink); }
.coupon--applied .ico { width: 1.125rem; height: 1.125rem; color: var(--color-accent); }
.totals { display: grid; gap: var(--space-2xs); margin: 0; padding-block: var(--space-sm); border-block: var(--rule-hair) solid var(--color-rule); }
.totals > div { display: flex; justify-content: space-between; gap: var(--space-md); }
.totals dt { color: var(--color-ink-2); }
.totals dd { margin: 0; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.totals__discount dd { color: var(--color-success); }
.totals__grand { padding-block-start: var(--space-xs); }
.totals__grand dt, .totals__grand dd { color: var(--color-ink); font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; }
.check { display: flex; align-items: flex-start; gap: var(--space-xs); font-size: 0.9375rem; cursor: pointer; }
.check input { width: 1.125rem; height: 1.125rem; margin-top: 0.2rem; flex: none; accent-color: var(--color-accent); }
.form.form--stack { grid-template-columns: minmax(0, 1fr); align-content: start; }
.form--stack .btn { justify-self: start; }
.input--file { min-height: auto; padding-block: var(--space-xs); }

/* Auth */
.auth__card { display: grid; gap: var(--space-md); max-width: 28rem; margin-inline: auto; padding: var(--space-xl) var(--space-lg); background: var(--surface-card); border: var(--rule-hair) solid var(--color-rule); border-top: var(--rule-double) double var(--color-ink); border-radius: var(--radius-md); box-shadow: var(--shadow-paper); }
.auth__card h1 { font-size: var(--text-2xl); }
.auth__card .lede { font-size: 1rem; }
.auth__card .btn--primary { width: 100%; }
.auth__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.auth__alt { padding-block-start: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: 0.9375rem; text-align: center; }

/* Account */
.acct { display: grid; gap: var(--space-xl); align-items: start; }
@media (min-width: 60rem) { .acct { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--space-2xl); } }
.acct__nav { display: flex; flex-wrap: wrap; gap: var(--space-2xs); padding-block-end: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
@media (min-width: 60rem) { .acct__nav { position: sticky; top: calc(var(--nav-h) + var(--space-md)); flex-direction: column; padding-block: var(--space-xs) 0; border-bottom: 0; border-top: 2px solid var(--color-ink); } }
.acct__nav a, .acct__nav button { display: flex; align-items: center; gap: var(--space-xs); min-height: 2.5rem; padding-inline: var(--space-sm); border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-ink-2); font-size: 0.9375rem; font-weight: 500; text-decoration: none; cursor: pointer; }
.acct__nav .ico { width: 1.125rem; height: 1.125rem; }
.acct__nav a:hover, .acct__nav button:hover { color: var(--color-accent); }
.acct__nav a[aria-current="page"] { background: var(--color-accent-soft); color: var(--color-accent); }
.acct__nav form { display: contents; }
.acct__main { display: grid; gap: var(--space-xl); min-width: 0; }
.acct__main > .flash { margin: 0; }
.acct__block { display: grid; gap: var(--space-md); }
.acct__block .h-sm { margin: 0; }
.acct__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.stat-row { display: grid; gap: var(--space-md); list-style: none; }
@media (min-width: 40rem) { .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat-row li { display: grid; padding: var(--space-md) var(--space-lg); background: var(--surface-card); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); }
.stat-row li, .stat-row a { gap: var(--space-3xs); }
.stat-row a { display: grid; color: inherit; text-decoration: none; }
.stat-row a:hover b { color: var(--color-accent); }
.stat-row b { color: var(--color-ink); font-family: var(--font-display); font-weight: 500; font-size: 2.25rem; line-height: 1; }
.stat-row span { color: var(--color-muted); font-size: 0.875rem; }
.empty--inline { max-width: none; justify-items: start; margin: 0; padding: var(--space-lg); text-align: left; }
.orders-table td, .orders-table th { vertical-align: middle; }
.orders-table tbody th { width: auto; font-family: var(--font-mono); font-size: 0.9375rem; }

/* Order status badge */
.status { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0 var(--space-xs); border-radius: 999px; background: var(--color-paper-3); color: var(--color-ink-2); font-size: 0.8125rem; font-weight: 500; line-height: 1.75; white-space: nowrap; }
.status::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; }
.status--verifying { background: oklch(95% 0.05 85); color: oklch(45% 0.1 70); }
.status--paid { background: var(--color-success-soft); color: var(--color-success); }
.status--cancelled { background: var(--color-danger-soft); color: var(--color-danger); }

/* Order detail */
.order-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }
.order-head .link-arrow { margin-inline-start: auto; }
.timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; }
.timeline li { display: grid; gap: var(--space-3xs); padding-block-start: var(--space-md); border-top: 3px solid var(--color-rule); font-size: 0.875rem; }
.timeline li + li { padding-inline-start: var(--space-sm); }
.timeline li.is-done { border-color: var(--color-accent); }
.timeline b { color: var(--color-ink); font-weight: 500; }
.timeline small { color: var(--color-muted); }
.pay-box { display: grid; gap: var(--space-md); padding: var(--space-lg); border: var(--rule-hair) solid var(--color-accent); border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-accent-soft), var(--color-paper) 70%); }
.pay-box .h-sm { margin: 0; }
.pay-box__amount { color: var(--color-accent); font-family: var(--font-display); font-size: 1.375rem; }
.banks { display: grid; list-style: none; border-top: var(--rule-hair) solid var(--color-rule-2); }
.banks li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.banks__name { color: var(--color-ink); font-weight: 600; }
.banks__no { grid-column: 1; color: var(--color-ink); font-size: 1.125rem; }
.banks .muted { grid-column: 1; font-size: 0.875rem; }
.banks .icon-btn { grid-column: 2; grid-row: 1 / span 3; }
.proof-form { padding: var(--space-lg); background: var(--surface-card); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); }
.proof-form .h-sm { margin: 0; }
.order-items { display: grid; list-style: none; border-top: 2px solid var(--color-ink); }
.order-item { display: grid; gap: var(--space-sm); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.order-item__head { display: flex; justify-content: space-between; gap: var(--space-md); }
.order-item__head b { color: var(--color-ink); font-family: var(--font-display); font-weight: 500; font-size: 1.1875rem; }

/* Files list (library + order) */
.files { display: grid; gap: var(--space-xs); list-style: none; }
.files li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm); }
.files__meta { display: grid; }
.files__meta b { color: var(--color-ink); font-weight: 500; }
.files__meta small { color: var(--color-muted); font-size: 0.8125rem; }
.library { display: grid; gap: var(--space-lg); list-style: none; }
.library__item { display: grid; gap: var(--space-md); padding-block-end: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
@media (min-width: 48rem) { .library__item { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-lg); } }
.library__cover { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md); }
.library__body { display: grid; gap: var(--space-sm); align-content: start; }
.library__body .link-arrow, .library__body > .btn { justify-self: start; }
.library__name { font-size: 1.5rem; }

/* Invoice (printable) */
.invoice-page { background: var(--color-paper-2); }
.invoice { display: grid; gap: var(--space-xl); max-width: 50rem; margin: var(--space-xl) auto; padding: var(--space-xl); background: #fff; border: var(--rule-hair) solid var(--color-rule); box-shadow: var(--shadow-paper); }
.invoice__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-lg); padding-block-end: var(--space-lg); border-bottom: var(--rule-double) double var(--color-ink); }
.invoice__head img { width: auto; height: 3.5rem; }
.invoice__head > div { display: grid; justify-items: end; gap: var(--space-2xs); }
.invoice__head h1 { font-size: var(--text-2xl); }
.invoice__parties { display: grid; gap: var(--space-lg); font-size: 0.9375rem; }
@media (min-width: 40rem) { .invoice__parties { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.invoice .num { padding-right: 0; text-align: right; font-variant-numeric: tabular-nums; }
.invoice tfoot td { padding: var(--space-xs) 0; border-top: 1px solid var(--color-rule); }
.invoice .invoice__total td { border-top: 1px solid var(--color-ink); color: var(--color-ink); font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; }
.invoice__print { justify-self: start; }
@media print {
  .invoice-page { background: #fff; }
  .invoice { margin: 0; padding: 0; border: 0; box-shadow: none; }
  .invoice__print { display: none; }
}