/*
Theme Name: IronTalons
Theme URI: https://irontalons.example.com
Author: IronTalons
Description: Forged apparel & gym gear — a dark, editorial classic WordPress theme with WooCommerce, account integration, and a custom dark UI.
Version: 2.5.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: irontalons
Tags: woocommerce, dark-mode, e-commerce, custom-menu, custom-logo, threaded-comments
*/

:root {
  --background: oklch(0.13 0.005 270);
  --foreground: oklch(0.98 0 0);
  --card: oklch(0.17 0.006 270);
  --popover: oklch(0.17 0.006 270);
  --primary: oklch(0.98 0 0);
  --primary-foreground: oklch(0.13 0.005 270);
  --secondary: oklch(0.22 0.008 270);
  --muted: oklch(0.22 0.008 270);
  --muted-foreground: oklch(0.7 0.01 270);
  --accent: oklch(0.65 0.18 25);
  --accent-foreground: oklch(0.98 0 0);
  --border: oklch(0.28 0.008 270);
  --radius: 0.625rem;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--background);
  color: var(--foreground);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; background: transparent; color: inherit; border: 0; }

.container { max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--background); border-bottom: 1px solid var(--border); }
.topbar { background: var(--muted); color: var(--muted-foreground); text-align: center; font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; padding: .5rem; }
.header-row { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; gap: 1rem; }
.header-row .ask { font-size: .8rem; color: var(--muted-foreground); }
.logo img { height: 2.5rem; width: auto; }
.header-icons { display: flex; align-items: center; gap: 1rem; }
.header-icons a, .header-icons button { font-size: 1.1rem; position: relative; }
.header-icons a:hover { color: var(--accent); }
.cart-badge { position: absolute; top: -.4rem; right: -.6rem; background: var(--accent); color: var(--accent-foreground); font-size: 10px; height: 1rem; min-width: 1rem; padding: 0 .25rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.account-menu { position: relative; }
.account-menu .account-dropdown { display: none; position: absolute; top: 100%; right: 0; background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem 0; min-width: 180px; z-index: 60; margin-top: .5rem; }
.account-menu:hover .account-dropdown, .account-menu:focus-within .account-dropdown { display: block; }
.account-dropdown a { display: block; padding: .5rem 1rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.account-dropdown a:hover { background: var(--secondary); color: var(--accent); }

.primary-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2rem; padding: 0 1.5rem .75rem; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; }
.primary-nav a:hover, .primary-nav button:hover { color: var(--accent); }
.primary-nav ul { display: flex; gap: 2rem; list-style: none; padding: 0; margin: 0; }
.has-dropdown { position: relative; }
.has-dropdown .dropdown { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: var(--popover); border: 1px solid var(--border); border-radius: var(--radius); width: 640px; max-width: 92vw; z-index: 50; margin-top: .5rem; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { display: block; }
.dropdown-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.dropdown-header .eyebrow { font-size: .65rem; letter-spacing: .3em; color: var(--muted-foreground); margin: 0; text-transform: uppercase; }
.dropdown-header .title { font-size: .9rem; font-weight: 700; letter-spacing: .15em; margin: .25rem 0 0; }
.dropdown-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; padding: 1.25rem; }
.dropdown-grid h4 { font-size: .75rem; font-weight: 700; letter-spacing: .2em; margin: 0 0 .5rem; text-transform: uppercase; }
.dropdown-grid .tag { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted-foreground); font-size: .7rem; }
.dropdown-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .25rem; }
.dropdown-grid a { font-size: .75rem; color: var(--muted-foreground); }
.dropdown-grid a:hover { color: var(--foreground); }
.dropdown-foot { padding: .75rem 1.25rem; border-top: 1px solid var(--border); text-align: right; }
.dropdown-foot a { font-size: .65rem; font-weight: 700; letter-spacing: .25em; color: var(--accent); }

/* Hero */
.hero { position: relative; height: 70vh; min-height: 480px; background: radial-gradient(ellipse at top, oklch(0.22 0.05 25) 0%, var(--background) 60%); display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.hero-inner { padding: 0 1.5rem; max-width: 60rem; }
.hero .eyebrow { font-size: .75rem; letter-spacing: .4em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 1rem; }
.hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 1rem; }
.hero .sub { font-size: 1.1rem; color: var(--muted-foreground); margin: 0 0 2rem; }

