/** Shopify CDN: Minification failed

Line 915:0 All "@import" rules must come first
Line 1684:0 All "@import" rules must come first

**/
/* Crazy Joe Custom CSS */

/* ================================
   NEWSLETTER
   ================================ */
.newsletter-section__content {
  padding-left: 20px;
}

/* ================================
   SECTION HEADER
   ================================ */
.section-header__link {
  margin-top: 15px;
}

/* ================================
   HERO
   ================================ */
.hero__subtitle {
  margin-bottom: 5px;
  margin-top: 5px;
}

/* ================================
   ANNOUNCEMENT BAR
   ================================ */
.announcement-bar {
  font-size: 14px;
  letter-spacing: 0.03em;
  font-weight: 400;
}

.announcement-text {
  font-size: 14px;
  letter-spacing: 0.03em;
  font-weight: 400;
  opacity: 0.85;
}

.announcement-link-text {
  font-size: 14px;
  letter-spacing: 0.03em;
  font-weight: 700;
}

.announcement-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media only screen and (min-width: 769px) {
  .mobile {
    display: none;
  }
}

/* ================================
   PRODUCT GRID
   ================================ */
.grid-product__price--savings {
  white-space: nowrap;
}

.grid-overflow-wrapper .grid__item--view-all {
  align-self: center;
}

.grid-product__see-all {
  border: 1px solid;
  border-color: var(--colorBorder);
  display: inline-block;
  margin-top: -60px;
  padding: 15px;
  text-align: center;
}

/* Equal height rows — cards stretch to tallest in row */
body.template-collection .grid--uniform {
  list-style: none;
  margin: 0 0 0 -22px;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}

/* Each card fills its row height and stacks content */
body.template-collection .grid__item.grid-product {
  display: flex;
  flex-direction: column;
}

body.template-collection .grid-product__content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Image wrapper fixed square ratio — all images same height */
body.template-collection .grid__item-image-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}

body.template-collection .grid-product__image-mask {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  height: 0;
  overflow: hidden;
}

body.template-collection .grid-product__image-mask > *:not(.mmcc-badges):not(.mmcc-sold-out-bar) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Product meta — title always starts at same point below image */
body.template-collection .grid-product__link {
  display: block;
}

body.template-collection .grid-product__meta {
  padding-top: 10px;
}

/* ================================
   COLLECTION PAGE
   ================================ */
.collection-content .page-width {
  max-width: 100%;
}

body.template-collection {
  background: #fff;
  color: #000;
}

/* ================================
   SIDEBAR
   ================================ */
#CollectionSidebar {
  font-size: 14px;
}

/* ================================
   PRODUCT CARD
   ================================ */
.image-wrap {
  background: #fff;
}

a .grid-product__title {
  color: #000;
  font-size: 14px;
}

.grid-product__content {
  text-align: center;
}

.grid-product__vendor {
  font-size: 14px;
  letter-spacing: 1px;
}

.grid-product__tag--sale {
  display: none !important;
}

.grid-product__price {
  display: grid;
  font-weight: bold;
  font-size: 24px;
}

span.grid-product__price--original {
  font-size: 16px;
  font-weight: normal;
}

.grid-product__price--savings {
  font-size: 16px;
  font-weight: normal;
}

/* ================================
   PRODUCT PAGE
   ================================ */
.page-content--product {
  padding-top: 15px;
}

.product-block--header {
  margin-bottom: 0px;
}

.variant-wrapper {
  margin-top: 15px;
}

.page-width.page-width--narrow {
  max-width: 100%;
}

.reset_FdotBaucMXWPOHoVcQJ5.button_vjLKAWPlRTw1UzaYyjDf {
    font-size: 14px !important;
    letter-spacing: 2px !important;
}

div#polls-platform-pdp-button {
    width: 300px;
    margin: 0 auto;
}

.ec-form-payment_terms, .afterpay-paragraph, .afterpay-main-text {
    font-size: 12px !important;
}

h1.ecom-product__heading {
    padding-top: 10px;
}

/* ================================
   HEADER
   ================================ */
@media screen and (min-width: 750px) {
  .header-item--icons .js-search-header,
  .header-item--icons .site-nav__link--icon.js-search-header {
    display: none !important;
  }
}

/* ================================
   MMCC PRODUCT BADGES
   ================================ */

/* Badge container — sits inside image mask, top left */
.mmcc-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Base badge — military patch style */
.mmcc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  border-width: 1px;
  border-style: solid;
  width: fit-content;
}

.mmcc-badge svg {
  flex-shrink: 0;
}

/* Badge color variants */
.mmcc-badge--bestseller {
  background: #B8242A;
  border-color: #8a1a1e;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

.mmcc-badge--new {
  background: #1a5c2e;
  border-color: #0f3d1d;
  color: #d4edda;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}

.mmcc-badge--sale {
  background: #d97706;
  border-color: #a35705;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

.mmcc-badge--closeout {
  background: #374151;
  border-color: #1f2937;
  color: #d1d5db;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}

.mmcc-badge--restocked {
  background: #1e3a5f;
  border-color: #112440;
  color: #bfdbfe;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}

/* Sold Out bar — bottom of image, never conflicts with badges */
.mmcc-sold-out-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.62);
  color: #e5e7eb;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .10em;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 0;
}

/* Hide the old badge styles now replaced */
.grid-product__tag--new-arrivals,
.grid-product__tag--best,
.grid-product__tag--closeout,
.grid-product__tag--sold-out {
  display: none !important;
}

/* ================================
   MEGA MENU OVERRIDES
   ================================ */

/* Full-width panel, dark background matching header */
/* ── Megamenu full-width positioning fix ──
   .mmcc-nav-bar is position:relative (1427px wide) — the correct ancestor.
   .site-nav--is-megamenu li must be position:static so the megamenu's
   containing block is the nav bar, not the li/details (87px).
   Then width:100% on .megamenu = 100% of nav bar = full width. */

div#CartDrawer {z-index: 9999;}

.mmcc-nav-bar {
  position: relative;
}

a.cart__item-name {
    font-size: 16px;
    font-weight: 700;
}


.mmcc-nav-bar .site-nav--is-megamenu.site-nav__item,
.mmcc-nav-bar .site-nav__details {
  position: static !important;
}

.megamenu {
  background: #111 !important;
  border-top: 3px solid #880000;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5) !important;
  padding: 32px 0 36px !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  z-index: 50 !important;
}

/* Override the page-width container to go edge-to-edge with padding */
.megamenu .page-width {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 32px;
  box-sizing: border-box;
}

/* Force the inner wrapper and grid to fill full width */
.megamenu .mmcc-megamenu-inner,
.megamenu .mmcc-megamenu-columns,
.megamenu .mmcc-megamenu-columns.grid,
.megamenu .mmcc-megamenu-columns.grid.grid--center {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Replace the old float grid with CSS grid — auto-fills columns */
.megamenu .grid,
.megamenu .mmcc-megamenu-columns {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  gap: 0 20px !important;
  align-items: start !important;
  float: none !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Override float-based one-fifth columns inside our grid */
.megamenu .grid__item.medium-up--one-fifth {
  float: none !important;
  clear: none !important;
  width: auto !important;
  display: block !important;
  padding-left: 16px !important;
  border-left: 1px solid rgba(255,255,255,0.06);
  margin: 0 !important;
}

.megamenu .grid__item.medium-up--one-fifth:first-child {
  border-left: none !important;
  padding-left: 0 !important;
}

/* Inner wrapper — must not collapse to block */
.mmcc-megamenu-inner {
  display: flex !important;
  gap: 0 !important;
  align-items: stretch !important;
  width: 100% !important;
}



/* Column heading (top-level link) */
.megamenu .h5,
.megamenu h5 {
  margin-bottom: 12px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.megamenu .site-nav__dropdown-link--top-level {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  text-decoration: none;
  display: block;
  line-height: 1.4;
}

.megamenu .site-nav__dropdown-link--top-level:hover {
  color: #cc3333 !important;
}

/* Child links */
.megamenu .site-nav__dropdown-link:not(.site-nav__dropdown-link--top-level) {
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: rgba(255,255,255,0.65) !important;
  text-decoration: none;
  display: block;
  padding: 4px 0 !important;
  transition: color 0.15s ease, padding-left 0.15s ease;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.megamenu .site-nav__dropdown-link:not(.site-nav__dropdown-link--top-level):hover {
  color: #fff !important;
  padding-left: 6px !important;
}

/* Divider between child link groups */
.megamenu .grid__item > div {
  line-height: 1;
}

/* Simple dropdowns (non-mega, single column) */
.site-nav__dropdown:not(.megamenu) {
  background: #111 !important;
  border-top: 2px solid #880000 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
  min-width: 220px !important;
  max-width: 420px !important;
  padding: 8px 0 12px !important;
  right: auto !important;
  left: auto !important;
  white-space: nowrap !important;
}

/* Prevent last nav items' dropdown from going off right edge */
.site-nav__item:last-child .site-nav__dropdown:not(.megamenu),
.site-nav__item:nth-last-child(2) .site-nav__dropdown:not(.megamenu) {
  right: 0 !important;
  left: auto !important;
}

.site-nav__dropdown a {
  background: transparent !important;
  color: rgba(255,255,255,0.75) !important;
  font-size: 14px !important;
  padding: 7px 17px 7px 7px !important;
  display: block;
  transition: color 0.15s ease, background 0.15s ease;
}

.site-nav__dropdown a:hover {
  background: rgba(136,0,0,0.2) !important;
  color: #fff !important;
}

/* Deep dropdown (third level) */
.site-nav__deep-dropdown {
  background: #1a1a1a !important;
  border-left: 2px solid #880000 !important;
  box-shadow: 6px 10px 20px rgba(0,0,0,0.3) !important;
}

.site-nav__deep-dropdown a {
  color: rgba(255,255,255,0.7) !important;
  font-size: 14px !important;
  padding: 7px 20px !important;
}

.site-nav__deep-dropdown a:hover {
  background: rgba(136,0,0,0.2) !important;
  color: #fff !important;
}

/* Nav chevron color fix for dark bg */
.site-nav__link .icon-chevron-down path {
  stroke: rgba(255,255,255,0.6) !important;
}

.site-nav__link:hover .icon-chevron-down path {
  stroke: #cc3333 !important;
}

/* Responsive: tighten columns on tablet */
@media only screen and (max-width: 1200px) {
  .mmcc-megamenu-columns.grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
    gap: 0 14px !important;
  }
  .megamenu .site-nav__dropdown-link--top-level {
    font-size: 10px !important;
  }
}

@media only screen and (max-width: 768px) {
  .megamenu {
    display: none !important;
  }

  /* Disable sticky collection filter on mobile */
  .collection-filter {
    position: static;
  }

  /* Product title font size on mobile */
  #shopify-section-template--21944401035520__main h1.product-single__title {
    font-size: 20px;
  }

  /* Variant button label font size on mobile */
  label.variant__button-label {
    font-size: 16px;
  }
}

/* ================================
   MOBILE DRAWER NAV
   ================================ */

/* Drawer panel itself */
#NavDrawer.drawer {
  background: #111 !important;
  border-right: 3px solid #880000;
  z-index: 99999 !important;
}

/* Drawer overlay sits above sticky header */
#NavDrawer ~ .js-drawer-close,
.drawer-overlay,
.js-drawer-open ~ .site-header,
body.js-drawer-open #MmccStickyHeader {
  z-index: 9998 !important;
}

#NavDrawer .drawer__fixed-header {
  background: #111 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 16px 20px;
}

#NavDrawer .drawer__close-button {
  color: rgba(255,255,255,0.6);
  background: transparent;
  border: none;
}

#NavDrawer .drawer__close-button:hover {
  color: #fff;
}

