/** Shopify CDN: Minification failed

Line 274:0 Unexpected "}"

**/
/* ================================================================
   HONDO HAT CO. — CUSTOM CSS
   ================================================================ */


/* -----------------------------------------------
   1. TWO-TONE PRODUCT CARD BACKGROUND
   ----------------------------------------------- */

.product-item__media {
  background-color: #DAD0C9;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10),
              0 1px 4px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}

.product-item__image-link {
  background-color: #DAD0C9;
}

.product-item:hover .product-item__media {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14),
              0 2px 6px rgba(0, 0, 0, 0.10);
}


/* -----------------------------------------------
   2. CARD HOVER LIFT EFFECT
   ----------------------------------------------- */

.product-item__inner {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.product-item:hover .product-item__inner {
  transform: translateY(-3px);
}


/* -----------------------------------------------
   3. ADD TO CART BUTTON ON COLLECTION CARDS
   ----------------------------------------------- */

.product-item__collection-actions {
  display: flex;
  gap: 6px;
  padding: 8px 0 6px;
  width: 100%;
}

.product-item__shop-now-btn,
.product-item__atc-btn {
  flex: 1;
  font-size: 11px;
  padding: 8px 4px;
  text-align: center;
  white-space: nowrap;
  border-radius: 3px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.product-item__shop-now-btn {
  background-color: transparent;
  border: 1.5px solid #111111;
  color: #111111;
}

.product-item__shop-now-btn:hover {
  background-color: #111111;
  color: #ffffff;
}

.product-item__atc-btn {
  background-color: #111111;
  border: 1.5px solid #111111;
  color: #ffffff;
}

.product-item__atc-btn:hover {
  background-color: #333333;
  border-color: #333333;
}

.product-item__atc-btn:disabled {
  background-color: #aaaaaa;
  border-color: #aaaaaa;
  cursor: not-allowed;
}

.product-item__atc-form {
  flex: 1;
  display: flex;
}

.product-item__atc-form .product-item__atc-btn {
  width: 100%;
}


/* -----------------------------------------------
   4. BUY 2 GET 1 FREE BADGE
   ----------------------------------------------- */

.product-badge[data-handle="buy-2-get-1-free"] {
  background-color: #c0392b !important;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 10px;
  padding: 5px 9px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 2px;
}


/* -----------------------------------------------
   5. PRODUCT DETAIL PAGE IMAGE BACKGROUND
   ----------------------------------------------- */

.product__media-item {
  background-color: #DAD0C9;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10),
              0 2px 6px rgba(0, 0, 0, 0.07);
}

.product__media-item img,
.product__media-item video,
.product__media-item model-viewer {
  display: block;
}

.product-thumbnails__item-link {
  background-color: #DAD0C9;
  border-radius: 3px;
  overflow: hidden;
  display: block;
}

.product-thumbnails__item-link.active {
  outline: 2px solid #888888;
  outline-offset: 2px;
}

.product-thumbnails__item-link:hover {
  outline: 2px solid #AAAAAA;
  outline-offset: 2px;
}

.product__media-container.below-mobile .product__media-item {
  background-color: #DAD0C9;
}


/* -----------------------------------------------
   6. HAT SILHOUETTE DROP SHADOW
   Follows the PNG hat shape — not the bounding box
   ----------------------------------------------- */

/* Collection page cards */
.product-item__image .image__img,
.product-item__image--one .image__img,
.product-item__image--two .image__img {
  filter: drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.22))
          drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.14))
          drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.08));
  transition: filter 0.3s ease;
}

.product-item:hover .product-item__image .image__img,
.product-item:hover .product-item__image--one .image__img {
  filter: drop-shadow(0px 14px 20px rgba(0, 0, 0, 0.26))
          drop-shadow(0px 5px 8px rgba(0, 0, 0, 0.16))
          drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.10));
}

/* Product detail page main image */
.product__media-item .image__img {
  filter: drop-shadow(0px 12px 18px rgba(0, 0, 0, 0.20))
          drop-shadow(0px 4px 7px rgba(0, 0, 0, 0.13))
          drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.08));
}

/* Thumbnail images */
.product-thumbnails__item-link .image__img {
  filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.16))
          drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.10));
}


