/* ============================================================
   OLD-SCHOOL eBAY STYLE v3 — Big Cartel Luna Template
   ============================================================
   CLEAR ALL PREVIOUS CUSTOM CSS FIRST
   Paste into: Design > Advanced > Custom CSS
   ============================================================ */

/* ── PALETTE ── */
:root {
  --eb-yellow: #f5af02;
  --eb-yellow-dark: #d49a02;
  --eb-blue: #0654ba;
  --eb-blue-dark: #003366;
  --eb-red: #e53238;
  --eb-green: #86b817;
  --eb-bg: #ffffff;
  --eb-gray: #f0f0f0;
  --eb-border: #cccccc;
  --eb-text: #333333;
  --eb-link: #0654ba;
  --eb-link-hover: #e53238;
}

/* ── GLOBAL RESET ── */
* {
  border-radius: 0 !important;
}

body {
  background-color: var(--eb-gray) !important;
  /* Tiled diagonal crosshatch pattern — pure CSS, no images */
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 14px,
      #e4e4e4 14px,
      #e4e4e4 15px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 14px,
      #e4e4e4 14px,
      #e4e4e4 15px
    ) !important;
  background-size: 15px 15px !important;
  color: var(--eb-text) !important;
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  -webkit-font-smoothing: auto !important;
  letter-spacing: normal !important;
}

/* Kill Luna's transitions for snappy old-web feel
   BUT exempt our custom retro animations */
.transition-preloader *,
.transition-preloader *::before,
.transition-preloader *::after {
  transition-duration: 0s !important;
}
/* Re-enable our retro animations specifically */
.announcement-message__text {
  animation: marquee-scroll 12s linear infinite !important;
}
.status-primary {
  animation: sale-blink 1s step-end infinite !important;
}

/* ── LINKS ── */
a {
  color: var(--eb-link) !important;
  text-decoration: underline !important;
}
a:hover {
  color: var(--eb-link-hover) !important;
}

/* ============================================================
   FIX #1: DOUBLE HEADER — NUCLEAR APPROACH
   Luna renders TWO identical nav lists inside <header>:
     Nav #1 → above the logo (inside .mobile-header)
     Nav #2 → below the logo (desktop nav)
   We hide EVERYTHING related to nav #1 and only keep nav #2.
   ============================================================ */

/* Hide the entire mobile-header div (contains the first nav) */
.mobile-header {
  display: none !important;
}

/* Also target: first nav element inside .header */
.header > nav:first-of-type,
.header nav:first-of-type {
  /* Don't hide this one — it might be the only nav on some pages */
}

/* The FIRST <ul> or nav that appears before the logo — hide it.
   Luna's structure: .header > .mobile-header > nav > ul
   We already hide .mobile-header, but if it's not working,
   these catch any stray nav that shows above the logo. */