#NavDrawer .drawer__close-button .icon {
  stroke: currentColor;
  width: 22px;
  height: 22px;
}

#NavDrawer .drawer__scrollable {
  background: #111 !important;
}

/* Top-level nav items */
#NavDrawer .mobile-nav__link--top-level {
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  display: block;
}

#NavDrawer .mobile-nav__link--top-level:hover,
#NavDrawer .mobile-nav__link--top-level[data-active] {
  color: #cc2222 !important;
  background: rgba(136,0,0,0.1) !important;
}

/* Collapsible toggle button (top-level items with children) */
#NavDrawer .mobile-nav__has-sublist {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

#NavDrawer .mobile-nav__has-sublist .mobile-nav__link--top-level {
  border-bottom: none !important;
  flex: 1;
}

#NavDrawer .mobile-nav__toggle {
  display: flex;
  align-items: center;
  padding: 0 20px;
}

#NavDrawer .mobile-nav__toggle .faux-button {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.5) !important;
}

#NavDrawer .mobile-nav__toggle .faux-button:hover {
  color: #fff !important;
}

/* Collapsible icon colors */
#NavDrawer .collapsible-icons-alt svg,
#NavDrawer .icon-chevron-down path,
#NavDrawer .icon-plus path,
#NavDrawer .icon-minus path {
  stroke: rgba(255,255,255,0.5) !important;
}

/* Child links (second level) */
#NavDrawer .mobile-nav__sublist {
  background: #181818 !important;
  border-left: 3px solid #880000;
  margin-left: 0 !important;
}

#NavDrawer .mobile-nav__link {
  font-size: 14px !important;
  color: rgba(255,255,255,0.7) !important;
  padding: 10px 20px 10px 24px !important;
  display: block;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

#NavDrawer .mobile-nav__link:hover,
#NavDrawer .mobile-nav__link[data-active] {
  color: #fff !important;
  background: rgba(136,0,0,0.15) !important;
}

/* Grandchild links (third level) */
#NavDrawer .mobile-nav__grandchildlist {
  background: #1e1e1e !important;
}

#NavDrawer .mobile-nav__grandchildlist .mobile-nav__link {
  font-size: 13px !important;
  padding-left: 36px !important;
  color: rgba(255,255,255,0.55) !important;
}

#NavDrawer .mobile-nav__grandchildlist .mobile-nav__link:hover {
  color: #fff !important;
}

/* Secondary nav items (account/toolbar) */
#NavDrawer .mobile-nav__item--secondary {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 12px 20px;
}

#NavDrawer .mobile-nav__item--secondary .mobile-nav__link {
  font-size: 13px !important;
  color: rgba(255,255,255,0.5) !important;
  padding: 8px 0 !important;
  border-bottom: none !important;
}

#NavDrawer .mobile-nav__item--secondary .mobile-nav__link:hover {
  color: #fff !important;
  background: transparent !important;
}

/* Social icons in drawer */
#NavDrawer .mobile-nav__social {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 16px 20px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

#NavDrawer .mobile-nav__social-item a {
  color: rgba(255,255,255,0.4) !important;
  display: flex;
  align-items: center;
}

#NavDrawer .mobile-nav__social-item a:hover {
  color: rgba(255,255,255,0.9) !important;
}

#NavDrawer .mobile-nav__social .icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* ================================
   FOOTER MENU
   ================================ */

.site-footer__linklist {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.site-footer__linklist li {
  margin-bottom: 6px;
}

.site-footer__linklist a {
  font-size: 14px !important;
  color: rgba(255,255,255,0.6) !important;
  text-decoration: none;
  transition: color 0.15s ease, padding-left 0.15s ease;
  display: inline-block;
}

.site-footer__linklist a:hover {
  color: #fff !important;
  padding-left: 4px;
}

.footer__title {
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin-bottom: 14px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Footer collapsible toggle on mobile */
button.footer__title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

button.footer__title:hover {
  color: #cc2222 !important;
}

/* ================================
   COLLECTION BOTTOM CONTENT / FAQ
   ================================ */

.collection-bottom-content {
  max-width: 900px;
  margin: 48px auto;
  padding: 0 24px 48px;
}

/* Main FAQ heading */
.collection-bottom-content h2 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--colorTextBody);
  margin-bottom: 6px;
  padding-bottom: 12px;
  border-bottom: 3px solid #880000;
  display: inline-block;
}

/* Intro paragraph under heading */
.collection-bottom-content > p {
  font-size: 15px;
  color: var(--colorTextBody);
  opacity: 0.75;
  margin: 12px 0 28px;
  line-height: 1.6;
}

