/* Hover/focus states that the original React components applied through JS handlers.
   Everything else comes from tailwind.css (built from the original globals.css). */

[hidden] { display: none !important; }

.sh-search:focus-within { border-color: #800000 !important; }

.sh-icon-link { color: #333; }
.sh-icon-link:hover { color: #800000; }

.sh-nav-link { color: #FFFFFF; }
.sh-nav-link:hover { color: #800000; }

.sh-more-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; color: #333; text-decoration: none;
  font-size: 14px; font-family: 'Open Sans', sans-serif;
  transition: background-color 0.15s;
}
.sh-more-item:hover { background-color: #FFF0F0; color: #800000; }

.sh-mm-link { color: #333; }
.sh-mm-link:hover { background-color: #fff8f0; color: #800000; }

.sh-footer-heading {
  font-size: 15px; font-weight: 700; color: #222; margin-bottom: 16px;
  font-family: 'Open Sans', sans-serif;
}
.sh-footer-link {
  font-size: 13px; color: #666; text-decoration: none;
  font-family: 'Open Sans', sans-serif; display: block;
  padding: 4px 0; line-height: 1.6; transition: color 0.2s;
}
.sh-footer-link:hover { color: #800000; }

.sh-footer-contact {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #666; text-decoration: none;
}
.sh-footer-contact:hover { color: #800000; }

.sh-social {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid #ddd;
  display: flex; align-items: center; justify-content: center;
  color: #666; text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.sh-social:hover { border-color: #800000; color: #800000; }

.sh-home-btn:active { transform: scale(0.92); }

/* Cart badges: shown by theme.js once the localStorage cart has items. */
[data-sh-cart-count]:not([hidden]) { display: flex; }

/* ── Cards / buttons (hover handlers of ProductCard & TopSellingCard) ── */
.sh-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important; transform: translateY(-2px); }
.sh-btn-outline:not(:disabled):hover { background-color: #800000 !important; color: #FFFFFF !important; }
.sh-btn-outline:not(:disabled):active, .sh-btn-solid:not(:disabled):active { transform: scale(0.97); }
.sh-btn-solid:not(:disabled):hover { background-color: #5C0000 !important; }

/* ── Home ── */
.sh-hero-arrow { background-color: rgba(255,255,255,0.22); color: #fff; transition: background-color 0.2s; }
.sh-hero-arrow:hover { background-color: rgba(255,255,255,0.55); }
.sh-cat-circle:hover { box-shadow: 0 4px 16px rgba(128,0,0,0.25) !important; transform: translateY(-3px); }
a:hover > .sh-cat-name { color: #800000 !important; }
.sh-rev-prev:hover { background-color: #800000 !important; }
.sh-rev-next:hover { background-color: #5C0000 !important; }

/* ── Shop ── */
.sh-shop-search:focus { border-color: #800000 !important; }

/* ── Product page ── */
.sh-tag:hover { background-color: #800000 !important; color: #fff !important; }

/* ── Blog post body (inline <style> of the original blog/[slug] page) ── */
.blog-content h2 { font-size: 1.35rem; font-weight: 700; color: #1a1208; margin: 1.5rem 0 0.6rem; line-height: 1.35; }
.blog-content h3 { font-size: 1.1rem; font-weight: 600; color: #333; margin: 1.2rem 0 0.5rem; line-height: 1.4; }
.blog-content p { margin: 0 0 1rem; color: #555; line-height: 1.8; }
.blog-content ul { list-style-type: disc; padding-left: 1.5rem; margin: 0.75rem 0 1rem; }
.blog-content ol { list-style-type: decimal; padding-left: 1.5rem; margin: 0.75rem 0 1rem; }
.blog-content li { margin-bottom: 0.35rem; color: #555; line-height: 1.7; }
.blog-content a { color: #800000; text-decoration: underline; }
.blog-content strong { font-weight: 700; color: #1a1208; }

/* ── Shared spinner (Tailwind's animate-spin keyframes are only emitted when used) ── */
@keyframes spin { to { transform: rotate(360deg); } }