.mobile-header,
.mobile-header *,
.mobile-header nav,
.mobile-header ul,
.mobile-header li,
.mobile-header a,
.mobile-header button {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  max-height: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* Also hide any mobile menu overlay/panel */
.mobile-menu,
.mobile-nav,
.mobile-menu-panel,
[class*="mobile-menu"],
[class*="mobile-nav"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* If Luna uses aria-label to differentiate the navs,
   hide the "Header" labeled nav (first) and keep "Header bottom" */
.header nav[aria-label="Header"],
.header nav[aria-label="Header navigation"] {
  display: none !important;
}

/* KEEP the nav that appears AFTER the logo — this is our eBay nav bar.
   Target it by being the LAST nav inside .header */
.header nav:last-of-type,
.header > nav:last-of-type {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  position: static !important;
  pointer-events: auto !important;
}

/* ============================================================
   FIX #2: ANNOUNCEMENT BAR — Scrolling marquee ticker
   Mimics the old eBay scrolling text bar
   ============================================================ */

/* Marquee animation keyframes */
@keyframes marquee-scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.announcement-message {
  background: var(--eb-yellow) !important;
  color: var(--eb-text) !important;
  font-size: 11px !important;
  font-weight: bold !important;
  border-top: 2px inset #d4a800 !important;
  border-bottom: 2px inset #d4a800 !important;
  padding: 4px 0 !important;
  text-align: center !important;
  font-family: 'Courier New', Courier, monospace !important;
  letter-spacing: 1px !important;
  position: relative !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
.announcement-message__text {
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
  color: var(--eb-text) !important;
  display: inline-block !important;
  animation: marquee-scroll 12s linear infinite !important;
  white-space: nowrap !important;
  padding-left: 10% !important;
}
/* Pause marquee on hover so people can read it */
.announcement-message:hover .announcement-message__text {
  animation-play-state: paused !important;
}
/* Close button — float above the scrolling text */
.announcement-message__close-button {
  color: #333 !important;
  background: var(--eb-yellow) !important;
  border: none !important;
  padding: 2px 6px !important;
  position: absolute !important;
  right: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  z-index: 5 !important;
}
.announcement-message__close-icon {
  width: 10px !important;
  height: 10px !important;
}

/* ============================================================
   HEADER — Yellow background with diagonal stripe texture
   ============================================================ */
.header {
  background: var(--eb-yellow) !important;
  /* Diagonal stripe texture over the yellow — subtle old-web pattern */
  background-image:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 8px,
      rgba(255,255,255,0.15) 8px,
      rgba(255,255,255,0.15) 10px
    ) !important;
  background-color: var(--eb-yellow) !important;
  border-bottom: 3px solid var(--eb-red) !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Logo container — left-aligned, logo sits on the pattern */
.header-logo-container,
.header-logo {
  background: transparent !important;
  padding: 10px 16px !important;
  text-align: left !important;
}
/* The logo image */
.header-logo-container img,
.header-logo img {
  max-height: 80px !important;
  width: auto !important;
}
/* If text-only store name */
.header h1,
.header h1 a,
.header-store-name,
.header-store-name a {
  font-family: 'Courier New', Courier, monospace !important;
  font-weight: bold !important;
  font-size: 28px !important;
  color: var(--eb-blue) !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

/* Hide the large header image (Luna hero banner) — old eBay didn't have hero images */
.header-image-container {
  display: none !important;
}

/* ============================================================
   DESKTOP NAVIGATION — Dark blue bar like eBay's Browse|Sell|Services
   ============================================================ */
/* Target the desktop nav that sits inside .header */
.header nav,
.header > nav,
.header .header-nav {
  background: var(--eb-blue-dark) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  display: block !important;
}

.header nav ul,
.header-nav ul,
.header-nav-list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  background: var(--eb-blue-dark) !important;
}

.header nav li,
.header-nav li,
.header-nav-list li {
  margin: 0 !important;
  padding: 0 !important;
  border-right: 1px solid rgba(255,255,255,0.2) !important;
}
.header nav li:last-child,
.header-nav li:last-child,
.header-nav-list li:last-child {
  border-right: none !important;
}

.header nav a,
.header nav li a,
.header-nav a,
.header-nav li a,
.header-nav-list a,
.header-nav-list li a {
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: bold !important;
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
  padding: 5px 16px !important;
  display: block !important;
  border: 2px outset #4a7ab5 !important;
  background: linear-gradient(to bottom, #3a6699 0%, var(--eb-blue-dark) 100%) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  margin: 2px 1px !important;
}
.header nav a:hover,
.header-nav a:hover,
.header-nav-list a:hover {
  border-style: inset !important;
  background: linear-gradient(to bottom, var(--eb-blue-dark) 0%, #1a3355 100%) !important;
  color: var(--eb-yellow) !important;
  text-decoration: none !important;
}

/* Cart count in nav → yellow accent */
.cart-num-items {
  color: var(--eb-yellow) !important;
  font-weight: bold !important;
}

/* ============================================================
   SEARCH FORM
   ============================================================ */
.search-form {
  background: var(--eb-gray) !important;
  padding: 6px 12px !important;
  border-bottom: 1px solid var(--eb-border) !important;
  text-align: center !important;
}
.search-input {
  border: 2px inset #c0c0c0 !important;
  border-radius: 0 !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
  background: #fff !important;
  width: 220px !important;
  max-width: 80% !important;
  box-shadow: none !important;
}
.search-button {
  background: var(--eb-gray) !important;
  border: 2px outset #d0d0d0 !important;
  padding: 3px 10px !important;
  color: var(--eb-text) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ============================================================
   MAIN CONTENT WRAPPER — Beveled panel with chunky drop shadow
   ============================================================ */
.wrapper,
main,
#main {
  max-width: 960px !important;
  margin: 0 auto !important;
  background: var(--eb-bg) !important;
  border-left: 2px inset #d0d0d0 !important;
  border-right: 2px inset #d0d0d0 !important;
  box-shadow: 5px 5px 0 #999999 !important;
}

/* ============================================================
   PAGE HEADINGS — Yellow left-border like eBay "Categories" sidebar
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
  color: var(--eb-text) !important;
  font-weight: bold !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  background: var(--eb-gray) !important;
  border: 1px solid var(--eb-border) !important;
  border-left: 4px solid var(--eb-yellow) !important;
  padding: 5px 10px !important;
  margin-bottom: 10px !important;
  font-size: 13px !important;
}

/* "Featured" heading on homepage — extra emphasis */
.home h1,
.home h2 {
  font-size: 15px !important;
  background: var(--eb-yellow) !important;
  color: var(--eb-text) !important;
  border: 2px outset #e0a000 !important;
  border-left: 4px solid var(--eb-red) !important;
  padding: 6px 12px !important;
  text-align: left !important;
}

/* Product page title — keep it blue, bigger */
.product-title,
.product h1 {
  color: var(--eb-blue) !important;
  font-size: 18px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--eb-yellow) !important;
  border-left: none !important;
  padding: 0 0 6px 0 !important;
}

/* Contact page heading */
.contact h1 {
  font-size: 15px !important;
}

/* ============================================================
   PRODUCT GRID — Windows 98 beveled 3D borders
   ============================================================ */
.product-list-thumb {
  border: 2px outset #d0d0d0 !important;
  background: var(--eb-bg) !important;
  padding: 8px !important;
  margin: 0 !important;
  text-align: center !important;
  position: relative !important;
}
.product-list-thumb:hover {
  background: #e8f0fe !important;
  border-style: inset !important;
}

.product-list-link {
  text-decoration: none !important;
  display: block !important;
}

/* Product image — beveled inset frame like Win98 picture viewer */
.product-list-image-container {
  background: var(--eb-bg) !important;
  padding: 2px !important;
  overflow: hidden !important;
}
.product-list-image {
  border: 2px inset #c0c0c0 !important;
  padding: 2px !important;
  background: var(--eb-bg) !important;
  object-fit: contain !important;
}

/* Product details area under image */
.product-list-details {
  text-align: center !important;
  padding: 4px 2px !important;
}

/* Product name → blue underlined link */
.product-list-name {
  color: var(--eb-link) !important;
  font-size: 11px !important;
  font-weight: normal !important;
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
  text-decoration: underline !important;
  line-height: 1.35 !important;
  display: block !important;
  margin-bottom: 2px !important;
}
.product-list-thumb:hover .product-list-name {
  color: var(--eb-link-hover) !important;
}

/* Product price → green */
.product-list-price {
  color: var(--eb-green) !important;
  font-weight: bold !important;
  font-size: 13px !important;
  text-decoration: none !important;
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}

/* Badges (sold-out, on-sale) */
.product-list-thumb-status {
  font-size: 9px !important;
  font-weight: bold !important;
  padding: 2px 6px !important;
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  z-index: 2 !important;
  text-transform: uppercase !important;
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}
.status-primary {
  background: var(--eb-yellow) !important;
  color: #333 !important;
  animation: sale-blink 1s step-end infinite !important;
}
@keyframes sale-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
.status-secondary {
  background: var(--eb-red) !important;
  color: #fff !important;
}

/* ============================================================
   PRODUCT DETAIL PAGE — Beveled 3D style
   ============================================================ */
.product-price,
.product-price span {
  color: var(--eb-green) !important;
  font-size: 20px !important;
  font-weight: bold !important;
}
/* Strikethrough original price if on sale */
.product-price s,
.product-price del {
  color: #999 !important;
  font-size: 14px !important;
}

.product-description {
  background: var(--eb-gray) !important;
  border: 2px inset #c0c0c0 !important;
  padding: 10px 12px !important;
  margin: 10px 0 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

/* Product images on detail page — beveled frame */
.product-images img,
.product-image img {
  border: 2px inset #c0c0c0 !important;
  padding: 2px !important;
  background: var(--eb-bg) !important;
}

/* Option dropdowns */
.option-select,
select {
  border: 1px solid var(--eb-border) !important;
  border-radius: 0 !important;
  padding: 4px 6px !important;
  font-size: 12px !important;
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
  background: #fff !important;
}

/* ============================================================
   BUTTONS — eBay beveled blue
   ============================================================ */
.button,
button[type="submit"],
input[type="submit"] {
  background: linear-gradient(to bottom, #4a90d9 0%, var(--eb-blue) 100%) !important;
  color: #fff !important;
  border: 2px outset #3a6ea5 !important;
  border-radius: 0 !important;
  padding: 7px 18px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
  cursor: pointer !important;
  text-decoration: none !important;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.2) !important;
  box-shadow: none !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
}
.button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: linear-gradient(to bottom, #5a9ee9 0%, #1664ca 100%) !important;
}

/* Add-to-cart → green "Buy It Now" */
.add-to-cart-button,
.product-add-to-cart .button,
button[name="add-to-cart"] {
  background: linear-gradient(to bottom, #9ed52a 0%, var(--eb-green) 100%) !important;
  border: 2px outset #6d9a10 !important;
  font-size: 14px !important;
  padding: 9px 26px !important;
}
.add-to-cart-button:hover,
.product-add-to-cart .button:hover,
button[name="add-to-cart"]:hover {
  background: linear-gradient(to bottom, #aee53a 0%, #96c817 100%) !important;
}

/* Checkout button → orange */
.checkout-btn {
  background: linear-gradient(to bottom, #ff7b3a 0%, #e55a20 100%) !important;
  border: 2px outset #c44a15 !important;
}
.checkout-btn:hover {
  background: linear-gradient(to bottom, #ff8b4a 0%, #f56a30 100%) !important;
}

/* Minimal / text buttons (like "Remove" in cart) */
.minimal-button {
  background: none !important;
  border: none !important;
  color: var(--eb-link) !important;
  text-decoration: underline !important;
  text-shadow: none !important;
  padding: 2px 4px !important;
  font-size: 11px !important;
  box-shadow: none !important;
}
.minimal-button:hover {
  color: var(--eb-link-hover) !important;
}

/* ============================================================
   CART PAGE
   ============================================================ */
.cart-item {
  border-bottom: 1px solid var(--eb-border) !important;
  padding: 10px 8px !important;
  background: var(--eb-bg) !important;
}
.cart-item:nth-child(even) {
  background: var(--eb-gray) !important;
}

.cart-item img {
  border: 1px solid var(--eb-border) !important;
  padding: 2px !important;
  background: #fff !important;
}

.cart-item-details-unit-price,
.cart-item-details-price__update,
.cart-subtotal-amount {
  color: var(--eb-green) !important;
  font-weight: bold !important;
  font-size: 14px !important;
}

.cart-item a {
  color: var(--eb-link) !important;
  font-size: 12px !important;
}

.option-quantity {
  border: 1px solid var(--eb-border) !important;
  border-radius: 0 !important;
  padding: 3px !important;
  width: 45px !important;
  text-align: center !important;
  font-size: 12px !important;
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}

/* Remove item buttons */
.remove-item-button,
.cart-item-remove,
.cart-item-remove-text {
  background: none !important;
  border: none !important;
  color: var(--eb-red) !important;
  text-decoration: underline !important;
  text-shadow: none !important;
  font-size: 11px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  padding: 2px !important;
}

/* Cart subtotal row */
.cart-subtotal {
  font-size: 14px !important;
  font-weight: bold !important;
  padding: 10px 0 !important;
  text-align: right !important;
}

/* Share cart link */
.copy-cart-link {
  background: none !important;
  border: none !important;
  color: var(--eb-link) !important;
  text-decoration: underline !important;
  text-shadow: none !important;
  box-shadow: none !important;
  font-size: 11px !important;
}

/* Empty cart message */
.cart .wrapper p,
.cart-empty-message {
  text-align: center !important;
  padding: 30px 10px !important;
  font-size: 14px !important;
  color: #666 !important;
}

/* ============================================================
   RELATED PRODUCTS
   ============================================================ */
.related-products-container {
  border-top: 2px outset #d0d0d0 !important;
  padding-top: 12px !important;
  margin-top: 16px !important;
}
.related-products-container h2 {
  font-size: 13px !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination a,
.pagination span {
  background: var(--eb-gray) !important;
  border: 2px outset #d0d0d0 !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  color: var(--eb-link) !important;
  text-decoration: none !important;
  margin: 1px !important;
  display: inline-block !important;
}
.pagination .current,
.pagination a:hover {
  background: var(--eb-blue) !important;
  color: #fff !important;
  border-style: inset !important;
}

/* ============================================================
   CATEGORY NAV → eBay LEFT SIDEBAR "Categories" panel
   Pulls .footer-nav--categories out of footer flow and
   fixes it as a left sidebar panel, like old eBay.
   NOTE: Requires you to create categories in Big Cartel admin
   (Products > Categories) and assign products to them.
   ============================================================ */
.footer-nav--categories {
  position: fixed !important;
  top: 180px !important;
  left: calc(50% - 530px) !important;
  width: 160px !important;
  z-index: 100 !important;
  background: var(--eb-bg) !important;
  border: 2px outset #d0d0d0 !important;
  border-left: 4px solid var(--eb-yellow) !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: 3px 3px 0 #999 !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
}
.footer-nav--categories::before {
  content: "Categories" !important;
  display: block !important;
  font-weight: bold !important;
  font-size: 12px !important;
  color: var(--eb-text) !important;
  background: var(--eb-gray) !important;
  border-bottom: 1px solid var(--eb-border) !important;
  border-left: 4px solid var(--eb-yellow) !important;
  padding: 5px 8px !important;
  margin-bottom: 0 !important;
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
}
.footer-nav--categories ul {
  list-style: none !important;
  padding: 4px 8px !important;
  margin: 0 !important;
}
.footer-nav--categories li {
  border-bottom: 1px dotted var(--eb-border) !important;
  padding: 4px 0 !important;
}
.footer-nav--categories li:last-child {
  border-bottom: none !important;
}
.footer-nav--categories a {
  color: var(--eb-link) !important;
  font-size: 11px !important;
  font-weight: bold !important;
  line-height: 1.4 !important;
  text-decoration: underline !important;
}
.footer-nav--categories a:hover {
  color: var(--eb-link-hover) !important;
}

/* On screens too narrow for the sidebar, hide it and let
   the categories stay in the footer naturally */
@media (max-width: 1100px) {
  .footer-nav--categories {
    position: static !important;
    width: auto !important;
    max-height: none !important;
    box-shadow: none !important;
    left: auto !important;
    top: auto !important;
    z-index: auto !important;
    border: 2px outset #d0d0d0 !important;
    border-left: 4px solid var(--eb-yellow) !important;
    margin-bottom: 10px !important;
  }
}

/* ============================================================
   FIX #3: FOOTER — Clean, centered, old-web style
   ============================================================ */
footer,
.footer,
body > footer {
  background: var(--eb-gray) !important;
  border-top: 2px outset #d0d0d0 !important;
  color: #666 !important;
  font-size: 10px !important;
  padding: 12px 16px !important;
  text-align: center !important;
  max-width: 100% !important;
}

/* Footer nav links → horizontal row */
footer nav,
footer .footer-nav,
.footer nav,
.footer .footer-nav {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
footer nav ul,
footer .footer-nav ul,
.footer nav ul {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 6px 0 !important;
  gap: 0 !important;
  background: transparent !important;
}
footer nav li,
footer .footer-nav li {
  margin: 0 !important;
  padding: 0 !important;
  border-right: none !important;
}
/* Pipe separators between footer links — classic early web */
footer nav li + li::before,
footer .footer-nav li + li::before {
  content: " | " !important;
  color: #999 !important;
  font-size: 11px !important;
  font-weight: normal !important;
  text-decoration: none !important;
  padding: 0 2px !important;
}
footer nav a,
footer .footer-nav a,
.footer a {
  color: var(--eb-link) !important;
  font-size: 11px !important;
  padding: 2px 8px !important;
  text-decoration: underline !important;
  background: transparent !important;
  display: inline !important;
  border: none !important;
  font-weight: normal !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
footer nav a:hover,
footer .footer-nav a:hover,
.footer a:hover {
  color: var(--eb-link-hover) !important;
}

/* FIX #4: SOCIAL MEDIA LINKS — clean and inline */
.social-links,
footer .social-links {
  text-align: center !important;
  padding: 6px 0 !important;
  margin: 0 !important;
}
.social-links a {
  display: inline-block !important;
  margin: 0 4px !important;
  padding: 3px !important;
  opacity: 0.5 !important;
  text-decoration: none !important;
  vertical-align: middle !important;
}
.social-links a:hover {
  opacity: 1 !important;
}
.social-links svg,
.social-links img {
  width: 18px !important;
  height: 18px !important;
  vertical-align: middle !important;
}

/* Footer announcement (the bottom yellow bar) */
footer .announcement-message,
.footer .announcement-message {
  margin-bottom: 8px !important;
}

/* Powered by Big Cartel credit */
.footer-credit,
.footer .credit,
footer small {
  font-size: 9px !important;
  color: #999 !important;
  display: block !important;
  margin-top: 6px !important;
}

/* ============================================================
   FORMS / INPUTS (Contact page, etc.)
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea {
  border: 2px inset #c0c0c0 !important;
  border-radius: 0 !important;
  padding: 5px 8px !important;
  font-size: 12px !important;
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
  background: #fff !important;
  color: var(--eb-text) !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 400px !important;
  box-sizing: border-box !important;
}
textarea {
  max-width: 100% !important;
  min-height: 120px !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--eb-blue) !important;
  outline: 1px dotted var(--eb-blue) !important;
  box-shadow: none !important;
}

/* Contact form labels */
.contact-form label,
form label {
  font-weight: bold !important;
  font-size: 11px !important;
  color: var(--eb-text) !important;
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
  display: block !important;
  margin-bottom: 3px !important;
  margin-top: 8px !important;
}

/* reCAPTCHA notice */
.recaptcha-notice,
.recaptcha-terms {
  font-size: 9px !important;
  color: #999 !important;
}

/* ============================================================
   SLIDESHOW (homepage if enabled)
   ============================================================ */
.slideshow-container,
.slideshow {
  border: 2px inset #c0c0c0 !important;
  background: var(--eb-bg) !important;
  margin-bottom: 10px !important;
}

/* ============================================================
   SKIP LINK (accessibility — keep functional but style it)
   ============================================================ */
.skip-link {
  background: var(--eb-blue) !important;
  color: #fff !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  text-decoration: none !important;
}

/* ============================================================
   MISC FIXES
   ============================================================ */

/* Preloader — disable it */
.preloader::before,
.preloader::after {
  display: none !important;
}

/* Remove any overlay effects on product grid */
.product-list-link--overlay .product-list-details {
  position: static !important;
  background: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Ensure all text is Verdana */
p, span, div, li, td, th, label, input, select, textarea, button {
  font-family: Verdana, Geneva, Tahoma, sans-serif !important;
}

/* Selection color */
::selection {
  background: var(--eb-blue) !important;
  color: #fff !important;
}

/* Horizontal rules */
hr {
  border: none !important;
  border-top: 1px solid var(--eb-border) !important;
  margin: 10px 0 !important;
}

/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */

/* Medium screens */
@media (max-width: 768px) {
  /* KEEP mobile-header hidden — single nav only, always */
  .mobile-header,
  .mobile-header * {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
  }

  /* Make the desktop nav wrap nicely on smaller screens */
  .header nav:last-of-type ul,
  .header-nav-list {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  .header nav:last-of-type a,
  .header-nav-list a {
    padding: 5px 10px !important;
    font-size: 11px !important;
  }
}

/* Small screens */
@media (max-width: 480px) {
  .header-logo-container img,
  .header-logo img {
    max-height: 50px !important;
  }
  .product-list-thumb {
    padding: 4px !important;
  }
  .product-list-name {
    font-size: 10px !important;
  }
  .product-list-price {
    font-size: 11px !important;
  }
  footer nav ul {
    flex-direction: column !important;
    align-items: center !important;
  }
}