/* FAQ question headings */
.collection-bottom-content h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--colorTextBody);
  margin: 0;
  padding: 16px 40px 16px 0;
  cursor: pointer;
  position: relative;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  line-height: 1.4;
}

/* Plus/minus indicator on questions */
.collection-bottom-content h3::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 400;
  color: #880000;
  line-height: 1;
}

/* Answer paragraphs */
.collection-bottom-content p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--colorTextBody);
  opacity: 0.8;
  margin: 0;
  padding: 14px 0 18px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}

/* Remove bottom border from last item */
.collection-bottom-content p:last-child {
  border-bottom: none;
}

/* Responsive */
@media screen and (max-width: 768px) {
  .collection-bottom-content {
    padding: 0 16px 32px;
    margin: 32px auto;
  }
  .collection-bottom-content h2 {
    font-size: 18px;
  }
  .collection-bottom-content h3 {
    font-size: 13px;
    padding: 14px 36px 14px 0;
  }
  .collection-bottom-content p {
    font-size: 14px;
  }
}

/* ================================
   NAV PROMO PANELS
   ================================ */

@import url('https://fonts.googleapis.com/css2?family=Francois+One&display=swap');

/* Promo panels wrapper — flex row of panels */
.mmcc-promo-panels-wrap {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin-left: 20px;
  border-left: 1px solid rgba(255,255,255,0.07);
  padding-left: 20px;
  flex-shrink: 0;
}

/* All panels fixed square size — never shrink */
.mmcc-promo-panel {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  flex: 0 0 260px;
  width: 260px;
}

/* Image is always a square */
.mmcc-promo-panel__image {
  width: 260px;
  height: 260px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  display: block;
}

.mmcc-promo-panel__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 4px;
  transition: transform 0.3s ease;
}

.mmcc-promo-panel:hover .mmcc-promo-panel__image img {
  transform: scale(1.03);
}

.mmcc-promo-panel__image--placeholder {
  background: #1a0000;
  width: 260px;
  height: 260px;
}

/* Content overlays the image */
.mmcc-promo-panel__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.65) 50%, transparent 100%);
  border-radius: 0 0 4px 4px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  gap: 6px;
}

.mmcc-promo-panel__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #cc3333;
  display: block;
}

.mmcc-promo-panel__heading {
  font-family: "Francois One", sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  line-height: 1.15;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 0;
}

.mmcc-promo-panel__subtext {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
  margin: 0;
}

.mmcc-promo-panel__btn {
  display: inline-block;
  margin-top: 8px;
  width: fit-content;
}

/* Override theme font size on all nav dropdown links */
.site-nav__dropdown a {
  font-size: 16px !important;
}

/* Override .site-nav__dropdown a that overwrites .btn inside nav */
.site-nav__dropdown a.btn {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: var(--colorBtnPrimary) !important;
  border: 1px solid transparent;
  border-radius: var(--buttonRadius);
  color: var(--colorBtnPrimaryText) !important;
  cursor: pointer;
  display: inline-block;
  font-size: max(calc(var(--typeBaseSize) - 4px), 13px);
  font-weight: 700;
  letter-spacing: 0px;
  line-height: 1.42;
  margin: 0;
  min-width: 90px;
  padding: 11px 20px;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
  user-select: none;
  vertical-align: middle;
  white-space: normal;
  width: auto;
}

.site-nav__dropdown a.btn:hover {
  background-color: var(--colorBtnPrimary) !important;
  color: var(--colorBtnPrimaryText) !important;
  padding-left: 20px !important;
}

/* Responsive */
/* Hide extra panels when screen gets tight — never shrink */
@media screen and (max-width: 1500px) {
  .mmcc-promo-panels--3 .mmcc-promo-panel:last-child { display: none; }
}

@media screen and (max-width: 1300px) {
  .mmcc-promo-panels--2 .mmcc-promo-panel:last-child { display: none; }
  .mmcc-promo-panels--3 .mmcc-promo-panel:nth-child(2),
  .mmcc-promo-panels--3 .mmcc-promo-panel:last-child { display: none; }
}

@media screen and (max-width: 1150px) {
  .mmcc-promo-panels-wrap { display: none !important; }
}

/* ================================
   FLYOUT MEGA MENU STYLING
   ================================ */

/* Left column — dark bg to separate from right panel */
.mmcc-flyout__categories {
  background: #1a1a1a;
  border-right: 3px solid #880000 !important;
  border-radius: 3px 0 0 3px;
  padding: 8px 0 !important;
  gap: 1px !important;
}

.mmcc-flyout__cat-item {
  padding: 11px 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  border-radius: 0 !important;
  border-left: 3px solid transparent !important;
  margin-left: -3px;
  transition: background 0.12s ease, color 0.12s ease, border-left-color 0.12s ease !important;
}

.mmcc-flyout__cat-item:hover {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.9) !important;
  border-left-color: rgba(136,0,0,0.6) !important;
}

.mmcc-flyout__cat-item.is-active {
  background: #880000 !important;
  color: #fff !important;
  border-left-color: #cc0000 !important;
}

.mmcc-flyout__cat-item.is-active .mmcc-flyout__cat-arrow {
  color: rgba(255,255,255,0.7) !important;
  transform: translateX(2px);
}

.mmcc-flyout__cat-item:hover .mmcc-flyout__cat-arrow {
  color: rgba(136,0,0,0.8) !important;
}

/* Right panel */
.mmcc-flyout__panels {
  background: #141414;
  border-radius: 0 3px 3px 0;
  padding: 16px 28px !important;
  align-self: stretch;
}

/* Child links — 16px, red tint on hover */
.mmcc-flyout__child-link {
  font-size: 16px !important;
  color: rgba(255,255,255,0.65) !important;
  padding: 7px 0 !important;
  gap: 0 48px !important;
}

.mmcc-flyout__child-link:hover {
  color: #fff !important;
  padding-left: 6px !important;
  border-bottom-color: rgba(136,0,0,0.4) !important;
}

.mmcc-flyout__panel-grid {
  gap: 0 48px !important;
}

/* Direct links */
.mmcc-flyout__direct-link {
  font-size: 16px !important;
  color: rgba(255,255,255,0.8) !important;
}

.mmcc-flyout__direct-link:hover {
  color: #fff !important;
}

/* ================================
   FEATURED NAV ITEMS
   ================================ */

/* 2nd level featured category (left column) */
.mmcc-flyout__cat-item--featured .mmcc-flyout__cat-label {
  color: var(--item-accent, rgba(255,255,255,0.65));
}

.mmcc-flyout__cat-item--featured.is-active .mmcc-flyout__cat-label,
.mmcc-flyout__cat-item--featured:hover .mmcc-flyout__cat-label {
  color: #fff;
}

/* 3rd level featured child link (right panel) */
.mmcc-flyout__child-link--featured {
  color: var(--item-accent, rgba(255,255,255,0.65)) !important;
  font-weight: 600 !important;
}

.mmcc-flyout__child-link--featured:hover {
  color: #fff !important;
}

/* Badge pill — appears after item text */
.mmcc-nav-feature-badge {
  display: inline-block;
  background: #880000;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 7px;
  vertical-align: middle;
  line-height: 1.4;
  flex-shrink: 0;
}

/* Logo/icon — appears after text and badge */
.mmcc-nav-feature-logo {
  display: inline-block;
  height: 50px;
  width: auto;
  object-fit: contain;
  margin-left: 8px;
  vertical-align: middle;
  opacity: 0.9;
  flex-shrink: 0;
}

/* Ensure cat-item has proper flex alignment for badges/logos */
.mmcc-flyout__cat-item--featured {
  align-items: center;
}