.btn { display: inline-block; padding: .85rem 2rem; font-size: .8rem; letter-spacing: .25em; text-transform: uppercase; font-weight: 700; border-radius: var(--radius); transition: opacity .15s; }
.btn:hover { opacity: .85; }
.btn-light { background: var(--primary); color: var(--primary-foreground); }
.btn-accent { background: var(--accent); color: var(--accent-foreground); }

/* Sections */
.section { padding: 4rem 0; }
.eyebrow { font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 .5rem; }

.marketplace { padding: 3rem 0; border-top: 1px solid var(--border); }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.tile { aspect-ratio: 1; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; transition: border-color .15s; }
.tile:hover { border-color: var(--accent); color: var(--accent); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border-radius: var(--radius); overflow: hidden; }
.split > * { background: var(--background); padding: 3rem; }
.panel { background: linear-gradient(135deg, var(--card), var(--secondary)); display: flex; align-items: flex-end; min-height: 360px; }

/* Product grid (4 cols) */
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .product-grid { grid-template-columns: 1fr; } }
.product-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.product-card .ph { aspect-ratio: 1; background: var(--secondary); border-radius: calc(var(--radius) - .25rem); }
.product-card img { aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--radius) - .25rem); }
.product-card .name { font-size: .9rem; font-weight: 700; margin: 0; }
.product-card .meta { font-size: .7rem; color: var(--muted-foreground); margin: 0; text-transform: uppercase; letter-spacing: .1em; }
.product-card .price { font-size: .95rem; font-weight: 700; margin: 0; }
.product-card .add-to-cart { margin-top: .5rem; background: var(--primary); color: var(--primary-foreground); padding: .6rem; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; border-radius: calc(var(--radius) - .25rem); text-align: center; display: block; }
.product-card .add-to-cart:hover { background: var(--accent); color: var(--accent-foreground); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.chip { padding: .4rem .85rem; border: 1px solid var(--border); border-radius: 999px; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted-foreground); }
.chip:hover { color: var(--foreground); }
.chip.is-active { background: var(--accent); color: var(--accent-foreground); border-color: var(--accent); }

/* Pagination */
.it-pagination { display: flex; justify-content: center; gap: .75rem; margin-top: 2.5rem; }
.it-pagination a, .it-pagination span { padding: .5rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; }
.it-pagination .current { background: var(--accent); color: var(--accent-foreground); border-color: var(--accent); }

/* Footer */
.site-footer { border-top: 1px solid var(--border); background: var(--background); margin-top: 6rem; }
.footer-accent { height: .5rem; background: var(--accent); }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; max-width: 80rem; margin: 0 auto; padding: 4rem 2rem; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: repeat(2, 1fr); padding: 3rem 1.5rem; gap: 2rem; } }
.footer-grid h4 { font-size: .875rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 1rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .875rem; color: var(--muted-foreground); }
.footer-grid ul a { color: inherit; }
.footer-grid ul a:hover { color: var(--foreground); }
.footer-grid p { color: var(--muted-foreground); font-size: .875rem; margin: 0 0 1rem; }
.subscribe { display: flex; gap: .5rem; }
.subscribe input { flex: 1; padding: .5rem .75rem; background: transparent; border: 1px solid var(--border); color: var(--foreground); font-size: .875rem; }
.subscribe button { background: var(--primary); color: var(--primary-foreground); padding: 0 1rem; font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; }
.copyright { border-top: 1px solid var(--border); text-align: center; font-size: .75rem; color: var(--muted-foreground); padding: 1rem 2rem; }