/* -----------------------------------------------
   7. SIBLING SWATCH TRANSITION
   ----------------------------------------------- */

[data-ajax-sibling-nav] .product__color-swatch--sibling-product {
  cursor: pointer;
}

/* ================================================================
   THRILLX AUDIT ADDITIONS — March 2026
   ================================================================ */

/* -----------------------------------------------
   8. COLLECTION CARD: SAVINGS % BADGE
   ThrillX Suggestion 03
   ----------------------------------------------- */
.product-item .product-badge--sale {
  background-color: #c0392b;
  color: #ffffff;
  font-weight: 700;
  font-size: 10px;
  padding: 4px 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 2px;
}

/* -----------------------------------------------
   9. COLLECTION CARD: STAR RATINGS
   ThrillX Suggestion 03
   ----------------------------------------------- */
.product-item .product-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 2px 0 4px;
}
.product-item .product-rating__stars {
  display: flex;
  align-items: center;
  color: #c0392b;
}
.product-item .product-rating__stars svg {
  width: 12px;
  height: 12px;
}
.product-item .product-rating__count {
  font-size: 10px;
  color: #666666;
  letter-spacing: 0.02em;
}

/* -----------------------------------------------
   10. COLLECTION CARD: ATC + SHOP NOW BUTTONS (refined)
   ThrillX Suggestion 03
   ----------------------------------------------- */
.product-item__shop-now-btn {
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.product-item__atc-btn--sold-out {
  background-color: #aaaaaa !important;
  border-color: #aaaaaa !important;
  cursor: not-allowed;
}


}

/* -----------------------------------------------
   12. PDP: B2G1 CALLOUT BOX
   ThrillX Suggestion 05
   ----------------------------------------------- */
.product__block-callouts .product__callouts-items[data-with-box="true"] {
  border: 2px solid #c0392b;
  border-radius: 4px;
  padding: 12px 14px;
  background-color: #fff8f7;
}
.product__callouts-item .product__callouts-item-icon svg {
  color: #c0392b;
}

/* -----------------------------------------------
   13. B2G1 BUNDLE MODULE
   ThrillX Suggestion 05
   ----------------------------------------------- */