/* Taller row when logo is present */
.mmcc-flyout__cat-item--featured:has(.mmcc-nav-feature-logo),
.mmcc-flyout__child-link--featured:has(.mmcc-nav-feature-logo) {
  min-height: 50px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.mmcc-flyout__child-link--featured {
  display: inline-flex !important;
  align-items: center;
}

/* ================================
   NAV RESPONSIVE — HIDE FIRST ITEM
   ================================ */

/* Hide "New Arrivals" (first nav item) before it wraps to second line.
   Adjust breakpoint if nav items change. */
@media screen and (max-width: 1150px) {
  .site-nav.site-navigation > li.site-nav__item:first-child {
    display: none !important;
  }
}

/* ================================
   GRID MEGA MENU FIXES
   ================================ */

/* Align all grid columns to top — no vertical stretching */
.megamenu .mmcc-megamenu-inner {
  align-items: flex-start !important;
}

.megamenu .mmcc-megamenu-columns,
.megamenu .mmcc-megamenu-columns.grid,
.megamenu .mmcc-megamenu-columns.grid--center {
  align-items: start !important;
}

.megamenu .grid__item.medium-up--one-fifth {
  vertical-align: top !important;
  align-self: flex-start !important;
}

/* Column headings — 16px */
.megamenu .site-nav__dropdown-link--top-level {
  font-size: 16px !important;
}

/* Child links — 16px */
.megamenu .site-nav__dropdown-link:not(.site-nav__dropdown-link--top-level) {
  font-size: 16px !important;
  padding: 5px 0 !important;
  line-height: 1.4 !important;
}

/* Remove extra spacing between h5 heading and first child link */
.megamenu .h5,
.megamenu h5 {
  margin-bottom: 8px !important;
  padding-bottom: 6px !important;
}

/* ================================
   FLYOUT V2 — ICON LEFT COLUMN
   ================================ */

/* Wider left column to fit icon + text */
.mmcc-flyout__categories {
  flex: 0 0 260px !important;
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
}

/* Cat item — flex row with icon slot */
.mmcc-flyout__cat-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 16px 10px 14px !important;
}

/* Icon slot — fixed 36x36 square */
.mmcc-flyout__cat-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}

.mmcc-flyout__cat-item.is-active .mmcc-flyout__cat-icon {
  background: rgba(255,255,255,0.15);
}

.mmcc-flyout__cat-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Placeholder icon — subtle shield shape */
.mmcc-flyout__cat-icon-placeholder {
  display: block;
  width: 18px;
  height: 20px;
  background: rgba(255,255,255,0.15);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.mmcc-flyout__cat-item.is-active .mmcc-flyout__cat-icon-placeholder {
  background: rgba(255,255,255,0.4);
}

/* Label takes remaining space */
.mmcc-flyout__cat-label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ================================
   FLYOUT V2 — GROUPED COLUMNS
   ================================ */

/* Panels wrapper */
.mmcc-flyout__panels {
  padding: 0 !important;
}

.mmcc-flyout__panel {
  padding: 16px 24px 0 !important;
}

/* Column grid — auto columns side by side */
.mmcc-flyout__panel-columns {
  display: flex;
  gap: 0 32px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.mmcc-flyout__col {
  flex: 1 1 160px;
  min-width: 140px;
  max-width: 220px;
}

/* Column heading — red with bottom border */
.mmcc-flyout__col-head {
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(136,0,0,0.5);
}

.mmcc-flyout__col-head-link {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #cc2222 !important;
  text-decoration: none !important;
}

.mmcc-flyout__col-head-link:hover {
  color: #fff !important;
}

.mmcc-flyout__col-links {
  display: flex;
  flex-direction: column;
}

/* ================================
   FLYOUT V2 — DEAL STRIP
   ================================ */

.mmcc-flyout__deal-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 24px 16px;
  padding: 12px 16px;
  background: rgba(136,0,0,0.15);
  border: 1px solid rgba(136,0,0,0.35);
  border-radius: 4px;
  flex-shrink: 0;
}

.mmcc-flyout__deal-strip__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.mmcc-flyout__deal-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #cc3333;
  flex-shrink: 0;
}

.mmcc-flyout__deal-title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.mmcc-flyout__deal-btn {
  flex-shrink: 0;
  background: #880000;
  color: #fff !important;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 3px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.mmcc-flyout__deal-btn:hover {
  background: #aa0000 !important;
}

/* ================================
   FLYOUT V3 — SIMULATED COLUMN HEADINGS
   Column headings are L3 nav items marked via nav_item_feature block
   with is_column_heading = true. They render as red uppercase labels,
   not clickable links, and visually group the links beneath them.
   ================================ */

/* Column heading — span version (URL is #) */
.mmcc-flyout__col-head-label {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #cc2222;
  line-height: 1.2;
  pointer-events: none;
  user-select: none;
}

/* Column heading — link version */
.mmcc-flyout__col-head-link {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #cc2222 !important;
  text-decoration: none !important;
  display: block;
  transition: color 0.15s ease;
}

.mmcc-flyout__col-head-link:hover {
  color: #fff !important;
}

/* Ungrouped col (links before any heading) — no top border */
.mmcc-flyout__col--ungrouped .mmcc-flyout__col-head {
  display: none;
}

/* ================================
   FLYOUT V3 — TABLET BREAKPOINT (768–1023px)
   Left column only. Right panel hidden.
   L2 items link directly to category — no hover panel activation.
   ================================ */

@media screen and (min-width: 768px) and (max-width: 1023px) {

  /* Hide right panel entirely */
  .mmcc-flyout__panels {
    display: none !important;
  }

  /* Hide promo panels */
  .mmcc-promo-panels-wrap {
    display: none !important;
  }

  /* Hide deal strip */
  .mmcc-flyout__deal-strip {
    display: none !important;
  }

  /* Left column takes full width of flyout */
  .mmcc-flyout__categories {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-right: none !important;
    border-radius: 3px !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 2px !important;
    padding: 12px !important;
  }

  /* Each cat item is a solid tile */
  .mmcc-flyout__cat-item {
    border-radius: 4px !important;
    border-left: none !important;
    margin-left: 0 !important;
    background: rgba(255,255,255,0.04) !important;
  }

  .mmcc-flyout__cat-item:hover {
    background: rgba(136,0,0,0.2) !important;
    border-left: none !important;
  }

  .mmcc-flyout__cat-item.is-active {
    background: #880000 !important;
    border-left: none !important;
  }

  /* Hide arrow on tablet — clicking goes straight to page */
  .mmcc-flyout__cat-arrow {
    display: none !important;
  }

  /* Shrink flyout height — no right panel */
  .mmcc-flyout__inner {
    min-height: 0 !important;
  }
}

/* ================================
   FLYOUT V3 — MOBILE (<768px)
   Flyout hidden entirely — drawer takes over.
   (Already handled by existing .megamenu display:none at 768px)
   ================================ */

/* ================================
   FLYOUT V3 — DESKTOP STRUCTURAL FIXES
   Ensure inner layout is correct with the new column heading approach.
   ================================ */

@media screen and (min-width: 1024px) {

  /* Inner flex: left col | right panels | promo */
  .mmcc-flyout__inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    min-height: 320px;
  }

  /* Left column — fixed width */
  .mmcc-flyout__categories {
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    align-self: stretch;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Right panels — fill remaining space */
  .mmcc-flyout__panels {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    position: relative;
    overflow: hidden;
  }

  /* Individual panel — hidden until activated */
  .mmcc-flyout__panel {
    display: none;
    padding: 20px 28px !important;
  }

  .mmcc-flyout__panel.is-active {
    display: block;
  }

  /* Column layout within active panel */
  .mmcc-flyout__panel-columns {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0 40px !important;
    align-items: flex-start !important;
  }

  /* Each column */
  .mmcc-flyout__col {
    flex: 0 0 auto;
    min-width: 130px;
    max-width: 300px;
    margin-bottom: 16px;
  }

  /* Column heading bar */
  .mmcc-flyout__col-head {
    margin-bottom: 8px;
    padding-bottom: 7px;
    border-bottom: 2px solid #880000;
  }

  /* Links stacked in column */
  .mmcc-flyout__col-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Child links */
  .mmcc-flyout__child-link {
    font-size: 14px !important;
    color: rgba(255,255,255,0.65) !important;
    padding: 5px 0 !important;
    display: block;
    text-decoration: none;
    transition: color 0.12s ease, padding-left 0.12s ease;
    white-space: nowrap;
  }

  .mmcc-flyout__child-link:hover {
    color: #fff !important;
    padding-left: 5px !important;
  }

  /* "Shop All" link — first link in any panel, pinned style */
  .mmcc-flyout__child-link--shop-all {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: .04em;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px !important;
    margin-bottom: 8px;
  }

  .mmcc-flyout__child-link--shop-all:hover {
    color: #e8262a !important;
    padding-left: 0 !important;
  }
}

