/** Shopify CDN: Minification failed

Line 319:0 All "@import" rules must come first

**/
/* TopRater Gear Custom Styles
   Overrides Dawn theme defaults to match headless design
   -------------------------------------------------------- */

/* Import Black Ops One from Google Fonts (military stencil style) */
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');

/* Custom Properties */
:root {
  --topratergear-olive-600: #5a5a32;
  --topratergear-olive-700: #4a4a28;
  --topratergear-stone-100: #f5f5f4;
  --topratergear-stone-200: #e7e5e4;
  --topratergear-stone-300: #d6d3d1;
  --topratergear-stone-400: #a8a29e;
  --topratergear-stone-500: #78716c;
  --topratergear-stone-600: #57534e;
  --topratergear-stone-700: #44403c;
  --topratergear-stone-800: #292524;
  --topratergear-background: #faf9f7;
}

/* Body background override */
body {
  background-color: var(--topratergear-background) !important;
}

/* Header styling - stone background */
.section-header {
  background-color: var(--topratergear-stone-100) !important;
  border-bottom: 1px solid var(--topratergear-stone-300);
}

.header {
  background-color: transparent !important;
}

/* Logo sizing */
.header__heading-logo {
  max-width: 180px;
  height: auto;
}

/* Navigation links */
.header__menu-item,
.list-menu__item--link {
  color: var(--topratergear-stone-700) !important;
  font-weight: 500;
}

.header__menu-item:hover,
.list-menu__item--link:hover {
  color: var(--topratergear-stone-800) !important;
}

/* Product cards - clean minimal style */
.card-wrapper {
  background: #fff;
  border: 1px solid var(--topratergear-stone-200);
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.card-wrapper:hover {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Product card content area - add breathing room */
.card__content,
.card-information {
  padding: 0.75rem 1rem 1rem;
}

.card__heading {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--topratergear-stone-800);
  line-height: 1.4;
  letter-spacing: 0.01em;
  padding-left: 0.5rem;
}

@media screen and (min-width: 750px) {
  .card__heading {
    font-size: 1.25rem;
  }
}

/* Price styling - olive accent */
.price-item,
.price__regular .price-item--regular {
  color: var(--topratergear-olive-600) !important;
  font-weight: 600;
  padding-left: 0.5rem;
}

/* Buttons - olive accent */
.button,
.shopify-challenge__button {
  background-color: var(--topratergear-olive-600) !important;
  border-color: var(--topratergear-olive-600) !important;
  color: #fff !important;
}

.button:hover,
.shopify-challenge__button:hover {
  background-color: var(--topratergear-olive-700) !important;
  border-color: var(--topratergear-olive-700) !important;
}

/* Secondary buttons */
.button--secondary {
  background-color: #fff !important;
  border: 1px solid var(--topratergear-stone-300) !important;
  color: var(--topratergear-stone-700) !important;
}

.button--secondary:hover {
  border-color: var(--topratergear-stone-400) !important;
}

/* Variant pills */
.variant-picker__button.active,
.variant-picker__button:hover,
.swatch-input:checked + .swatch {
  border-color: var(--topratergear-stone-800) !important;
  background-color: var(--topratergear-stone-800) !important;
  color: #fff !important;
}

/* Footer - dark stone */
.footer {
  background-color: var(--topratergear-stone-800) !important;
  color: var(--topratergear-stone-300) !important;
}

.footer h2,
.footer-block__heading {
  color: #fff !important;
  font-weight: 600;
}

.footer a {
  color: var(--topratergear-stone-300) !important;
}

.footer a:hover {
  color: #fff !important;
}

.footer__content-bottom {
  border-top-color: var(--topratergear-stone-700) !important;
  color: var(--topratergear-stone-500) !important;
}

/* Bulk Order CTA button in footer */
.footer__bulk-order-cta {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: var(--topratergear-olive-600);
  color: #fff !important;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 4px;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer__bulk-order-cta:hover {
  opacity: 0.9;
  color: #fff !important;
}

/* Hero section - stencil font */
/* Target the first rich-text section (hero) heading */
.section-rich-text:first-of-type h2,
.rich-text__heading,
.topratergear-hero__title {
  font-family: 'Black Ops One', Impact, sans-serif !important;
  font-size: 3rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--topratergear-stone-800) !important;
}