.hondo-bundle {
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 18px 16px;
  margin: 16px 0;
  background-color: #fafafa;
}
.hondo-bundle__header { margin-bottom: 14px; }
.hondo-bundle__badge {
  display: inline-block;
  background-color: #c0392b;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  margin-bottom: 8px;
}
.hondo-bundle__headline { font-size: 13px; color: #444444; margin: 0; line-height: 1.4; }
.hondo-bundle__progress-wrap { margin-bottom: 16px; }
.hondo-bundle__progress-bar {
  height: 5px;
  background-color: #e5e5e5;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.hondo-bundle__progress-fill {
  height: 100%;
  background-color: #c0392b;
  border-radius: 3px;
  transition: width 0.35s ease;
}
.hondo-bundle__progress-text { font-size: 12px; color: #555555; margin: 0; }
.hondo-bundle__slots { display: flex; gap: 8px; margin-bottom: 16px; }
.hondo-bundle__slot {
  flex: 1;
  border: 1.5px dashed #cccccc;
  border-radius: 4px;
  padding: 8px 6px;
  text-align: center;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #ffffff;
}
.hondo-bundle__slot--filled { border-style: solid; border-color: #111111; }
.hondo-bundle__slot--free { border-color: #c0392b; }
.hondo-bundle__slot-image { position: relative; width: 70px; height: 70px; margin: 0 auto 4px; }
.hondo-bundle__slot-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.hondo-bundle__slot-remove {
  position: absolute; top: -6px; right: -6px;
  width: 18px; height: 18px;
  background-color: #111111; color: #ffffff;
  border: none; border-radius: 50%;
  font-size: 9px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.hondo-bundle__slot-title { font-size: 10px; font-weight: 600; margin: 0 0 2px; line-height: 1.3; color: #111111; }
.hondo-bundle__slot-price { font-size: 10px; color: #666666; margin: 0; }
.hondo-bundle__slot-placeholder { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #aaaaaa; }
.hondo-bundle__slot-placeholder span:first-child { font-size: 22px; line-height: 1; font-weight: 300; }
.hondo-bundle__slot-placeholder p { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; color: #888888; }
.hondo-bundle__free-tag { background-color: #c0392b; color: #ffffff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 2px; letter-spacing: 0.08em; }
.hondo-bundle__picker { margin-bottom: 14px; }
.hondo-bundle__picker-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #333333; margin: 0 0 8px; }
.hondo-bundle__picker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
@media (max-width: 480px) { .hondo-bundle__picker-grid { grid-template-columns: repeat(3, 1fr); } }
.hondo-bundle__pick-item { border: 1.5px solid #e5e5e5; border-radius: 4px; padding: 6px 4px; background: #ffffff; cursor: pointer; text-align: center; transition: border-color 0.15s ease; }
.hondo-bundle__pick-item:hover { border-color: #111111; }
.hondo-bundle__pick-item--selected { border-color: #c0392b; background-color: #fff8f7; }
.hondo-bundle__pick-image { width: 60px; height: 60px; margin: 0 auto 4px; }
.hondo-bundle__pick-image img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.hondo-bundle__pick-placeholder { width: 60px; height: 60px; background-color: #DAD0C9; border-radius: 2px; margin: 0 auto 4px; }
.hondo-bundle__pick-title { font-size: 9px; font-weight: 600; color: #333333; margin: 0 0 2px; line-height: 1.3; }
.hondo-bundle__pick-price { font-size: 9px; color: #666666; margin: 0; }
.hondo-bundle__cta { display: flex; flex-direction: column; gap: 8px; }
.hondo-bundle__add-all { width: 100%; }
.hondo-bundle__add-all:disabled { opacity: 0.45; cursor: not-allowed; }
.hondo-bundle__single-link { text-align: center; font-size: 11px; color: #666666; text-decoration: underline; cursor: pointer; display: block; }
.hondo-bundle__single-link:hover { color: #111111; }

/* -----------------------------------------------
   14. PDP: VALUE PROP ICONS (product_callouts_mini)
   ThrillX Suggestion 04
   ----------------------------------------------- */
.product__callouts-mini-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #333333;
  letter-spacing: 0.02em;
}
.product__callouts-mini-item .product__callouts-item-icon,
.product__callouts-mini-item .icon-editorial {
  width: 18px;
  height: 18px;
  color: #111111;
  flex-shrink: 0;
}

/* ================================================================
   BEBAS NEUE + OSWALD + CHIVO — Brand Typography
   Bebas Neue: Poncho-style compressed display headings
   Oswald: Section headings and product titles
   Chivo: Marshwear-style body text — geometric, warm, readable
   ================================================================ */

/* Override Stiletto theme font variables */
:root {
  --font-heading-family: 'Bebas Neue', 'Impact', sans-serif;
  --font-body-family: 'Chivo', sans-serif;
}

/* Hero / H1 display headings — Bebas Neue */
h1,
.image-hero__heading,
.collection-hero__heading,
.scrolling-content__text {
  font-family: 'Bebas Neue', 'Impact', sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* Section headings H2 — Bebas Neue */
h2,
.featured-collection__heading,
.grid__heading,
.multi-column__heading,
[class*="__heading"] {
  font-family: 'Bebas Neue', 'Impact', sans-serif;
  font-weight: 400;
  letter-spacing: 0.03em;
}

/* Sub-headings H3–H6 and product titles — Oswald */
h3, h4, h5, h6,
.product-item__product-title,
.product__title,
.image-with-text__heading,
.collapsible-row-list__heading,
[class*="__title"] {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Navigation — Oswald medium */
.nav__link,
.header__nav-link,
[class*="nav__"] a,
[class*="header__"] a,
.announcement-bar {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* Body text, descriptions, policies — Chivo */
body,
p,
.rte,
.product__description,
.product__policies,
.footer {
  font-family: 'Chivo', sans-serif;
  font-weight: 400;
}

/* Buttons — Oswald bold */
.btn,
button,
[type="submit"],
.product-item__atc-banner button,
.product-item__atc-banner .btn {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* Price / meta text — Chivo medium */
.product-item__price,
.product__price,
.price,
.product-item__product-vendor {
  font-family: 'Chivo', sans-serif;
  font-weight: 500;
}

/* ================================================================
   MOBILE FIX: PERSISTENT ATC BANNER
   The theme hides .product-item__hover-action-wrap on mobile via
   opacity:0/visibility:hidden and suppresses [data-quick-shop-trigger]
   buttons inside .product-item__meta at max-width 719px.
   These overrides force the banner visible on all screen sizes.
   ================================================================ */

/* Force banner visible on ALL screen sizes — override theme defaults */
.product-item__hover-action-wrap.product-item__atc-banner,
.product-item__atc-banner {
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  padding: 0;
  transition: none !important;
}

/* Override the hover-triggered reveal — keep banner always on */
.product-item__inner:hover .product-item__hover-action-wrap.product-item__atc-banner,
.product-item__inner:focus-within .product-item__hover-action-wrap.product-item__atc-banner {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Override the mobile rule that hides [data-quick-shop-trigger] buttons */
@media (max-width: 719px) {
  .product-item__atc-banner .btn[data-quick-shop-trigger],
  .product-item__hover-action-wrap.product-item__atc-banner .btn[data-quick-shop-trigger],
  .product-item__atc-banner button[data-quick-shop-trigger] {
    display: block !important;
    width: 100% !important;
  }

  /* Ensure the banner itself is never hidden on mobile */
  .product-item__hover-action-wrap.product-item__atc-banner {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Touch devices: keep banner visible (no hover state on mobile) */
@media (hover: none) {
  .product-item__hover-action-wrap.product-item__atc-banner,
  .product-item__atc-banner {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ================================================================
   MOBILE TAP-TO-REVEAL ATC BANNER
   On touch devices: banner hidden by default, revealed on first tap.
   JS adds .hondo-touch to <html> and .hondo-banner-revealed to card.
   On desktop (hover: hover): banner shown on CSS hover as normal.
   ================================================================ */

/* DESKTOP: hover-driven banner (unchanged behaviour) */
@media (hover: hover) and (pointer: fine) {
  .product-item__hover-action-wrap.product-item__atc-banner,
  .product-item__atc-banner {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .product-item__inner:hover .product-item__hover-action-wrap.product-item__atc-banner,
  .product-item__inner:hover .product-item__atc-banner,
  .product-item__inner:focus-within .product-item__hover-action-wrap.product-item__atc-banner,
  .product-item__inner:focus-within .product-item__atc-banner {
    opacity: 1;
    visibility: visible;
  }
}

/* MOBILE: banner hidden by default, revealed on tap via JS class */
html.hondo-touch .product-item__hover-action-wrap.product-item__atc-banner,
html.hondo-touch .product-item__atc-banner {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.18s ease, visibility 0.18s ease !important;
}

html.hondo-touch .product-item.hondo-banner-revealed .product-item__hover-action-wrap.product-item__atc-banner,
html.hondo-touch .product-item.hondo-banner-revealed .product-item__atc-banner {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Override the broad mobile force-visible rules we added earlier */
@media (hover: none) {
  .product-item__hover-action-wrap.product-item__atc-banner,
  .product-item__atc-banner {
    opacity: 0;
    visibility: hidden;
  }
}

/* Also undo the broad !important overrides from the previous mobile fix */
@media (max-width: 719px) {
  .product-item__atc-banner .btn[data-quick-shop-trigger],
  .product-item__hover-action-wrap.product-item__atc-banner .btn[data-quick-shop-trigger],
  .product-item__atc-banner button[data-quick-shop-trigger] {
    display: block;
    width: 100%;
  }
}

/* ================================================================
   HIDE HOVERLESS QUICK-VIEW / ADD-TO-CART ICON BUTTON
   The floating cart/eye icon on product cards is redundant now
   that we have the persistent ATC banner. Hide it site-wide.
   ================================================================ */

.product-item__hoverless-quick-view-button {
  display: none !important;
}

/* ================================================================
   MOBILE "+" CIRCLE ICON BUTTON (hondo-mobile-atc)
   Always visible on mobile/touch, hidden on desktop.
   Desktop uses the hover banner instead.
   ================================================================ */

/* Container — positioned bottom-right of the card image */
.hondo-mobile-atc {
  display: none; /* hidden by default, shown on touch via media query */
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 20;
}

/* Show ONLY on touch/mobile devices */
@media (hover: none), (pointer: coarse) {
  .hondo-mobile-atc {
    display: block;
  }
}

/* The icon button itself */
.hondo-mobile-atc__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  background-color: #111111;
  color: #ffffff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: background-color 0.15s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.hondo-mobile-atc__btn:active {
  background-color: #333333;
  transform: scale(0.93);
}

/* SVG icon sizing */
.hondo-mobile-atc__btn svg {
  width: 20px;
  height: 20px;
  stroke: #ffffff;
  flex-shrink: 0;
}

/* Sold out state — greyed out, minus sign */
.hondo-mobile-atc__btn--sold-out {
  background-color: #999999;
  cursor: not-allowed;
}

/* Form wrapper — no extra spacing */
.hondo-mobile-atc__form {
  display: block;
  margin: 0;
  padding: 0;
}

/* ================================================================
   DESKTOP: HOVER BANNER — restore clean hover-only behaviour.
   Remove the tap-to-reveal JS class dependency on desktop.
   ================================================================ */

/* Desktop hover banner: hidden by default, shown on hover */
@media (hover: hover) and (pointer: fine) {
  .product-item__hover-action-wrap.product-item__atc-banner,
  .product-item__atc-banner {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
  }

  .product-item__inner:hover .product-item__hover-action-wrap.product-item__atc-banner,
  .product-item__inner:hover .product-item__atc-banner,
  .product-item__inner:focus-within .product-item__hover-action-wrap.product-item__atc-banner,
  .product-item__inner:focus-within .product-item__atc-banner {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Hide the mobile icon button on desktop */
  .hondo-mobile-atc {
    display: none !important;
  }
}

/* Touch/mobile: hide the full banner entirely — icon button is used instead */
@media (hover: none), (pointer: coarse) {
  .product-item__hover-action-wrap.product-item__atc-banner,
  .product-item__atc-banner {
    display: none !important;
  }
}

/* ================================================================
   HONDO HAT CO. — CUSTOM PRODUCT BADGES
   Poncho-inspired: small rounded rectangle, top-left of card image,
   Bebas Neue font, brand-matched color palette.

   Badge colors:
     Best Seller  — warm tan/gold  #8B6914  (white text)
     New          — charcoal black #111111  (white text)
     Pre-Order    — slate blue     #2C3E50  (white text)
     Buy 2 Get 1  — brand red      #c0392b  (white text)
     Sold Out     — mid grey       #888888  (white text)
     Sale         — brand red      #c0392b  (white text)
   ================================================================ */

/* ================================================================
   MOBILE "+" ICON BUTTON — UPDATED BRAND COLORS
   Uses the store's warm tan/cream background (#DAD0C9) with
   deep charcoal icon for strong contrast.
   On hover/active: inverts to charcoal bg + white icon.
   ================================================================ */

.hondo-mobile-atc__btn {
  background-color: #DAD0C9 !important;
  color: #111111 !important;
  border: 1.5px solid rgba(0,0,0,0.12) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.20) !important;
}

.hondo-mobile-atc__btn svg {
  stroke: #111111 !important;
}

.hondo-mobile-atc__btn:active {
  background-color: #111111 !important;
  border-color: #111111 !important;
}

.hondo-mobile-atc__btn:active svg {
  stroke: #DAD0C9 !important;
}

/* Sold out state — muted warm grey */
.hondo-mobile-atc__btn--sold-out {
  background-color: #c8bfb8 !important;
  border-color: transparent !important;
  cursor: not-allowed !important;
}

.hondo-mobile-atc__btn--sold-out svg {
  stroke: #888888 !important;
}

/* ================================================================
   MOBILE "+" ICON BUTTON — BRAND COLORS (corrected size)
   Reduced to 30px to avoid overlapping card images.
   Warm cream bg (#DAD0C9) with charcoal icon for contrast.
   ================================================================ */

.hondo-mobile-atc__btn {
  width: 30px !important;
  height: 30px !important;
  background-color: #DAD0C9 !important;
  color: #111111 !important;
  border: 1.5px solid rgba(0,0,0,0.10) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.18) !important;
}

.hondo-mobile-atc__btn svg {
  width: 16px !important;
  height: 16px !important;
  stroke: #111111 !important;
}

.hondo-mobile-atc__btn:active {
  background-color: #111111 !important;
  border-color: #111111 !important;
}

.hondo-mobile-atc__btn:active svg {
  stroke: #DAD0C9 !important;
}

/* Sold out — muted, non-interactive */
.hondo-mobile-atc__btn--sold-out {
  background-color: #c8bfb8 !important;
  border-color: transparent !important;
  cursor: not-allowed !important;
}

.hondo-mobile-atc__btn--sold-out svg {
  stroke: #999999 !important;
}

/* ================================================================
   HONDO HAT CO. — FLUSH CORNER PRODUCT BADGES (Marshwear style)
   Badge sits flush into the top-left corner of the card image.
   No border-radius on the corner touching the image edge.
   Only the outer two corners are rounded for a clean finish.
   Bebas Neue font, brand color palette.
   ================================================================ */

/* Base badge — font, color, size */
.product-badge {
  font-family: 'Bebas Neue', 'Oswald', sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 5px 9px 4px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  pointer-events: none !important;
  border: none !important;
  border-radius: 0 0 3px 0 !important; /* only bottom-right rounded — top-left flush to corner */
  box-shadow: 1px 1px 4px rgba(0,0,0,0.12) !important;
  margin: 0 !important;
}

/* Badge container — flush to top-left corner of card image */
.product-item .product-badges {
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  align-items: flex-start !important;
}

/* Stack multiple badges — each one sits below the previous, flush left */
.product-item .product-badges .product-badge + .product-badge {
  margin-top: 2px !important;
  border-radius: 0 3px 3px 0 !important; /* second badge: left edge flush, right side rounded */
}

/* BEST SELLER — warm gold */
.product-badge[data-handle="best-seller"] {
  background-color: #8B6914 !important;
  color: #ffffff !important;
}

/* NEW — deep charcoal */
.product-badge[data-handle="new"] {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}

/* PRE-ORDER — slate */
.product-badge[data-handle="pre-order"] {
  background-color: #2C3E50 !important;
  color: #ffffff !important;
}

/* BUY 2 GET 1 FREE — brand red */
.product-badge[data-handle="buy-2-get-1-free"] {
  background-color: #c0392b !important;
  color: #ffffff !important;
  font-size: 11px !important;
}

/* SALE badge */
.product-badge--sale {
  background-color: #c0392b !important;
  color: #ffffff !important;
  border-color: transparent !important;
  font-family: 'Bebas Neue', 'Oswald', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  padding: 5px 9px 4px !important;
  border-radius: 0 0 3px 0 !important;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.12) !important;
  margin: 0 !important;
}

/* SOLD OUT badge — hidden (disabled in settings, but CSS fallback) */
.product-badge--sold-out {
  display: none !important;
}

/* ================================================================
   MOBILE: PRODUCT CARD META SPACING FIX
   Tighten and even out the spacing between badge, title, and price
   on small screens only. Desktop is untouched.
   ================================================================ */
@media (max-width: 719px) {

  /* Meta container — reduce top/bottom padding */
  .product-item__meta {
    padding: 0 !important;
  }

  /* Text block — even top margin, tighter bottom */
  .product-item__text {
    margin: 8px 6px 6px !important;
  }

  /* Consistent gap between every child element in the text block */
  .product-item__text > *:not(:empty) {
    margin-bottom: 4px !important;
  }

  /* Product title — tighter line height on small screens */
  .product-item__product-title {
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin-bottom: 3px !important;
  }

  /* Vendor — slightly smaller, consistent gap */
  .product-item__product-vendor {
    font-size: 11px !important;
    margin-bottom: 3px !important;
  }

  /* Star rating row — keep compact */
  .product-item__text .product-rating,
  .product-item__text .product-item__rating {
    margin-bottom: 3px !important;
  }

  /* Price — no extra margin, sits cleanly below title */
  .product-item__price {
    font-size: 13px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  /* Swatch count — small and tight */
  .product-item__swatch-count {
    font-size: 11px !important;
    margin-top: 2px !important;
    margin-bottom: 0 !important;
  }

  /* Badge container — stays flush to corner, no extra margin */
  .product-item .product-badges {
    top: 0 !important;
    left: 0 !important;
  }
}
/* HONDO HERO — Option A: Full Overlay */
.hondo-hero { position: relative; width: 100%; margin: 0; padding: 0; }
.shopify-section:has(.hondo-hero) { margin: 0 !important; padding: 0 !important; }
.hondo-hero__image-wrap { position: relative; width: 100%; line-height: 0; overflow: hidden; margin: 0; padding: 0; }

/* Mobile: 40vh */
.hondo-hero__image img, .hondo-hero__image svg {
  width: 100%;
  height: 40vh;
  display: block;
  object-fit: cover;
  object-position: center top;
  margin: 0;
  padding: 0;
}

/* Desktop only: 50vh */
@media screen and (min-width: 1025px) {
  .hondo-hero__image img,
  .hondo-hero__image svg {
    height: 50vh !important;
  }
}

.hondo-hero__image--mobile { display: block; }
.hondo-hero__image--desktop.hondo-hero__image--hide-mobile { display: none; }
@media (min-width: 720px) {
  .hondo-hero__image--mobile { display: none; }
  .hondo-hero__image--desktop.hondo-hero__image--hide-mobile { display: block; }
}
.hondo-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, transparent 40%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
.hondo-hero__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 20px 18px;
  z-index: 2;
  text-align: left;
}
@media (min-width: 720px) {
  .hondo-hero__content { padding: 60px 48px 28px; max-width: 700px; }
}
.hondo-hero__social-proof { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hondo-hero__stars { display: flex; align-items: center; gap: 2px; }
.hondo-hero__social-text { font-family: 'Chivo', sans-serif; font-size: 13px; font-weight: 500; color: #F7F2E8; }
.hondo-hero__heading { font-family: 'Bebas Neue', sans-serif; font-size: clamp(30px, 7vw, 56px); line-height: 1.0; letter-spacing: 0.02em; color: #F7F2E8; margin: 0 0 8px; text-transform: uppercase; }
.hondo-hero__subheading { font-family: 'Chivo', sans-serif; font-size: 13px; line-height: 1.5; color: rgba(247,242,232,0.88); margin: 0 0 14px; max-width: 460px; }
.hondo-hero__cta {
  display: inline-block;
  width: 100%;
  padding: 14px 24px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 17px;
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease;
  margin-bottom: 12px;
  background: #111111;
  color: #F7F2E8;
  border: 2px solid #111111;
  box-shadow: none;
}
.hondo-hero__cta:hover,
.hondo-hero__cta:focus,
.hondo-hero__cta:visited { color: #F7F2E8; opacity: 0.85; transform: translateY(-1px); }
@media (min-width: 720px) { .hondo-hero__cta { width: auto; min-width: 260px; padding: 14px 36px; font-size: 19px; } }
.hondo-hero__fuds { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 2px; }
.hondo-hero__fud { display: flex; align-items: center; gap: 5px; font-family: 'Chivo', sans-serif; font-size: 12px; font-weight: 500; color: rgba(247,242,232,0.9); }
.hondo-hero__fud svg { flex-shrink: 0; color: #F7F2E8; }
/* END HONDO HERO */
/* HONDO COLLECTION BANNER */
.hondo-cb__overlay {
  background: linear-gradient(to bottom, transparent 0%, transparent 35%, rgba(0,0,0,0.65) 100%) !important;
}
.hondo-cb__content { text-align: left !important; }
.hondo-cb__social-proof { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.hondo-cb__stars { display: flex; align-items: center; gap: 2px; }
.hondo-cb__social-text { font-family: 'Chivo', sans-serif; font-size: 13px; font-weight: 500; color: #F7F2E8; }
.hondo-cb__heading { font-family: 'Bebas Neue', sans-serif !important; font-size: clamp(30px, 7vw, 56px) !important; line-height: 1.0 !important; letter-spacing: 0.02em !important; color: #F7F2E8 !important; margin: 0 0 8px !important; text-transform: uppercase !important; }
.hondo-cb__subheading { font-family: 'Chivo', sans-serif; font-size: 13px; line-height: 1.5; color: rgba(247,242,232,0.88); margin: 0 0 14px; max-width: 460px; }
.hondo-cb__cta { display: inline-block; padding: 13px 28px; font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: 0.1em; text-align: center; text-decoration: none; text-transform: uppercase; border-radius: 2px; cursor: pointer; transition: opacity 0.2s ease, transform 0.15s ease; margin-bottom: 12px; background: #111111; color: #F7F2E8; border: 2px solid #111111; box-shadow: none; }
.hondo-cb__cta:hover, .hondo-cb__cta:focus, .hondo-cb__cta:visited { color: #F7F2E8; opacity: 0.85; transform: translateY(-1px); }
@media (min-width: 720px) { .hondo-cb__cta { min-width: 220px; padding: 13px 36px; font-size: 18px; } }
.hondo-cb__fuds { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 2px; }
.hondo-cb__fud { display: flex; align-items: center; gap: 5px; font-family: 'Chivo', sans-serif; font-size: 12px; font-weight: 500; color: rgba(247,242,232,0.9); }
.hondo-cb__fud svg { flex-shrink: 0; color: #F7F2E8; }
/* END HONDO COLLECTION BANNER */
/* Remove padding from collection banner */
.collection-section,
.template-collection .shopify-section:first-child,
[data-section-type="collection-banner"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Force quick cart on mobile instead of redirecting to cart page */
@media screen and (max-width: 1024px) {
  [data-add-to-cart-redirect] {
    display: none !important;
  }
}
.hondo-b2g1 { background: #1a1a1a; border-radius: 6px; margin: 12px 0 8px; padding: 12px 16px; }
.hondo-b2g1__inner { display: flex; align-items: center; gap: 12px; }
.hondo-b2g1__icon { font-size: 22px; flex-shrink: 0; }
.hondo-b2g1__text { flex: 1; min-width: 0; }
.hondo-b2g1__msg { font-family: 'Chivo', sans-serif; font-size: 13px; line-height: 1.4; color: #F7F2E8; display: block; }
.hondo-b2g1__msg strong { color: #E8A020; }
.hondo-b2g1__msg--unlocked { color: #7fd17f; }
.hondo-b2g1__pips { display: flex; gap: 6px; flex-shrink: 0; }
.hondo-b2g1__pip { width: 11px; height: 11px; border-radius: 50%; background: #444; transition: background 0.25s ease; }
.hondo-b2g1__pip--filled { background: #E8A020; }
/* HONDO CART IMAGE BACKGROUND + SIZING + SHADOW */
/* Fix: outer wrapper stretches with row height — constrain to image size */
.quick-cart__item-image,
.cart__form-item-image {
  align-self: flex-start;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  background-color: #DAD0C9;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10),
              0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Inner link: match image dimensions exactly */
.quick-cart__item-image .quick-cart__item-link,
.cart__form-item-image .cart__form-item-link {
  display: block;
  background-color: #DAD0C9;
  border-radius: 4px;
  overflow: hidden;
}

/* Drop-shadow on the hat image itself (follows PNG shape, not bounding box) */
.quick-cart__item-image img.image__img,
.cart__form-item-image img.image__img {
  filter: drop-shadow(0px 8px 12px rgba(0, 0, 0, 0.22))
          drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.14))
          drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.08));
  display: block;
}
/* END HONDO CART IMAGE BACKGROUND + SIZING + SHADOW */
/* HONDO MOBILE NAV CHEVRONS */
/* Regular links (data-item="link") have no icon — add right-pointing chevron via ::after */
.drawer-menu__link[data-item="link"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.drawer-menu__link[data-item="link"]::after {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
  opacity: 0.5;
}

/* Parent links already have a chevron icon but it points down — rotate it to point right */
.drawer-menu__link[data-item="parent"] .menu-icon {
  transform: rotate(-90deg) !important;
}
/* END HONDO MOBILE NAV CHEVRONS */
/* HONDO NAV IMAGE SQUARES */
.hondo-nav-squares {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px 20px 20px;
}

.hondo-nav-square {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.hondo-nav-square__img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background-color: #DAD0C9;
  position: relative;
}

.hondo-nav-square__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.hondo-nav-square:hover .hondo-nav-square__img-wrap img,
.hondo-nav-square:active .hondo-nav-square__img-wrap img {
  transform: scale(1.04 );
}

/* Shop Now button overlaid on the image */
.hondo-nav-square__btn {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #f7f2e8;
  color: #111;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 2px;
  white-space: nowrap;
  pointer-events: none;
}

/* Label below the image — match nav link size */
.hondo-nav-square__label {
  display: block;
  text-align: center;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 8px 4px 2px;
  color: #111;
}
/* END HONDO NAV IMAGE SQUARES */