/* =============================================================================
   MMCC HOMEPAGE SECTIONS — custom.css additions
   Brand: Milwaukee Motorcycle Clothing Co.
   Colors: #880000 dark red | #e8262a accent red | #141414 dark bg
   Font: Francois One (headings) | system stack (body)
   ALL classes prefixed mmcc-
   ============================================================================= */

/* ---------------------------------------------------------------------------
   IMPORTS & TOKENS
   --------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Francois+One&display=swap');

:root {
  --mmcc-red: #880000;
  --mmcc-red-accent: #e8262a;
  --mmcc-dark: #141414;
  --mmcc-dark-2: #1e1e1e;
  --mmcc-dark-3: #2a2a2a;
  --mmcc-grey: #f4f4f4;
  --mmcc-grey-mid: #d0d0d0;
  --mmcc-white: #ffffff;
  --mmcc-text: #1a1a1a;
  --mmcc-text-light: #666666;
  --mmcc-font-heading: 'Francois One', Impact, sans-serif;
  --mmcc-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mmcc-radius: 3px;
  --mmcc-transition: 0.25s ease;
  --mmcc-container: 1600px;
  --mmcc-section-gap: 64px;
}

/* ---------------------------------------------------------------------------
   SHARED UTILITIES
   --------------------------------------------------------------------------- */
.mmcc-container {
  max-width: var(--mmcc-container);
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 768px) {
  .mmcc-container { padding: 0 32px; }
}

@media (min-width: 1200px) {
  .mmcc-container { padding: 0 48px; }
}

.mmcc-section {
  padding: 48px 0;
}

@media (min-width: 768px) {
  .mmcc-section { padding: var(--mmcc-section-gap) 0; }
}

.mmcc-section--dark  { background: var(--mmcc-dark);  }
.mmcc-section--grey  { background: var(--mmcc-grey);  }
.mmcc-section--white { background: var(--mmcc-white); }

.mmcc-section-header {
  text-align: center;
  margin-bottom: 32px;
}

.mmcc-section-header--flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}

.mmcc-section-heading {
  font-family: var(--mmcc-font-heading);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--mmcc-dark);
  line-height: 1.1;
}

.mmcc-section--dark .mmcc-section-heading,
.mmcc-section--dark .mmcc-section-subheading {
  color: var(--mmcc-white);
}

.mmcc-section-subheading {
  font-family: var(--mmcc-font-body);
  font-size: 1rem;
  color: var(--mmcc-text-light);
  margin: 0;
}

/* ---------------------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------------------- */
.mmcc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mmcc-font-heading);
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  min-height: 48px;
  min-width: 44px;
  border-radius: var(--mmcc-radius);
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--mmcc-transition), color var(--mmcc-transition), border-color var(--mmcc-transition), transform var(--mmcc-transition);
  white-space: nowrap;
}

.mmcc-btn:active { transform: scale(0.98); }

.mmcc-btn--primary {
  background: var(--mmcc-red-accent);
  color: var(--mmcc-white);
  border-color: var(--mmcc-red-accent);
}
.mmcc-btn--primary:hover {
  background: var(--mmcc-red);
  border-color: var(--mmcc-red);
  color: var(--mmcc-white);
}

.mmcc-btn--secondary {
  background: var(--mmcc-dark);
  color: var(--mmcc-white);
  border-color: var(--mmcc-dark);
}
.mmcc-btn--secondary:hover {
  background: var(--mmcc-dark-3);
  border-color: var(--mmcc-dark-3);
  color: var(--mmcc-white);
}

.mmcc-btn--ghost {
  background: transparent;
  color: var(--mmcc-white);
  border-color: var(--mmcc-white);
}
.mmcc-btn--ghost:hover {
  background: var(--mmcc-white);
  color: var(--mmcc-dark);
}

.mmcc-btn--outline {
  background: transparent;
  color: var(--mmcc-dark);
  border-color: var(--mmcc-dark);
}
.mmcc-btn--outline:hover {
  background: var(--mmcc-dark);
  color: var(--mmcc-white);
}

.mmcc-btn--white {
  background: var(--mmcc-white);
  color: var(--mmcc-red);
  border-color: var(--mmcc-white);
}
.mmcc-btn--white:hover {
  background: transparent;
  color: var(--mmcc-white);
}

.mmcc-btn--quick-add {
  width: 100%;
  background: var(--mmcc-dark);
  color: var(--mmcc-white);
  border-color: var(--mmcc-dark);
  padding: 10px 16px;
  font-size: 0.75rem;
  margin-top: 8px;
}
.mmcc-btn--quick-add:hover {
  background: var(--mmcc-red-accent);
  border-color: var(--mmcc-red-accent);
  color: var(--mmcc-white);
}

/* ---------------------------------------------------------------------------
   SECTION 1: HERO
   --------------------------------------------------------------------------- */
.mmcc-hero {
  width: 100%;
  background: var(--mmcc-dark);
  min-height: 650px;
}

@media (min-width: 768px) {
  .mmcc-hero { min-height: 700px; }
}

/* Desktop bg visible on 768px+, hidden on mobile */
.mmcc-hero__bg--desktop {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
}

@media (min-width: 768px) {
  .mmcc-hero__bg--desktop { display: block; }
}

/* Mobile bg visible below 768px */
.mmcc-hero__bg--mobile {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}

@media (min-width: 768px) {
  .mmcc-hero__bg--mobile { display: none; }
}

.mmcc-hero__bg--desktop img,
.mmcc-hero__bg--mobile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.mmcc-hero__bg--placeholder {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d0000 50%, #141414 100%);
}

/* Desktop overlay — hidden on mobile */
.mmcc-hero__overlay--desktop {
  position: absolute;
  inset: 0;
  background: var(--mmcc-dark);
  z-index: 1;
  display: none;
}

@media (min-width: 768px) {
  .mmcc-hero__overlay--desktop { display: block; }
}

/* Mobile overlay — hidden on desktop */
.mmcc-hero__overlay--mobile {
  position: absolute;
  inset: 0;
  background: var(--mmcc-dark);
  z-index: 1;
  display: block;
}

@media (min-width: 768px) {
  .mmcc-hero__overlay--mobile { display: none; }
}

.mmcc-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 48px 16px;
}

@media (min-width: 768px) {
  .mmcc-hero__content { padding: 40px 0; }
}

.mmcc-hero__text {
  max-width: 680px;
}

@media (min-width: 768px) {
  .mmcc-hero__text--left { padding-left: 25px; }
}

.mmcc-hero__text--center {
  margin: 0 auto;
  text-align: center;
}

.mmcc-hero__text--center .mmcc-hero__buttons {
  justify-content: center;
}

.mmcc-hero__eyebrow {
  font-family: var(--mmcc-font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FF0;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (min-width: 768px) {
  .mmcc-hero__eyebrow { font-size: 0.75rem; }
}

.mmcc-hero__eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  background: #FF0;
  flex-shrink: 0;
}

.mmcc-hero__text--center .mmcc-hero__eyebrow {
  justify-content: center;
}

.mmcc-hero__heading {
  font-family: var(--mmcc-font-heading);
  font-size: clamp(2.75rem, 10vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--mmcc-white);
  margin: 0 0 20px;
}

@media (min-width: 768px) {
  .mmcc-hero__heading { font-size: clamp(2.5rem, 7vw, 5.5rem); }
}

.mmcc-hero__subheading {
    font-family: var(--mmcc-font-body);
    font-size: clamp(1.0625rem, 3vw, 1.25rem);
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 36px;
    line-height: 1.5;
    max-width: fit-content;
    background: #00000069;
    padding: 10px;
    font-weight: bold;
    letter-spacing: 1px;
}

.mmcc-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------------------------------------------------------------------------
   SECTION 2: CATEGORY GRID
   --------------------------------------------------------------------------- */
.mmcc-cat-grid__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 640px) {
  .mmcc-cat-grid__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .mmcc-cat-grid__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}

/* If 7 blocks, force last item to be wider on desktop */
.mmcc-cat-grid__grid--7 .mmcc-cat-grid__item:last-child {
  grid-column: span 1;
}

