/* ═══════════════════════════════════════════════════════════════
   MastBRO theme — complements Tailwind CDN with reusable bits
   ═══════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }
body { font-family: 'Manrope', system-ui, sans-serif; background: #F7F8FA; color: #14181C; -webkit-font-smoothing: antialiased; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

/* Star rating */
.stars { display: inline-flex; gap: 1px; }
.stars svg { width: 13px; height: 13px; color: #FFC93C; fill: #FFC93C; }
.stars svg.empty { color: #E5E7EB; fill: #E5E7EB; }

/* Product cards */
.p-card { transition: box-shadow .25s ease, transform .25s ease; }
.p-card:hover { box-shadow: 0 12px 32px -8px rgba(20,24,28,0.14); transform: translateY(-2px); z-index: 2; }
.p-card:hover .quick-actions { opacity: 1; transform: translateX(0); }
.quick-actions { opacity: 0; transform: translateX(4px); transition: all .25s ease; }
.p-card:hover .p-img { transform: scale(1.04); }
.p-img { transition: transform .4s ease; }

/* Tabs */
.tab-btn[aria-selected="true"] { background: #14181C; color: white; }

/* Availability bar */
.stock-bar { width: 100%; height: 4px; background: #E5E7EB; border-radius: 2px; overflow: hidden; }
.stock-bar-fill { height: 100%; background: linear-gradient(90deg, #17A37A, #FFC93C); }
.stock-bar-fill.low { background: #E53935; }

/* Pulse dot */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.pulse { animation: pulse 1.5s ease-in-out infinite; }

/* Marquee */
@keyframes mscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.m-track { animation: mscroll 30s linear infinite; }

/* Category chip horizontal scroll */
.chips-scroll::-webkit-scrollbar { height: 4px; }
.chips-scroll::-webkit-scrollbar-thumb { background: #E5E7EB; border-radius: 2px; }

/* FAQ chevron */
details[open] .faq-chev { transform: rotate(180deg); }
.faq-chev { transition: transform .3s ease; }
details summary::-webkit-details-marker { display: none; }

/* Quantity button hover */
.qty-btn:hover { background: #14181C; color: white; }

/* Mega menu */
.mega { opacity: 0; visibility: hidden; transform: translateY(-4px); pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
.has-mega.mega-open > .mega { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition: opacity .2s ease, transform .2s ease, visibility 0s linear 0s; }

/* Image placeholder */
.p-bg {
  background:
    radial-gradient(circle at 30% 30%, rgba(23,163,122,0.06), transparent 50%),
    linear-gradient(180deg, #FAFBFC, #F1F3F5);
}

/* Badges */
.badge {
  display: inline-flex; align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.04em;
  padding: 3px 7px; font-weight: 500;
  text-transform: uppercase; border-radius: 2px;
}
.b-hit   { background: #E53935; color: white; }
.b-new   { background: #17A37A; color: white; }
.b-sale  { background: #14181C; color: #FFC93C; }
.b-own   { background: #FFC93C; color: #14181C; }

/* Tabular numbers */
.tnum { font-variant-numeric: tabular-nums; }

/* Drawer sliding */
.drawer-open { transform: translateX(0) !important; }

/* Scroll snap horizontal */
.snap-x-list { scroll-snap-type: x mandatory; }
.snap-x-list > * { scroll-snap-align: start; }

/* Line clamp fallback */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hide number input spinners */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* ═══════════════════════════════════════════════════════════════
   COMPATIBILITY LAYER for sorrel-based templates
   (checkout, account, auth, blog, pages). Maps sorrel's class names
   to MastBRO design tokens so inherited templates render acceptably.
   ═══════════════════════════════════════════════════════════════ */

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 20px; border-radius:6px; font-weight:600; font-size:14px; text-decoration:none; transition:all .2s; cursor:pointer; border:none; gap:8px; }
.btn-primary { background:#FFC93C; color:#14181C; }
.btn-primary:hover { background:#E5B020; }
.btn-outline { background:#fff; color:#14181C; border:2px solid #14181C; }
.btn-outline:hover { background:#14181C; color:#fff; }
.btn-dark { background:#14181C; color:#fff; }
.btn-dark:hover { background:#17A37A; }

/* Inputs */
.input, input[type="text"].input, input[type="email"].input, input[type="tel"].input, input[type="password"].input, select.input, textarea.input {
  width:100%; height:44px; padding:0 14px; border:1px solid #E5E7EB; background:#fff; border-radius:6px; font-size:14px; font-family:inherit; outline:none; transition:border-color .15s;
}
.input:focus { border-color:#17A37A; }
textarea.input { height:auto; padding:12px 14px; resize:vertical; }

/* Checkout */
.co { max-width:1200px; margin:0 auto; padding:40px 20px; }
.co-steps { display:flex; gap:8px; justify-content:center; font-size:12px; font-family:'JetBrains Mono',monospace; letter-spacing:.08em; color:#6B7280; margin-bottom:32px; }
.co-steps .step.active { color:#17A37A; font-weight:600; }
.co-steps .sep { opacity:.4; }
.co-grid { display:grid; grid-template-columns:1fr 380px; gap:24px; }
@media (max-width:900px) { .co-grid { grid-template-columns:1fr; } }
.co-block { background:#fff; border:1px solid #E5E7EB; border-radius:8px; padding:24px; margin-bottom:16px; }
.co-block h2 { display:flex; align-items:center; gap:12px; font-size:18px; font-weight:800; margin-bottom:16px; }
.co-block h2 .num { width:28px; height:28px; background:#14181C; color:#FFC93C; display:flex; align-items:center; justify-content:center; border-radius:4px; font-size:13px; font-family:'JetBrains Mono',monospace; }
.co-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:600px) { .co-row { grid-template-columns:1fr; } }
.co-options { display:flex; flex-direction:column; gap:10px; }
.co-opt { display:flex; align-items:flex-start; gap:12px; padding:14px; border:2px solid #E5E7EB; border-radius:6px; cursor:pointer; transition:border-color .15s; }
.co-opt:has(input:checked) { border-color:#17A37A; background:#E6F5EF; }
.co-opt input[type=radio] { margin-top:4px; accent-color:#17A37A; }
.co-opt-content { flex:1; }
.co-opt-content .t { font-weight:600; font-size:14px; }
.co-opt-content .s { font-size:12px; color:#6B7280; margin-top:2px; }
.co-opt .price { font-weight:700; font-family:'JetBrains Mono',monospace; color:#17A37A; }
.co-side { background:#fff; border:1px solid #E5E7EB; border-radius:8px; padding:24px; position:sticky; top:90px; align-self:start; }
.co-summary-row { display:flex; justify-content:space-between; margin-bottom:8px; font-size:14px; }
.co-summary-total { display:flex; justify-content:space-between; font-size:20px; font-weight:800; padding-top:14px; border-top:1px solid #E5E7EB; margin-top:14px; }

/* Cart legacy (for any leftover references) */
.cart-page { max-width:1200px; margin:0 auto; padding:40px 20px; }
.cart-page h1 { font-size:32px; font-weight:800; margin-bottom:24px; }
.cart-empty { font-size:16px; color:#6B7280; margin-bottom:16px; }
.cart-table { width:100%; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; }
.cart-table th, .cart-table td { padding:14px; text-align:left; border-bottom:1px solid #E5E7EB; }
.cart-table th { background:#F7F8FA; font-size:12px; font-family:'JetBrains Mono',monospace; color:#6B7280; letter-spacing:.06em; }
.cart-product { display:flex; align-items:center; gap:12px; }
.cart-footer { display:flex; justify-content:space-between; align-items:center; margin-top:20px; padding:20px; background:#fff; border:1px solid #E5E7EB; border-radius:8px; }
.qty-input, .remove-btn { padding:6px 10px; border:1px solid #E5E7EB; border-radius:4px; background:#fff; cursor:pointer; }

/* Account */
.acc-layout { max-width:1200px; margin:0 auto; padding:40px 20px; display:grid; grid-template-columns:240px 1fr; gap:24px; }
@media (max-width:900px) { .acc-layout { grid-template-columns:1fr; } }
.acc-nav { background:#fff; border:1px solid #E5E7EB; border-radius:8px; padding:20px; align-self:start; }
.acc-nav a { display:block; padding:10px 12px; border-radius:4px; color:#14181C; text-decoration:none; font-size:14px; margin-bottom:2px; }
.acc-nav a:hover, .acc-nav a.active { background:#E6F5EF; color:#17A37A; font-weight:600; }
.acc-main { background:#fff; border:1px solid #E5E7EB; border-radius:8px; padding:28px; }

/* Auth */
.auth-page { max-width:460px; margin:60px auto; padding:36px; background:#fff; border:1px solid #E5E7EB; border-radius:8px; }
.auth-page h1 { font-size:26px; font-weight:800; margin-bottom:20px; }
.auth-page .form-field { margin-bottom:14px; }
.auth-page label { display:block; font-size:12px; color:#6B7280; margin-bottom:6px; font-family:'JetBrains Mono',monospace; letter-spacing:.04em; }

/* Blog */
.blog-list { max-width:1100px; margin:0 auto; padding:40px 20px; }
.blog-list h1 { font-size:32px; font-weight:800; margin-bottom:24px; }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.blog-card { background:#fff; border:1px solid #E5E7EB; border-radius:8px; overflow:hidden; transition:box-shadow .2s; }
.blog-card:hover { box-shadow:0 12px 32px -8px rgba(20,24,28,.14); }
.blog-card img { width:100%; aspect-ratio:16/10; object-fit:cover; }
.blog-card-body { padding:18px; }
.blog-card h3 { font-size:16px; font-weight:700; margin-bottom:6px; }
.blog-card .meta { font-size:11px; color:#6B7280; font-family:'JetBrains Mono',monospace; }

/* Pages */
.page-static { max-width:800px; margin:0 auto; padding:40px 20px; }
.page-static h1 { font-size:32px; font-weight:800; margin-bottom:20px; }
.page-static h2 { font-size:22px; font-weight:700; margin:24px 0 12px; }
.page-static p { line-height:1.7; margin-bottom:12px; color:#242C33; }
.page-static ul, .page-static ol { margin-bottom:14px; padding-left:20px; }

/* Generic error / success */
.alert-error { padding:12px 16px; background:#fdecea; color:#c62828; border-radius:6px; margin-bottom:16px; }
.alert-success { padding:12px 16px; background:#E6F5EF; color:#0F7858; border-radius:6px; margin-bottom:16px; }

/* Hero on pages that still call .hero */
.hero { padding:40px 20px; max-width:1200px; margin:0 auto; }
.hero h1 { font-size:36px; font-weight:800; line-height:1.1; }
.hero-eyebrow { font-size:12px; font-family:'JetBrains Mono',monospace; letter-spacing:.1em; color:#17A37A; margin-bottom:8px; text-transform:uppercase; }

/* Misc link style used in sorrel */
.arrow-link { color:#17A37A; text-decoration:none; font-weight:600; font-size:14px; }
.arrow-link:hover { text-decoration:underline; }