@media screen and (min-width: 750px) {
  .section-rich-text:first-of-type h2,
  .rich-text__heading,
  .topratergear-hero__title {
    font-size: 4rem !important;
  }
}

.section-rich-text:first-of-type .rich-text__text,
.topratergear-hero__subtitle {
  color: var(--topratergear-stone-600) !important;
  font-size: 1rem;
  margin-top: 0.5rem;
}

/* Filter buttons / collection tabs */
.collection-filters__item,
.collection-hero__filter-button {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 4px;
  border: 1px solid var(--topratergear-stone-300);
  background: #fff;
  color: var(--topratergear-stone-700);
  transition: all 0.2s ease;
}

.collection-filters__item:hover,
.collection-hero__filter-button:hover {
  border-color: var(--topratergear-stone-400);
}

.collection-filters__item.active,
.collection-hero__filter-button.active {
  background-color: var(--topratergear-stone-800);
  border-color: var(--topratergear-stone-800);
  color: #fff;
}

/* Cart drawer */
.cart-drawer {
  background-color: #fff;
}

.cart-drawer__header {
  border-bottom: 1px solid var(--topratergear-stone-200);
}

/* Product form personalization area */
.product-form__personalization {
  padding: 1rem;
  background-color: var(--topratergear-stone-100);
  border: 1px solid var(--topratergear-stone-200);
  border-radius: 4px;
  margin-bottom: 1rem;
}

/* Announcement bar (if used) */
.announcement-bar {
  background-color: var(--topratergear-olive-600) !important;
}

.announcement-bar__link,
.announcement-bar__message {
  color: #fff !important;
}

/* Remove Dawn's default animations for cleaner look */
.card--media .card__content {
  background: transparent;
}

/* Ensure product images have clean borders */
.product__media-item {
  border: 1px solid var(--topratergear-stone-200);
  border-radius: 4px;
  overflow: hidden;
}

/* Clean up thumbnail borders */
.thumbnail {
  border: 1px solid var(--topratergear-stone-200);
  border-radius: 4px;
}

.thumbnail.is-active,
.thumbnail:hover {
  border-color: var(--topratergear-stone-800);
}

/* Form inputs */
.field__input,
.form__input {
  border-color: var(--topratergear-stone-300);
  border-radius: 4px;
}

.field__input:focus,
.form__input:focus {
  border-color: var(--topratergear-stone-800);
  box-shadow: 0 0 0 2px rgba(68, 64, 60, 0.1);
}

/* Checkbox styling */
input[type="checkbox"] {
  accent-color: var(--topratergear-olive-600);
}

/* Badge colors */
.badge--sale {
  background-color: var(--topratergear-olive-600) !important;
  color: #fff !important;
}

.badge--sold-out {
  background-color: var(--topratergear-stone-800) !important;
  color: #fff !important;
}

/* ==========================================================================
   Personalization Live Preview
   Shows customer's typed name on product image in real-time
   ========================================================================== */

/* Import Alata font for embroidery-style text */
@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');

#personalization-preview-overlay {
  position: absolute;
  top: 32%;
  left: 28%;
  font-family: 'Alata', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--topratergear-stone-800);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.2s ease;
  /* Simulate slight embroidery texture */
  text-shadow: 0 0.5px 0 rgba(0,0,0,0.15);
  /* Prevent text from being selected */
  user-select: none;
  -webkit-user-select: none;
}

#personalization-preview-overlay.has-text {
  opacity: 1;
}

/* Ensure media container can hold the overlay */
.product-media-container {
  position: relative;
}

/* Responsive adjustments for overlay position/size */
@media screen and (max-width: 749px) {
  #personalization-preview-overlay {
    font-size: 11px;
    top: 30%;
    left: 26%;
  }
}

@media screen and (min-width: 990px) {
  #personalization-preview-overlay {
    font-size: 16px;
  }
}

/* ==========================================================================
   Product Card Embroidery Badge
   Shows unit insignia preview on product cards
   ========================================================================== */

.card__media {
  position: relative;
  background-color: var(--topratergear-stone-100);
}

/* Ensure white products don't wash out */
.card__media img,
.card-wrapper img {
  background-color: var(--topratergear-stone-100);
}

.topratergear-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 50px;
  height: auto;
  z-index: 10;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
  pointer-events: none;
}

@media screen and (min-width: 750px) {
  .topratergear-badge {
    width: 60px;
    top: 6px;
    right: 6px;
  }
}