@media (min-width: 1024px) {
  .mmcc-cat-grid__grid--7 .mmcc-cat-grid__item:last-child { grid-column: span 1; }
}

.mmcc-cat-grid__item {
  display: block;
  text-decoration: none;
  position: relative;
  border-radius: var(--mmcc-radius);
  overflow: hidden;
  background: var(--mmcc-dark-2);
}

.mmcc-cat-grid__image-wrap {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}

.mmcc-cat-grid__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.mmcc-cat-grid__item:hover .mmcc-cat-grid__image-wrap img {
  transform: scale(1.06);
}

.mmcc-cat-grid__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 60%);
}

.mmcc-cat-grid__placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--mmcc-dark-2) 0%, var(--mmcc-dark-3) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mmcc-grey-mid);
  font-family: var(--mmcc-font-heading);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.mmcc-cat-grid__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4px;
  z-index: 1;
  height: -webkit-fill-available;
}

.mmcc-cat-grid__badge {
  display: block;
  font-family: var(--mmcc-font-body);
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: rgba(20,20,20,0.8);
  padding: 3px 8px;
  border-radius: 2px;
}

.mmcc-cat-grid__title {
  font-family: var(--mmcc-font-heading);
  font-size: clamp(0.875rem, 1.5vw, 1.1rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mmcc-white);
  line-height: 1.1;
}

.mmcc-cat-grid__arrow {
  color: var(--mmcc-red-accent);
  font-size: 1.125rem;
  transition: transform var(--mmcc-transition);
  flex-shrink: 0;
}

.mmcc-cat-grid__item:hover .mmcc-cat-grid__arrow {
  transform: translateX(4px);
}

/* ---------------------------------------------------------------------------
   SECTION 3: FEATURED COLLECTION
   --------------------------------------------------------------------------- */
.mmcc-featured-col__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: start;
}

@media (min-width: 768px) {
  .mmcc-featured-col__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .mmcc-featured-col__grid { grid-template-columns: repeat(4, 1fr); }
}

.mmcc-featured-col__item {
  position: relative;
  display: flex;
  flex-direction: column;
  height: -webkit-fill-available;
}

.mmcc-featured-col__image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--mmcc-radius);
  background: var(--mmcc-grey);
}

.mmcc-featured-col__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity var(--mmcc-transition), transform 0.4s ease;
}

.mmcc-featured-col__img--secondary {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.mmcc-featured-col__item:hover .mmcc-featured-col__img--primary {
  opacity: 0;
}

.mmcc-featured-col__item:hover .mmcc-featured-col__img--secondary {
  opacity: 1;
}

.mmcc-featured-col__item:hover .mmcc-featured-col__img {
  transform: scale(1.03);
}

.mmcc-product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--mmcc-font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 2px;
  z-index: 1;
}

.mmcc-product-badge--sale {
  background: var(--mmcc-red-accent);
  color: var(--mmcc-white);
}

.mmcc-featured-col__info {
  padding: 12px 0 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.mmcc-featured-col__title {
  display: block;
  font-family: var(--mmcc-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--mmcc-text);
  text-decoration: none;
  line-height: 1.3;
  margin-bottom: 4px;
}

.mmcc-section--dark .mmcc-featured-col__title {
  color: var(--mmcc-white);
}

.mmcc-featured-col__title:hover { color: var(--mmcc-red-accent); }

.mmcc-featured-col__price {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

.mmcc-price {
  font-family: var(--mmcc-font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--mmcc-text);
}

.mmcc-section--dark .mmcc-price { color: var(--mmcc-white); }

.mmcc-price--compare {
  color: var(--mmcc-text-light);
  text-decoration: line-through;
  font-weight: 400;
}

.mmcc-price--sale { color: var(--mmcc-red-accent); }

.mmcc-featured-col__empty {
  color: var(--mmcc-text-light);
  font-style: italic;
  grid-column: 1 / -1;
}

.mmcc-featured-col__view-all {
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   SECTION 4: IMAGE FEATURE
   --------------------------------------------------------------------------- */
.mmcc-img-feature {
  width: 100%;
  background: var(--mmcc-dark);
  display: flex;
  align-items: center;
}

.mmcc-img-feature--medium { min-height: 500px; }
.mmcc-img-feature--large  { min-height: 650px; }
.mmcc-img-feature--xlarge { min-height: 800px; }

.mmcc-img-feature__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.mmcc-img-feature__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mmcc-img-feature__bg--placeholder {
  background: linear-gradient(135deg, var(--mmcc-dark) 0%, #3d0000 100%);
}

.mmcc-img-feature__overlay {
  position: absolute;
  inset: 0;
  background: var(--mmcc-dark);
  z-index: 1;
}

.mmcc-img-feature__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 48px;
  padding-bottom: 48px;
  display: flex;
}

.mmcc-img-feature__inner--left   { justify-content: flex-start; }
.mmcc-img-feature__inner--center { justify-content: center; text-align: center; }
.mmcc-img-feature__inner--right  { justify-content: flex-end; }

.mmcc-img-feature__content {
  max-width: 600px;
}

.mmcc-img-feature__eyebrow {
  font-family: var(--mmcc-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mmcc-red-accent);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mmcc-img-feature__eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--mmcc-red-accent);
  flex-shrink: 0;
}

.mmcc-img-feature__heading {
  font-family: var(--mmcc-font-heading);
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--mmcc-white);
  margin: 0 0 20px;
}

.mmcc-img-feature__text {
  font-family: var(--mmcc-font-body);
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.6;
  margin: 0 0 32px;
}

.mmcc-img-feature__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------------------------------------------------------------------------
   SECTION 5 & 6: CATEGORY SPLIT
   --------------------------------------------------------------------------- */
.mmcc-cat-split__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .mmcc-cat-split__grid { grid-template-columns: repeat(2, 1fr); }
}

.mmcc-cat-split__item {
  display: block;
  position: relative;
  text-decoration: none;
  border-radius: var(--mmcc-radius);
  overflow: hidden;
  background: var(--mmcc-dark-2);
  min-height: 320px;
}

@media (min-width: 768px) {
  .mmcc-cat-split__item { min-height: 420px; }
}

.mmcc-cat-split__image-wrap {
  position: absolute;
  inset: 0;
}

.mmcc-cat-split__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.mmcc-cat-split__item:hover .mmcc-cat-split__image-wrap img {
  transform: scale(1.05);
}

.mmcc-cat-split__placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--mmcc-dark-2) 0%, var(--mmcc-dark-3) 100%);
}

.mmcc-cat-split__overlay {
  position: absolute;
  inset: 0;
  background: var(--mmcc-dark);
}

.mmcc-cat-split__content {
  position: absolute;
  z-index: 2;
  padding: 24px;
  left: 0;
  right: 0;
}

.mmcc-cat-split__content--bottom-left,
.mmcc-cat-split__content--bottom-center {
  bottom: 0;
}

.mmcc-cat-split__content--center {
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}

.mmcc-cat-split__content--bottom-center { text-align: center; }

.mmcc-cat-split__eyebrow {
  display: block;
  font-family: var(--mmcc-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mmcc-red-accent);
  margin-bottom: 8px;
}

.mmcc-cat-split__heading {
  font-family: var(--mmcc-font-heading);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--mmcc-white);
  margin: 0 0 8px;
  line-height: 1.05;
}

.mmcc-cat-split__text {
  font-family: var(--mmcc-font-body);
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.75);
  margin: 0 0 16px;
  line-height: 1.4;
}

.mmcc-cat-split__item:hover .mmcc-btn--ghost {
  background: var(--mmcc-white);
  color: var(--mmcc-dark);
}

/* ---------------------------------------------------------------------------
   SECTION 7: DEALS BANNER
   --------------------------------------------------------------------------- */
.mmcc-deals-banner {
  padding: 56px 0;
}

.mmcc-deals-banner--red  { background: var(--mmcc-red); }
.mmcc-deals-banner--dark { background: var(--mmcc-dark); }

.mmcc-deals-banner__inner {
  text-align: center;
}