/* Account / Auth pages */
.auth-shell { max-width: 28rem; margin: 4rem auto; padding: 2rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.auth-shell h1 { font-size: 1.75rem; font-weight: 900; text-transform: uppercase; margin: 0 0 1.5rem; }
.auth-shell label { display: block; font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: var(--muted-foreground); margin: 1rem 0 .25rem; }
.auth-shell input { width: 100%; padding: .75rem; background: var(--background); border: 1px solid var(--border); color: var(--foreground); border-radius: var(--radius); }
.auth-shell .btn { width: 100%; margin-top: 1.5rem; text-align: center; }
.auth-shell .meta { font-size: .8rem; color: var(--muted-foreground); margin-top: 1rem; text-align: center; }
.auth-shell .meta a { color: var(--accent); }

/* ───── Breadcrumb ───── */
.it-breadcrumb {
  border-bottom: 1px solid var(--border);
  background: var(--card);
}
.it-breadcrumb .container {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.25rem;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.it-breadcrumb .crumb-home {
  color: var(--foreground);
  font-weight: 700;
  text-decoration: none;
  padding: .35rem .75rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.it-breadcrumb .crumb-home:hover {
  background: var(--accent);
  color: var(--foreground);
  border-color: var(--accent);
}
.it-breadcrumb .crumb-sep { color: var(--muted-foreground); }
.it-breadcrumb .crumb-current { color: var(--muted-foreground); font-weight: 600; }

/* ============================================================
   IronTalons v2.3 — homepage + shop layout (matches design refs)
   ============================================================ */

/* Eyebrows */
.it-eyebrow { font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 .75rem; }
.it-eyebrow-accent { color: var(--accent); }

/* ----- HERO ----- */
.it-hero { min-height: 540px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4rem 1.5rem; position: relative; }
.it-hero-inner { max-width: 64rem; }
.it-hero-eyebrow { font-size: .8rem; letter-spacing: .5em; text-transform: uppercase; color: rgba(255,255,255,.85); margin: 0 0 1rem; }
.it-hero-title { font-size: clamp(2.5rem, 8vw, 6rem); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; line-height: 1; margin: 0 0 1.25rem; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.it-hero-sub { font-size: 1rem; letter-spacing: .25em; text-transform: uppercase; color: rgba(255,255,255,.95); margin: 0 0 2rem; }
.it-hero-cta { display: inline-block; background: #0d0d10; color: #fff; padding: 1rem 2.25rem; font-size: .8rem; font-weight: 800; letter-spacing: .25em; text-transform: uppercase; border-radius: 4px; transition: transform .15s, background .15s; }
.it-hero-cta:hover { background: #000; transform: translateY(-1px); }

/* ----- MARKETPLACE TILES ----- */
.it-marketplace { padding: 3rem 0 1rem; }
.it-tile-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .75rem; margin-top: 1rem; }
@media (max-width: 1024px) { .it-tile-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px)  { .it-tile-grid { grid-template-columns: repeat(2, 1fr); } }
.it-tile { aspect-ratio: 1; background: var(--card); border: 1px solid var(--border); border-radius: 4px; position: relative; transition: border-color .15s, transform .15s; }
.it-tile:hover { border-color: var(--accent); transform: translateY(-2px); }
.it-tile-label { position: absolute; left: .75rem; bottom: .75rem; font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--foreground); }

/* ----- FEATURED BUNDLE ----- */
.it-featured-bundle { padding: 3rem 0; }
.it-featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: stretch; }
@media (max-width: 800px) { .it-featured-grid { grid-template-columns: 1fr; } }
.it-featured-card { background: var(--card); border: 1px solid var(--border); border-radius: 4px; min-height: 320px; padding: 1.5rem; display: flex; flex-direction: column; justify-content: flex-end; }
.it-featured-name { font-size: 1.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; margin: .25rem 0 0; }
.it-featured-copy { padding: 1rem 0; display: flex; flex-direction: column; justify-content: center; }
.it-featured-title { font-size: 2rem; font-weight: 800; margin: 0 0 1rem; color: var(--foreground); }
.it-featured-title { background: linear-gradient(90deg, var(--accent), #fff 60%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.it-featured-desc { color: var(--muted-foreground); margin: 0 0 1.5rem; max-width: 30rem; }
.it-btn { display: inline-block; padding: .85rem 1.5rem; font-size: .75rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; border-radius: 4px; transition: opacity .15s, transform .15s; }
.it-btn:hover { transform: translateY(-1px); opacity: .92; }
.it-btn-accent { background: var(--accent); color: var(--accent-foreground); }
.it-btn-light { background: var(--foreground); color: var(--background); }

/* ----- SECTION HEAD (Three Bundles) ----- */
.it-three-bundles { padding: 1rem 0 3rem; }
.it-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.25rem; }
.it-section-title { font-size: 1.75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.it-section-link { font-size: .7rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--accent); }

.it-three-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 800px) { .it-three-grid { grid-template-columns: 1fr; } }
.it-bundle-card { display: flex; flex-direction: column; gap: .75rem; }
.it-bundle-art { aspect-ratio: 4/5; background: var(--card); border: 1px solid var(--border); border-radius: 4px; transition: border-color .15s; }
.it-bundle-card:hover .it-bundle-art { border-color: var(--accent); }
.it-bundle-meta { display: flex; justify-content: space-between; align-items: center; }
.it-bundle-name { font-size: .8rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.it-bundle-price { font-size: .8rem; font-weight: 700; color: var(--accent); }

/* ----- NEW DROP ----- */
.it-new-drop { padding: 1rem 0 3rem; }
.it-product-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1rem; }
@media (max-width: 900px) { .it-product-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .it-product-row { grid-template-columns: 1fr; } }
.it-prod { display: flex; flex-direction: column; gap: .5rem; }
.it-prod-art { aspect-ratio: 1; background: var(--card); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.it-prod-art img { width: 100%; height: 100%; object-fit: cover; }
.it-prod-meta { display: flex; flex-direction: column; gap: .15rem; padding: 0 .25rem; }
.it-prod-name { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.it-prod-price { font-size: .75rem; color: var(--accent); }

/* ----- CLASSICS SPLIT ----- */
.it-classics { padding: 3rem 0 4rem; }
.it-classics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 900px) { .it-classics-grid { grid-template-columns: 1fr; } }
.it-classics-title { font-size: 2.25rem; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 1rem; }
.it-classics-desc { color: var(--muted-foreground); margin: 0 0 1.5rem; max-width: 28rem; }
.it-classics-art { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.it-classics-tile { aspect-ratio: 1; background: var(--card); border: 1px solid var(--border); border-radius: 4px; }
.it-classics-tile:nth-child(2) { transform: translateY(2rem); }
.it-classics-tile:nth-child(4) { transform: translateY(2rem); }

/* ============================================================
   SHOP ALL — sidebar filters layout
   ============================================================ */
.it-shop { padding: 2rem 0 4rem; }
.it-shop-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1rem; gap: 1rem; }
.it-shop-title { font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: .01em; margin: .25rem 0 0; }
.it-home-btn { background: var(--accent); color: var(--accent-foreground); padding: .65rem 1.25rem; font-size: .75rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; border-radius: 4px; transition: opacity .15s; }
.it-home-btn:hover { opacity: .9; }

.it-shop-search { position: relative; margin-bottom: 1.5rem; }
.it-shop-search input[type=search] { width: 100%; padding: .85rem 1rem .85rem 2.5rem; background: var(--card); border: 1px solid var(--border); border-radius: 4px; color: var(--foreground); font-size: .85rem; letter-spacing: .1em; }
.it-shop-search input[type=search]::placeholder { color: var(--muted-foreground); letter-spacing: .15em; text-transform: uppercase; font-size: .75rem; }
.it-search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); opacity: .6; }

.it-shop-layout { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 800px) { .it-shop-layout { grid-template-columns: 1fr; } }

.it-filters { font-size: .75rem; }
.it-filter-title { font-size: .75rem; font-weight: 800; letter-spacing: .25em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 1rem; }
.it-filter-block { border: 0; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: .5rem; }
.it-filter-block legend { font-size: .7rem; font-weight: 800; letter-spacing: .25em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: .5rem; padding: 0; }
.it-check { display: flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; cursor: pointer; }
.it-check input { accent-color: var(--accent); }
.it-range { width: 100%; accent-color: var(--accent); }
.it-range-labels { display: flex; justify-content: space-between; font-size: .7rem; color: var(--muted-foreground); margin-top: .25rem; }
.it-select { width: 100%; background: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: 4px; padding: .5rem; font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; }

.it-shop-main { min-width: 0; }
.it-shop-count { font-size: .75rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 1rem; }
.it-shop-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
@media (max-width: 1100px) { .it-shop-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .it-shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .it-shop-grid { grid-template-columns: repeat(2, 1fr); } }
.it-shop-card { display: flex; flex-direction: column; gap: .5rem; }
.it-shop-art { aspect-ratio: 1; background: var(--card); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; transition: border-color .15s; }
.it-shop-art:hover { border-color: var(--accent); }
.it-shop-art img { width: 100%; height: 100%; object-fit: cover; }
.it-shop-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.it-shop-info { display: flex; flex-direction: column; min-width: 0; }
.it-shop-name { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.it-shop-price { font-size: .7rem; color: var(--accent); margin-top: .15rem; }
.it-shop-add { background: transparent; border: 1px solid var(--border); padding: .35rem .65rem; font-size: .65rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; border-radius: 3px; color: var(--foreground); transition: background .15s, border-color .15s; }
.it-shop-add:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-foreground); }
.it-empty { color: var(--muted-foreground); grid-column: 1 / -1; padding: 2rem 0; }