.mmcc-deals-banner__eyebrow {
  font-family: var(--mmcc-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin: 0 0 12px;
}

.mmcc-deals-banner__heading {
  font-family: var(--mmcc-font-heading);
  font-size: clamp(2rem, 6vw, 4rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--mmcc-white);
  margin: 0 0 12px;
  line-height: 1;
}

.mmcc-deals-banner__text {
  font-family: var(--mmcc-font-body);
  font-size: 1rem;
  color: rgba(255,255,255,0.75);
  margin: 0 0 28px;
}

.mmcc-deals-banner__btn {
  font-size: 0.9375rem;
  padding: 16px 40px;
}

/* ---------------------------------------------------------------------------
   SECTION 8: RIDER ESSENTIALS
   --------------------------------------------------------------------------- */
.mmcc-essentials__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 768px) {
  .mmcc-essentials__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}

.mmcc-essentials__item {
  display: block;
  text-decoration: none;
  border-radius: var(--mmcc-radius);
  overflow: hidden;
  background: var(--mmcc-dark-2);
  position: relative;
}

.mmcc-essentials__image-wrap {
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
}

.mmcc-essentials__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.mmcc-essentials__item:hover .mmcc-essentials__image-wrap img {
  transform: scale(1.06);
}

.mmcc-essentials__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%);
}

.mmcc-essentials__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background: linear-gradient(135deg, var(--mmcc-dark-2), var(--mmcc-dark-3));
}

.mmcc-essentials__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}

.mmcc-essentials__icon { font-size: 1.25rem; }

.mmcc-essentials__title {
  font-family: var(--mmcc-font-heading);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mmcc-white);
}

.mmcc-section--grey .mmcc-essentials__item { background: var(--mmcc-white); }

/* ---------------------------------------------------------------------------
   SECTION 9: TRUST STRIP
   --------------------------------------------------------------------------- */
.mmcc-trust {
  padding: 28px 0;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

.mmcc-trust--dark {
  background: var(--mmcc-dark);
  border-color: var(--mmcc-dark-3);
}

.mmcc-trust--light {
  background: var(--mmcc-grey);
  border-color: var(--mmcc-grey-mid);
}

.mmcc-trust--red {
  background: var(--mmcc-red);
}

.mmcc-trust__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 480px;
}

@media (min-width: 768px) {
  .mmcc-trust__list { max-width: 100%; }
}

@media (min-width: 768px) {
  .mmcc-trust__list {
    flex-direction: row;
    align-items: center;
  }
  .mmcc-trust__item {
    flex: 1;
    border-right: 1px solid rgba(255,255,255,0.15);
    border-bottom: none !important;
    min-height: 80px;
  }
  .mmcc-trust__item:last-child { border-right: none; }
}

/* Mobile: horizontal dividers between items */
.mmcc-trust__item {
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.mmcc-trust__item:last-child { border-bottom: none; }

.mmcc-trust--light .mmcc-trust__item { border-color: var(--mmcc-grey-mid); }

.mmcc-trust__item {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-start;
  padding: 18px 24px;
  min-height: 44px;
}

@media (min-width: 768px) {
  .mmcc-trust__item {
    justify-content: center;
    padding: 0 24px;
  }
}

.mmcc-trust__icon {
  font-size: 2rem;
  flex-shrink: 0;
  width: 2.5rem;
  text-align: center;
}

.mmcc-trust__copy {
  display: flex;
  flex-direction: column;
}

.mmcc-trust__title {
  font-family: var(--mmcc-font-heading);
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mmcc-trust--dark .mmcc-trust__title,
.mmcc-trust--red  .mmcc-trust__title { color: var(--mmcc-white); }
.mmcc-trust--light .mmcc-trust__title { color: var(--mmcc-dark); }

.mmcc-trust__text {
  font-family: var(--mmcc-font-body);
  font-size: 1rem;
  line-height: 1.3;
}

.mmcc-trust--dark .mmcc-trust__text  { color: rgba(255,255,255,0.55); }
.mmcc-trust--light .mmcc-trust__text { color: var(--mmcc-text-light); }
.mmcc-trust--red   .mmcc-trust__text { color: rgba(255,255,255,0.7); }

/* ---------------------------------------------------------------------------
   MOBILE OVERRIDES — Touch-friendly everywhere
   --------------------------------------------------------------------------- */
@media (max-width: 599px) {
  .mmcc-hero__buttons { flex-direction: column; align-items: flex-start; }
  .mmcc-hero__buttons .mmcc-btn { width: 100%; }
  .mmcc-img-feature__buttons { flex-direction: column; }
  .mmcc-img-feature__buttons .mmcc-btn { width: 100%; }
  .mmcc-section-header--flex { flex-direction: column; align-items: flex-start; }
}


/* ---------------------------------------------------------------------------
   MMCC PROMO BANNER
   --------------------------------------------------------------------------- */
.mmcc-promo-banner {
  position: relative;
  width: 100%;
  z-index: 10;
}

.mmcc-promo-banner--red    { background: var(--mmcc-red-accent); }
.mmcc-promo-banner--dark   { background: var(--mmcc-dark); border-bottom: 1px solid var(--mmcc-dark-3); }
.mmcc-promo-banner--custom { background: #333; }

.mmcc-promo-banner__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
  padding-right: 48px; /* room for close button */
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .mmcc-promo-banner__inner {
    flex-wrap: nowrap;
    gap: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

.mmcc-promo-banner__content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  text-align: center;
}

@media (min-width: 768px) {
  .mmcc-promo-banner__content { flex-wrap: nowrap; gap: 0 14px; }
}

.mmcc-promo-banner__eyebrow {
  font-family: var(--mmcc-font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
}

/* Pipe separator after eyebrow on desktop */
@media (min-width: 768px) {
  .mmcc-promo-banner__eyebrow::after {
    content: '|';
    margin-left: 14px;
    color: rgba(255,255,255,0.3);
  }
}

.mmcc-promo-banner__heading {
  font-family: var(--mmcc-font-heading);
  font-size: clamp(1rem, 3vw, 1.375rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mmcc-white);
  white-space: nowrap;
}

.mmcc-promo-banner__subtext {
  font-family: var(--mmcc-font-body);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
}

/* Pipe separator before subtext on desktop */
@media (min-width: 768px) {
  .mmcc-promo-banner__subtext::before {
    content: '|';
    margin-right: 14px;
    color: rgba(255,255,255,0.3);
  }
}

/* Promo code — clickable pill */
.mmcc-promo-banner__code {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,0.25);
  border: 1px dashed rgba(255,255,255,0.5);
  border-radius: 3px;
  padding: 4px 10px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: background var(--mmcc-transition);
  user-select: none;
}

.mmcc-promo-banner__code:hover {
  background: rgba(0,0,0,0.4);
  border-color: rgba(255,255,255,0.8);
}

.mmcc-promo-banner__code-label {
  font-family: var(--mmcc-font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
}

.mmcc-promo-banner__code-value {
  font-family: var(--mmcc-font-heading);
  font-size: 0.9375rem;
  letter-spacing: 0.1em;
  color: var(--mmcc-white);
  text-transform: uppercase;
}

.mmcc-promo-banner__code-copied {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  border-radius: 3px;
  font-family: var(--mmcc-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  color: #4ade80;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.mmcc-promo-banner__code--copied .mmcc-promo-banner__code-copied {
  opacity: 1;
}

.mmcc-promo-banner__deadline {
  font-family: var(--mmcc-font-body);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.65);
  font-style: italic;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .mmcc-promo-banner__deadline::before {
    content: '·';
    margin-right: 10px;
    color: rgba(255,255,255,0.3);
  }
}

/* CTA Button */
.mmcc-promo-banner__btn {
  flex-shrink: 0;
  padding: 9px 22px;
  font-size: 0.8125rem;
  min-height: 40px;
}

/* Close button */
.mmcc-promo-banner__close {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  transition: color var(--mmcc-transition);
  border-radius: 50%;
}

.mmcc-promo-banner__close:hover {
  color: var(--mmcc-white);
  background: rgba(255,255,255,0.1);
}

/* Mobile stacking */
@media (max-width: 599px) {
  .mmcc-promo-banner__inner {
    flex-direction: column;
    gap: 10px;
    padding-right: 40px;
    padding-left: 16px;
  }
  .mmcc-promo-banner__content {
    flex-direction: column;
    gap: 6px;
  }
  .mmcc-promo-banner__eyebrow::after,
  .mmcc-promo-banner__subtext::before,
  .mmcc-promo-banner__deadline::before { display: none; }
  .mmcc-promo-banner__btn { width: 100%; }
}

/* ================================
   FOOTER EMAIL BAR
   ================================ */
.mmcc-email-bar {
  background: #e8262a;
  width: 100%;
}

.mmcc-email-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 40px;
}

.mmcc-email-bar__text {
  flex-shrink: 0;
}

.mmcc-email-bar__heading {
  font-family: 'Francois One', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 4px;
  line-height: 1.1;
}

.mmcc-email-bar__sub {
  font-family: 'Francois One', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
  opacity: 0.9;
}

.mmcc-email-bar__form {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  max-width: 600px;
}

.mmcc-email-bar__input {
  flex: 1;
  height: 50px;
  padding: 0 18px;
  font-size: 15px;
  color: #141414;
  background: #ffffff;
  border: none;
  border-radius: 0;
  outline: none;
  min-width: 0;
}

.mmcc-email-bar__input::placeholder {
  color: #888;
}

.mmcc-email-bar__btn {
  height: 50px;
  padding: 0 28px;
  background: #141414;
  color: #ffffff;
  font-family: 'Francois One', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
  min-height: 44px;
}

.mmcc-email-bar__btn:hover {
  background: #880000;
}

/* Tablet */
@media (max-width: 959px) {
  .mmcc-email-bar__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 30px;
  }
  .mmcc-email-bar__form {
    width: 100%;
    max-width: 100%;
  }
}

/* Mobile */
@media (max-width: 599px) {
  .mmcc-email-bar__inner {
    padding: 20px 16px;
  }
  .mmcc-email-bar__heading {
    font-size: 18px;
  }
  .mmcc-email-bar__form {
    flex-direction: column;
    gap: 10px;
  }
  .mmcc-email-bar__input,
  .mmcc-email-bar__btn {
    width: 100%;
  }
}

/* ================================
   FOOTER CONTACT BLOCK
   ================================ */
.mmcc-footer-contact {
  margin-top: 20px;
}

.mmcc-footer-contact__heading {
  font-family: 'Francois One', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0 0 2px;
  line-height: 1.2;
}

.mmcc-footer-contact__subheading {
  font-family: 'Francois One', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #e8262a;
  text-transform: uppercase;
  margin: 0 0 16px;
  line-height: 1.2;
}

.mmcc-footer-contact__item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 10px;
  min-height: 44px;
  transition: color 0.2s;
}

.mmcc-footer-contact__item:hover {
  color: #e8262a;
}

.mmcc-footer-contact__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #e8262a;
}

/* ================================
   FOOTER CTA BUTTONS & SOCIAL
   ================================ */
.mmcc-footer-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mmcc-footer-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  background: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
  font-family: 'Francois One', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  line-height: 1.2;
}

.mmcc-footer-cta__btn:hover {
  background: #e8262a;
  border-color: #e8262a;
  color: #ffffff;
}

.mmcc-footer-cta__social-heading {
  font-family: 'Francois One', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffffff;
  margin: 10px 0 4px;
}

.mmcc-footer-cta__social.footer__social {
  margin-top: 4px;
}

/* ================================
   PERFORMANCE — LCP & RENDERING
   ================================ */

/* Hero / banner image — treat as LCP, load eagerly with high priority */
.hero__image img,
.hero img,
.slideshow__image img,
.banner__image img {
  loading: eager; /* hint only — real attr set in liquid */
  content-visibility: auto;
}

/* Below-fold images — async decode to unblock main thread */
.grid-product__image,
.grid__image-ratio img,
.collection-image img,
.article-listing img {
  decoding: async;
  content-visibility: auto;
}

/* Contain layout paint for footer and sections below fold */
.site-footer,
.footer-promotions,
.mmcc-email-bar {
  content-visibility: auto;
  contain-intrinsic-size: 0 300px;
}

/* ================================
   LOGIN PAGE
   ================================ */
.mmcc-login-page {
  padding-top: 60px;
  padding-bottom: 60px;
}

.mmcc-login-card {
  max-width: 480px;
  margin: 0 auto;
}

.mmcc-login-card__title {
  font-family: 'Francois One', sans-serif;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 28px;
  line-height: 1.1;
}

.mmcc-login-section {
  margin-bottom: 0;
}

.mmcc-login-subtext {
  margin: -16px 0 24px;
  opacity: 0.7;
  font-size: 15px;
}

.mmcc-login-field {
  margin-bottom: 20px;
}

.mmcc-login-field__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.mmcc-login-label {
  display: block;
  font-family: 'Francois One', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}

.mmcc-login-field__header .mmcc-login-label {
  margin-bottom: 0;
}

.mmcc-login-input {
  height: 52px;
  padding: 0 16px;
  font-size: 15px;
  border: 2px solid var(--colorBorder);
  background: var(--colorBody);
  transition: border-color 0.2s;
  width: 100%;
}

.mmcc-login-input:focus {
  border-color: #880000;
  outline: none;
}

.mmcc-login-forgot {
  font-size: 13px;
  color: #880000;
  text-decoration: none;
  white-space: nowrap;
}

.mmcc-login-forgot:hover {
  text-decoration: underline;
}

/* Shared button base */
.mmcc-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  font-family: 'Francois One', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  line-height: 1.2;
  margin-bottom: 12px;
}

/* Primary — solid red */
.mmcc-login-btn--primary {
  background: #e8262a;
  color: #ffffff;
  border-color: #e8262a;
  margin-top: 8px;
}

.mmcc-login-btn--primary:hover {
  background: #880000;
  border-color: #880000;
  color: #ffffff;
}

/* Outline — bordered */
.mmcc-login-btn--outline {
  background: transparent;
  color: #880000;
  border-color: #880000;
}

.mmcc-login-btn--outline:hover {
  background: #880000;
  color: #ffffff;
}

/* Ghost — text only cancel link */
.mmcc-login-btn--ghost {
  background: transparent;
  color: var(--colorTextBody);
  border-color: transparent;
  opacity: 0.6;
  font-size: 13px;
  margin-bottom: 0;
}

.mmcc-login-btn--ghost:hover {
  opacity: 1;
  text-decoration: underline;
}

.mmcc-login-register {
  text-align: center;
  font-size: 14px;
  margin: 4px 0 0;
}

.mmcc-login-register a {
  color: #880000;
  text-decoration: none;
  font-weight: 600;
}

.mmcc-login-register a:hover {
  text-decoration: underline;
}

/* CTA section */
.mmcc-login-cta {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 2px solid var(--colorBorder);
}

.mmcc-login-cta__label {
  font-family: 'Francois One', sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: center;
  margin: 0 0 14px;
  opacity: 0.8;
}

.mmcc-login-cta__buttons {
  display: flex;
  gap: 12px;
}

.mmcc-login-cta__buttons .mmcc-login-btn {
  flex: 1;
  margin-bottom: 0;
  font-size: 13px;
}

/* Guest login */
.mmcc-login-guest {
  max-width: 480px;
  margin: 40px auto 0;
  padding-top: 32px;
  border-top: 2px solid var(--colorBorder);
}

/* Mobile */
@media (max-width: 480px) {
  .mmcc-login-page {
    padding-top: 32px;
    padding-bottom: 40px;
  }
  .mmcc-login-card__title {
    font-size: 26px;
  }
  .mmcc-login-cta__buttons {
    flex-direction: column;
    gap: 10px;
  }
}

/* ================================
   CLS FIX — Header stability
   ================================ */

/* position:fixed is used instead of position:sticky because Shopify's
   shopify-section-group wrapper has overflow constraints that break sticky.
   JS adds mmcc-is-sticky on scroll — never on load — so the announcement
   bar is fully visible at page load with zero shift. */
#MmccStickyHeader.mmcc-is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 200;
  will-change: transform;
}

.mmcc-sticky-placeholder {
  display: none;
}
.mmcc-sticky-placeholder.mmcc-placeholder-active {
  display: block;
}

/* Prevent font-swap CLS on nav text by reserving space with size-adjust.
   This keeps the nav bar height stable while Francois One loads. */
.mmcc-nav-bar,
.mmcc-header-row {
  contain: layout style;
}