/* ========================================
   SHOP BY CATEGORY DROPDOWN
======================================== */

#shopCategoryMenu {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #0D0726 !important;
  font-family: "Work Sans", sans-serif !important;
  box-sizing: border-box !important;
}

/* CLOSED HEADER: WHITE PILL OUTLINE */

#shopCategoryMenu .shop-category-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 16px 22px !important;
  border: 1px solid #FFFFFF !important;
  border-radius: 999px !important;
  outline: 1px solid #FFFFFF !important;
  outline-offset: -1px !important;
  background: #0D0726 !important;
  background-color: #0D0726 !important;
  color: #FFFFFF !important;
  font-family: "Work Sans", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: inset 0 0 0 1px #FFFFFF !important;
  box-sizing: border-box !important;
}

/* OPEN HEADER: SOLID BLUE PILL */

#shopCategoryMenu.open .shop-category-toggle,
#shopCategoryMenu.open .shop-category-toggle:hover,
#shopCategoryMenu.open .shop-category-toggle:focus,
#shopCategoryMenu.open .shop-category-toggle:active {
  border: 1px solid #0053FF !important;
  border-radius: 999px !important;
  outline: none !important;
  background: #0053FF !important;
  background-color: #0053FF !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

/* HAMBURGER ICON */

#shopCategoryMenu .shop-category-toggle-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

#shopCategoryMenu .shop-category-hamburger {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
}

#shopCategoryMenu .shop-category-hamburger span {
  display: block !important;
  width: 20px !important;
  height: 2px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 2px !important;
}

#shopCategoryMenu .shop-category-title {
  display: inline-block !important;
  color: #FFFFFF !important;
  font-family: "Work Sans", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

/* UP ARROW: HIDDEN WHEN CLOSED */

#shopCategoryMenu .shop-category-toggle::after {
  content: "" !important;
  display: none !important;
}

/* UP ARROW: VISIBLE ONLY WHEN OPEN */

#shopCategoryMenu.open .shop-category-toggle::after {
  content: "" !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  margin-left: auto !important;
  margin-right: 4px !important;
  border-top: 2px solid #FFFFFF !important;
  border-left: 2px solid #FFFFFF !important;
  background: transparent !important;
  transform: rotate(45deg) !important;
  flex-shrink: 0 !important;
}

/* DROPDOWN PANEL */

#shopCategoryList,
#shopCategoryMenu #shopCategoryList,
#shopCategoryMenu.open #shopCategoryList,
#shopCategoryMenu.open #shopCategoryList:not([hidden]) {
  width: 100% !important;
  margin: 8px 0 0 !important;
  padding: 8px 22px 18px !important;
  border: none !important;
  border-radius: 0 !important;
  background: #0D0726 !important;
  background-color: #0D0726 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* HIDE WHEN CLOSED */

#shopCategoryMenu #shopCategoryList[hidden] {
  display: none !important;
}

/* SHOW WHEN OPEN */

#shopCategoryMenu.open #shopCategoryList:not([hidden]) {
  display: block !important;
}

/* CATEGORY LINKS */

#shopCategoryMenu #shopCategoryList a,
#shopCategoryMenu.open #shopCategoryList a,
#shopCategoryMenu #shopCategoryList a:visited {
  display: block !important;
  width: 100% !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #FFFFFF !important;
  font-family: "Work Sans", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* LINK HOVER */

#shopCategoryMenu #shopCategoryList a:hover,
#shopCategoryMenu #shopCategoryList a:focus {
  background: transparent !important;
  color: #FFFFFF !important;
  text-decoration: underline !important;
}

/* MOBILE */

@media (max-width: 767px) {
  #shopCategoryMenu .shop-category-toggle {
    min-height: 52px !important;
    padding: 14px 18px !important;
    font-size: 15px !important;
  }

  #shopCategoryMenu .shop-category-title {
    font-size: 15px !important;
  }

  #shopCategoryMenu.open #shopCategoryList:not([hidden]) {
    padding: 8px 18px 16px !important;
  }

  #shopCategoryMenu #shopCategoryList a {
    padding: 11px 0 !important;
  }
}


/* =========================================
   VIEW FULL COLLECTION BUTTON
   ========================================= */

.view-collection-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background-color: #FF0000;
  color: #FFFFFF !important;
  font-family: "Work Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none !important;
  border: none;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.view-collection-btn:hover {
  background-color: #D90000;
  color: #FFFFFF !important;
}


/* =========================================
   FIXED HERO
   ========================================= */

.hero-fixed {
  min-width: 1200px;
  width: 1200px;
  max-width: none;
  background-size: 1200px auto !important;
  background-position: left top !important;
  background-repeat: no-repeat !important;
}


/* =========================================
   MOBILE ADJUSTMENTS
   ========================================= */

@media (max-width: 767px) {
  .shop-category-menu .shop-category-toggle {
    padding: 16px;
    font-size: 15px;
  }

  .shop-category-menu .shop-category-title {
    font-size: 15px;
  }

  .shop-category-menu .shop-category-toggle-left {
    gap: 12px;
  }

  .shop-category-menu .shop-category-list {
    padding: 8px 16px 16px;
  }

  .shop-category-menu .shop-category-list a {
    padding: 11px 0;
  }

  .view-collection-btn {
    padding: 10px 16px;
    font-size: 12px;
  }
}


/* =========================================
   MOBILE PRODUCT CAROUSEL
   ========================================= */

@media (max-width: 767px) {

  /* Swipeable row with left alignment and slide snapping */
  .zprow.mobile-carousel {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-snap-type: x mandatory !important;
    scroll-snap-stop: always !important;
    scroll-padding-left: 0 !important;
    scroll-behavior: smooth !important;

    gap: 16px !important;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .zprow.mobile-carousel::-webkit-scrollbar {
    display: none !important;
  }

  /* Each column is one slide */
  .zprow.mobile-carousel > .zpelem-col {
    flex: 0 0 85% !important;
    width: 85% !important;
    max-width: 85% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }

  /* Keep images proportional instead of stretching them */
  .zprow.mobile-carousel > .zpelem-col img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* Keep image-containing elements aligned to the left */
  .zprow.mobile-carousel > .zpelem-col .zpelem-image {
    text-align: left !important;
  }

  /* Navigation controls below the carousel */
  .mobile-carousel-controls {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;

    width: 100% !important;
    padding: 16px 0 12px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  /* Slide indicator dots */
  .mobile-carousel-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 9px !important;
  }

  .mobile-carousel-dot {
    display: block !important;
    flex: 0 0 8px !important;

    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;

    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;

    background: #CCCCCC !important;
    cursor: pointer;
    transition: width 0.2s ease, background-color 0.2s ease;
  }

  .mobile-carousel-dot.active {
    flex-basis: 20px !important;
    width: 20px !important;
    border-radius: 10px !important;
    background: #0053FF !important;
  }

  /* Next-slide arrow */
  .mobile-carousel-next {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 32px !important;
    min-height: 32px !important;
    padding: 4px 8px !important;

    border: none !important;
    background: transparent !important;
    color: #0053FF !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer;
  }
}

/* Hide mobile carousel controls on desktop */
@media (min-width: 768px) {
  .mobile-carousel-controls {
    display: none !important;
  }
}

/* =========================================
   MOBILE CAROUSEL: ALIGNMENT AND DOTS FIX
   ========================================= */

@media (max-width: 767px) {

  /* Remove row spacing that can shift the first slide */
  .zprow.mobile-carousel {
    justify-content: flex-start !important;
    padding-inline: 0 !important;
    scroll-padding-inline: 0 !important;
    text-align: left !important;
  }

  /* Align each slide and its contents to the left */
  .zprow.mobile-carousel > .zpelem-col {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .zprow.mobile-carousel > .zpelem-col > * {
    text-align: left !important;
  }

  .zprow.mobile-carousel .zpelem-image,
  .zprow.mobile-carousel .zpelem-image a {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .zprow.mobile-carousel .zpelem-image img,
  .zprow.mobile-carousel > .zpelem-col img {
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  /* Ensure controls are visible below the scrolling row */
  .mobile-carousel-controls {
    display: flex !important;
    position: relative !important;
    justify-content: center !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-height: 24px !important;
    padding: 16px 0 !important;
    overflow: visible !important;
    clear: both !important;
  }

  .mobile-carousel-dots {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 9px !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .mobile-carousel-dot {
    appearance: none !important;
    display: block !important;
    flex: 0 0 8px !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    min-height: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #CCCCCC !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .mobile-carousel-dot.active {
    flex-basis: 20px !important;
    width: 20px !important;
    border-radius: 10px !important;
    background: #0053FF !important;
  }

  .mobile-carousel-next {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-left: 12px !important;
  }

  .mobile-carousel-next:disabled {
    visibility: hidden !important;
  }
}

@media (max-width: 767px) {
  .zprow.mobile-carousel {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    justify-content: flex-start !important;
    gap: 16px !important;
  }

  .zprow.mobile-carousel > .zpelem-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  .zprow.mobile-carousel .zpelem-image,
  .zprow.mobile-carousel .zpelem-image > div,
  .zprow.mobile-carousel .zpelem-image a {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  .zprow.mobile-carousel .zpelem-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
  }
}

@media (max-width: 767px) {
  .zprow.mobile-carousel {
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: flex-start !important;
    scroll-padding-left: 0 !important;
    scroll-snap-type: x mandatory !important;
  }

  .zprow.mobile-carousel > .zpelem-col {
    flex: 0 0 85% !important;
    width: 85% !important;
    max-width: 85% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  .zprow.mobile-carousel .zpelem-image {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-align: left !important;
  }

  .zprow.mobile-carousel .zpelem-image img {
    display: block !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  .mobile-carousel-controls {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    padding: 16px 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .mobile-carousel-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 9px !important;
  }

  .mobile-carousel-dot {
    appearance: none !important;
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #CCCCCC !important;
    cursor: pointer !important;
  }

  .mobile-carousel-dot.active {
    width: 20px !important;
    background: #0053FF !important;
    border-radius: 10px !important;
  }
}

@media (min-width: 768px) {
  .mobile-carousel-controls {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .mobile-carousel-controls {
    display: flex !important;
    position: relative !important;
    z-index: 99999 !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 50px !important;
    padding: 16px 0 !important;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  .mobile-carousel-dots {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 9px !important;
    background: transparent !important;
  }

  .mobile-carousel-dot {
    display: block !important;
    position: relative !important;
    z-index: 100000 !important;
    flex: 0 0 8px !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: #777777 !important;
    cursor: pointer !important;
    opacity: 1 !important;
  }

  .mobile-carousel-dot.active {
    flex-basis: 20px !important;
    width: 20px !important;
    border-radius: 10px !important;
    background: #0053FF !important;
  }
}

@media (min-width: 768px) {
  .mobile-carousel-controls {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .zprow.mobile-carousel > .zpelem-col,
  .zprow.mobile-carousel > .zpelem-col > .zpelement,
  .zprow.mobile-carousel > .zpelem-col .zpelement,
  .zprow.mobile-carousel > .zpelem-col .zpelement *,
  .zprow.mobile-carousel > .zpelem-col .zpelement-inner {
    text-align: left !important;
  }

  .zprow.mobile-carousel > .zpelem-col img {
    display: block !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    object-position: left center !important;
  }

  .zprow.mobile-carousel > .zpelem-col .zpelement,
  .zprow.mobile-carousel > .zpelem-col .zpelement-inner {
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
}

@media (max-width: 767px) {
  .mobile-carousel-controls {
    display: flex !important;
    position: relative !important;
    z-index: 99999 !important;
    width: 100% !important;
    min-height: 50px !important;
    padding: 16px 0 !important;
    margin: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  .mobile-carousel-dots {
    display: flex !important;
    position: relative !important;
    z-index: 100000 !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 9px !important;
    background: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .mobile-carousel-dot {
    display: block !important;
    flex: 0 0 8px !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: #777777 !important;
    visibility: visible !important;
    opacity: 1 !important;
    cursor: pointer !important;
  }

  .mobile-carousel-dot.active {
    flex-basis: 20px !important;
    width: 20px !important;
    border-radius: 10px !important;
    background: #0053FF !important;
  }
}

@media (min-width: 768px) {
  .mobile-carousel-controls {
    display: none !important;
  }
}


/* =========================================
   MOBILE CAROUSEL: ALIGNED PRODUCT CARD LAYOUT
   ========================================= */

@media screen and (max-width: 767px) {

  /* Consistent vertical layout for all carousel cards */
  .zprow.mobile-carousel > .zpelem-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  /* Image wrapper: no unwanted extra height */
  .zprow.mobile-carousel > .zpelem-col > .zpelem-box {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  /* Consistent image display area */
  .zprow.mobile-carousel .zpelem-image {
    display: block !important;
    width: 100% !important;
    height: 315px !important;
    min-height: 315px !important;
    max-height: 315px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  /* Left-align images within their display areas */
  .zprow.mobile-carousel .zpelem-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 315px !important;
    max-height: 315px !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Heading container: consistent three-line height */
  .zprow.mobile-carousel > .zpelem-col > .zpelem-heading {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  /* Reserve three lines for every product heading */
  .zprow.mobile-carousel > .zpelem-col > .zpelem-heading .zpheading,
  .zprow.mobile-carousel > .zpelem-col > .zpelem-heading h1,
  .zprow.mobile-carousel > .zpelem-col > .zpelem-heading h2,
  .zprow.mobile-carousel > .zpelem-col > .zpelem-heading h3,
  .zprow.mobile-carousel > .zpelem-col > .zpelem-heading h4 {
    display: block !important;
    height: 3.6em !important;
    min-height: 3.6em !important;
    max-height: 3.6em !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: content-box !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  /* SKU/text container */
  .zprow.mobile-carousel > .zpelem-col > .zpelem-text {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  /* Compact SKU text */
  .zprow.mobile-carousel > .zpelem-col > .zpelem-text p {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* Shop Now button container */
  .zprow.mobile-carousel > .zpelem-col > .zpelem-button {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  /* Left-align the Shop Now button */
  .zprow.mobile-carousel .zpelem-button .zpbutton-container {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }
}


/* =========================================
   TELEPHONE LINKS
   ========================================= */

a[href^="tel:"],
a[href^="tel:"] * {
  color: inherit !important;
  text-decoration: none !important;
}


/* =========================================
   MOBILE HEADER: LOGO AND VISIT SITE BUTTON
   ========================================= */

@media screen and (max-width: 767px) {

  /* Logo sizing */
  body img.zpimage[alt="4AllPromos Logo"] {
    display: block !important;
    width: 108px !important;
    min-width: 0 !important;
    max-width: 108px !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Visit Site pill */
  [data-element-id="topband_button"] a.zpbutton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 130px !important;
    min-height: 52px !important;
    height: 52px !important;
    padding: 14px 18px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    text-align: center !important;
    border: 1px solid #FFFFFF !important;
    border-radius: 999px !important;
    outline: 1px solid #FFFFFF !important;
    outline-offset: -1px !important;
    background: #0D0726 !important;
    color: #FFFFFF !important;
    box-shadow: inset 0 0 0 1px #FFFFFF !important;
    flex-shrink: 0 !important;
  }

  /* Visit Site button text */
  [data-element-id="topband_button"] a.zpbutton .zpbutton-content {
    display: block !important;
    width: 100% !important;
    white-space: nowrap !important;
    text-align: center !important;
    font-family: "Work Sans", sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: #FFFFFF !important;
  }
}


/* =========================================
   SMALL MOBILE HEADER: 400PX AND BELOW
   ========================================= */

@media screen and (max-width: 400px) {

  body img.zpimage[alt="4AllPromos Logo"] {
    width: 96px !important;
    min-width: 0 !important;
    max-width: 96px !important;
  }
}
/* MOBILE: EQUAL SPACING BETWEEN SECTION ELEMENTS */
@media screen and (max-width: 767px) {

  /* Space between section text and carousel */
  .zpelem-text:has(+ .zprow.mobile-carousel) {
    margin-bottom: 24px !important;
  }

  /* Alternative when text and carousel are separate siblings */
  .zprow.mobile-carousel {
    margin-top: 24px !important;
  }
}

/* =========================================
   DESKTOP: ALIGNED FOUR-COLUMN PRODUCT ROWS
   ========================================= */

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

  /* Maintain the existing four-column layout */
  .zprow.mobile-carousel {
    align-items: stretch !important;
  }

  /* Consistent vertical layout for each product */
  .zprow.mobile-carousel > .zpelem-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  /* Product image wrapper */
  .zprow.mobile-carousel > .zpelem-col > .zpelem-box {
    display: block !important;
    width: 100% !important;
    height: 315px !important;
    min-height: 315px !important;
    max-height: 315px !important;
    flex: 0 0 315px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  /* Consistent product image area */
  .zprow.mobile-carousel .zpelem-image {
    display: block !important;
    width: 100% !important;
    height: 315px !important;
    min-height: 315px !important;
    max-height: 315px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  /* Product images */
  .zprow.mobile-carousel .zpelem-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 315px !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Product heading container */
  .zprow.mobile-carousel > .zpelem-col > .zpelem-heading {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  /* Reserve exactly three lines for every heading */
  .zprow.mobile-carousel > .zpelem-col > .zpelem-heading .zpheading,
  .zprow.mobile-carousel > .zpelem-col > .zpelem-heading h1,
  .zprow.mobile-carousel > .zpelem-col > .zpelem-heading h2,
  .zprow.mobile-carousel > .zpelem-col > .zpelem-heading h3,
  .zprow.mobile-carousel > .zpelem-col > .zpelem-heading h4 {
    display: block !important;
    height: 3.6em !important;
    min-height: 3.6em !important;
    max-height: 3.6em !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
    overflow: hidden !important;
  }

  /* SKU/text container */
  .zprow.mobile-carousel > .zpelem-col > .zpelem-text {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  /* SKU text */
  .zprow.mobile-carousel > .zpelem-col > .zpelem-text p {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  /* Shop Now button */
  .zprow.mobile-carousel > .zpelem-col > .zpelem-button {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  /* Left-align buttons */
  .zprow.mobile-carousel .zpelem-button .zpbutton-container {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }
}

/* =========================================
   DESKTOP: SECTION AND PRODUCT SPACING
   ========================================= */

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

  /* More space between section intro text
     and the four-column product row */
  .zprow.mobile-carousel {
    margin-top: 40px !important;
  }

  /* Reduce space between product image
     and the heading directly below it */
  .zprow.mobile-carousel > .zpelem-col > .zpelem-heading {
    margin-top: 4px !important;
  }

  /* Keep SKU close to the product heading */
  .zprow.mobile-carousel > .zpelem-col > .zpelem-text {
    margin-top: 8px !important;
  }

  /* Maintain consistent button spacing */
  .zprow.mobile-carousel > .zpelem-col > .zpelem-button {
    margin-top: 16px !important;
  }
}

/* =========================================
   MOBILE CAROUSEL: FORCE LEFT IMAGE ALIGNMENT
   ========================================= */

@media screen and (max-width: 767px) {

  /* Align the image box with the product text */
  .zprow.mobile-carousel > .zpelem-col > .zpelem-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Prevent Zoho image wrappers from centering */
  .zprow.mobile-carousel .zpelem-image,
  .zprow.mobile-carousel .zpimage-container,
  .zprow.mobile-carousel .zpimage-anchor,
  .zprow.mobile-carousel .zpimage-wrapper {
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
    align-self: flex-start !important;
    justify-content: flex-start !important;
  }

  /* Left-align actual image elements */
  .zprow.mobile-carousel .zpelem-image img,
  .zprow.mobile-carousel img.zpimage {
    display: block !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    object-position: left center !important;
    float: none !important;
  }

  /* Keep heading, SKU and button aligned left */
  .zprow.mobile-carousel > .zpelem-col > .zpelem-heading,
  .zprow.mobile-carousel > .zpelem-col > .zpelem-text,
  .zprow.mobile-carousel > .zpelem-col > .zpelem-button {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }
}

/* =========================================
   MOBILE: SECTION TOP AND BOTTOM SPACING
   ========================================= */

@media screen and (max-width: 767px) {

  /* Increase space above each section's first heading */
  .zpsection:has(.zprow.mobile-carousel) {
    padding-top: 48px !important;
  }

  /* Reduce space below the carousel by 50% */
  .zpsection:has(.zprow.mobile-carousel) {
    padding-bottom: 24px !important;
  }

  /* Remove extra bottom margin from carousel */
  .zprow.mobile-carousel {
    margin-bottom: 0 !important;
  }
}

/* =========================================
   PREMIUM CATEGORY CTA
   DESKTOP + MOBILE
   ========================================= */

/* Fourth column becomes a centered CTA area */
.zprow.mobile-carousel > .zpelem-col.premium-category-column {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* Hide original fourth-column image and content */
.zprow.mobile-carousel > .zpelem-col.premium-category-column
> :not(.premium-category-cta) {
  display: none !important;
}

/* Main blue button */
.zprow.mobile-carousel .premium-category-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;

  width: auto !important;
  max-width: 100% !important;
  min-height: 58px !important;
  padding: 17px 26px !important;

  background-color: #0053FF !important;
  color: #FFFFFF !important;

  border: 1px solid #0053FF !important;
  border-radius: 999px !important;

  font-family: "Work Sans", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.5px !important;

  text-transform: uppercase !important;
  text-decoration: none !important;
  text-align: center !important;

  white-space: normal !important;
  box-sizing: border-box !important;

  cursor: pointer !important;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease !important;
}

/* Right arrow */
.zprow.mobile-carousel .premium-category-arrow {
  display: inline-block !important;
  flex-shrink: 0 !important;

  color: #FFFFFF !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

/* Hover and keyboard focus */
.zprow.mobile-carousel .premium-category-cta:hover,
.zprow.mobile-carousel .premium-category-cta:focus-visible {
  background-color: #003FD1 !important;
  border-color: #003FD1 !important;
  color: #FFFFFF !important;
}

/* Visible keyboard focus */
.zprow.mobile-carousel .premium-category-cta:focus-visible {
  outline: 2px solid #FFFFFF !important;
  outline-offset: 3px !important;
}


/* =========================================
   DESKTOP CATEGORY CTA
   ========================================= */

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

  .zprow.mobile-carousel > .zpelem-col.premium-category-column {
    align-self: stretch !important;
    justify-content: center !important;
    padding: 20px 12px !important;
  }

  .zprow.mobile-carousel .premium-category-cta {
    font-size: 16px !important;
    padding: 17px 24px !important;
  }
}


/* =========================================
   MOBILE CATEGORY CTA
   ========================================= */

@media screen and (max-width: 767px) {

  .zprow.mobile-carousel > .zpelem-col.premium-category-column {
    align-items: center !important;
    justify-content: center !important;
    min-height: 315px !important;
    height: auto !important;
    padding: 24px 16px !important;
  }

  .zprow.mobile-carousel .premium-category-cta {
    max-width: 100% !important;
    min-height: 54px !important;
    padding: 15px 20px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  .zprow.mobile-carousel .premium-category-arrow {
    font-size: 20px !important;
  }
}

/* =========================================
   SHOP ALL BUTTON ALIGNMENT
   DESKTOP + MOBILE
   ========================================= */

/* Left-align text and keep arrow on the right */
.zprow.mobile-carousel .premium-category-cta {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  width: 100% !important;
  max-width: 280px !important;

  gap: 16px !important;
  text-align: left !important;
  white-space: normal !important;
  text-transform: uppercase !important;
}

/* Keep arrow fixed at the right */
.zprow.mobile-carousel .premium-category-arrow {
  display: inline-block !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  align-self: center !important;
  text-align: right !important;
}

/* =========================================
   DESKTOP: CENTER BUTTON IN FOURTH COLUMN
   ========================================= */

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

  .zprow.mobile-carousel > .zpelem-col.premium-category-column {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .zprow.mobile-carousel .premium-category-cta {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =========================================
   MOBILE: LEFT-ALIGN BUTTON IN FOURTH SLIDE
   ========================================= */

@media screen and (max-width: 767px) {

  .zprow.mobile-carousel > .zpelem-col.premium-category-column {
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .zprow.mobile-carousel .premium-category-cta {
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;

    width: 100% !important;
    max-width: 280px !important;

    gap: 12px !important;
    justify-content: space-between !important;
    text-align: left !important;
  }

  .zprow.mobile-carousel .premium-category-arrow {
    margin-left: auto !important;
    flex-shrink: 0 !important;
  }
}

/* =========================================
   CLICKABLE PRODUCT HEADINGS
   DESKTOP + MOBILE
   ========================================= */

/* Default heading appearance */
.zprow.mobile-carousel .zpelem-heading a {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  text-decoration: none !important;
  cursor: pointer !important;

  /* Smooth color transition */
  transition: color 0.2s ease, opacity 0.2s ease !important;
}

/* Hover: slightly duller text */
.zprow.mobile-carousel .zpelem-heading a:hover {
  opacity: 0.65 !important;
  text-decoration: none !important;
}

/* Keyboard accessibility */
.zprow.mobile-carousel .zpelem-heading a:focus-visible {
  opacity: 0.65 !important;
  outline: 2px solid #0053FF !important;
  outline-offset: 3px !important;
  border-radius: 2px !important;
}

/* Restore full opacity when not hovering */
.zprow.mobile-carousel .zpelem-heading a:not(:hover):not(:focus-visible) {
  opacity: 1 !important;
}

/* =========================================
   REDUCE SPACE BETWEEN PRODUCT IMAGES
   AND HEADINGS - DESKTOP + MOBILE
   ========================================= */

/* Desktop */
@media screen and (min-width: 768px) {

  .zprow.mobile-carousel > .zpelem-col > .zpelem-heading {
    margin-top: 2px !important;
  }

}

/* Mobile */
@media screen and (max-width: 767px) {

  .zprow.mobile-carousel > .zpelem-col > .zpelem-heading {
    margin-top: 2px !important;
  }

}

/* ==========================================
   TIGHTEN SPACE ABOVE BRAND DIVIDER
   ========================================== */

/* Final product section */
.zpsection:has(.mobile-carousel)
  :is(.mobile-carousel, .mobile-carousel-controls) {
  margin-bottom: 0 !important;
}

/* Remove bottom padding from the section
   containing the final product carousel
   immediately before the divider section */
.zpsection:has(.mobile-carousel)
  + .zpsection:has(.zpelem-divider) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Reduce bottom padding in the product section
   when followed by a divider section */
.zpsection:has(.mobile-carousel):has(
  + .zpsection .zpelem-divider
) {
  padding-bottom: 8px !important;
}

/* Tighten the divider section */
.zpsection:has(.mobile-carousel)
  + .zpsection:has(.zpelem-divider) {
  padding-bottom: 8px !important;
}

/* Mobile-specific tighter spacing */
@media (max-width: 767px) {
  .zpsection:has(.mobile-carousel):has(
    + .zpsection .zpelem-divider
  ) {
    padding-bottom: 4px !important;
  }

  .zpsection:has(.mobile-carousel)
    + .zpsection:has(.zpelem-divider) {
    padding-top: 0 !important;
    padding-bottom: 4px !important;
  }
}

/* Brand carousel — tighter desktop spacing */
@media (min-width: 768px) {
  .fourall-brand-ready .fourall-brand-track {
    gap: 4px !important;
  }
}

/* Visit Site button — match mobile styling on desktop */
@media (min-width: 768px) {
  [data-element-id="topband_button"]
  .zpbutton.zpbutton-type-primary {
    background-color: transparent !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
    border-radius: 40px !important;
    box-shadow: none !important;
  }

  [data-element-id="topband_button"]
  .zpbutton.zpbutton-type-primary:hover {
    background-color: #FFFFFF !important;
    color: #0D0726 !important;
    border-color: #FFFFFF !important;
  }
}




/* DESKTOP: Keep current spacing unchanged */
@media screen and (min-width: 768px) {
  #shopCategoryMenu {
    position: relative !important;
    top: -40px !important;
    margin-top: 0 !important;
    margin-bottom: -40px !important;
  }
}

/* MOBILE: Bring dropdown closer without excessive overlap */
@media screen and (max-width: 767px) {

  .zpsection:has(#shopCategoryMenu) {
    padding-top: 0 !important;
  }

  .zprow:has(#shopCategoryMenu) {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  #shopCategoryMenu {
    position: relative !important;
    top: -30px !important;
    margin-top: 0 !important;
    margin-bottom: -30px !important;
  }
}

/* Reduce spacing between the first two body images */
@media screen and (max-width: 767px) {

  /* First body image section */
  .zpsection:has(.zpelem-image):not(:has(#topband_button))
  + .zpsection:has(.zpelem-image) {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Reduce excess spacing around body images */
  .zpsection:has(.zpelem-image) .zpelem-image {
    margin-bottom: 0 !important;
  }
}

/* MOBILE ONLY: Add space above carousel H2 headings */
@media screen and (max-width: 767px) {

  .zpsection:has(.zprow.mobile-carousel) h2 {
    margin-top: 30px !important;
  }

}

/* MOBILE ONLY: Tighten spacing around intro section */
@media screen and (max-width: 767px) {

  /* Reduce space below divider sections */
  .zpsection:has(.zpelem-divider) {
    padding-bottom: 8px !important;
  }

  /* Reduce space above H2 following a divider */
  .zpsection:has(.zpelem-divider)
  + .zpsection:has(h2) {
    padding-top: 8px !important;
  }

  /* Reduce space below Read More button */
  .premium-intro-toggle {
    margin-bottom: 0 !important;
  }

  /* Reduce space below Read More section */
  .zpsection:has(.premium-intro) {
    padding-bottom: 8px !important;
  }

  /* Reduce space above divider following Read More */
  .zpsection:has(.premium-intro)
  + .zpsection:has(.zpelem-divider) {
    padding-top: 4px !important;
  }

}

/* =========================================
   MOBILE: UNIFORM HEADING SPACING
   ========================================= */

@media screen and (max-width: 767px) {

  /* Consistent space above H1 and H2 headings */
  .zpsection h1,
  .zpsection h2 {
    margin-top: 24px !important;
  }

  /* Consistent space below H1 and H2 headings */
  .zpsection h1,
  .zpsection h2 {
    margin-bottom: 12px !important;
  }

  /* Remove extra top spacing from heading wrappers */
  .zpsection .zpelem-heading {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Avoid excessive spacing after dividers */
  .zpsection:has(.zpelem-divider) {
    padding-bottom: 0 !important;
  }

  /* Prevent adjacent section padding from adding gaps */
  .zpsection:has(.zpelem-divider)
  + .zpsection:has(h1),
  .zpsection:has(.zpelem-divider)
  + .zpsection:has(h2) {
    padding-top: 0 !important;
  }

  /* Keep carousel headings consistent */
  .zpsection:has(.zprow.mobile-carousel) h2 {
    margin-top: 24px !important;
  }

}

/* Add Midnight space below the intro dropdown */
.premium-intro {
  margin-bottom: 40px;
}

/* Reduce spacing around the H1 dropdown on mobile */
@media (max-width: 767px) {
  .premium-intro-toggle {
    padding-left: 12px;
    padding-right: 12px;
    gap: 10px;
  }

  .premium-intro-section {
    margin-left: 4px;
    margin-right: 4px;
  }
}

/* Premium Executive Pens - bottom spacing */
@media (min-width: 992px) {
  [data-element-id="elm_UhR4nbaVmRD2fjcLJIwvZg"].zpsection {
    padding-bottom: 60px !important;
  }
}
/* SHOP BY CATEGORY - Correct dropdown order */

#shopCategoryMenu .shop-category-list {
  display: flex !important;
  flex-direction: column !important;
}

#shopCategoryMenu .shop-category-list[hidden] {
  display: none !important;
}

/* 1. Premium Drinkware */
#shopCategoryMenu .shop-category-list a[href="#premium-drinkware"] {
  order: 1 !important;
}

/* 2. Tech Gifts */
#shopCategoryMenu .shop-category-list a[href="#technology-gifts"] {
  order: 2 !important;
}

/* 3. Upscale Bags */
#shopCategoryMenu .shop-category-list a[href="#upscale-bags"] {
  order: 3 !important;
}

/* 4. Custom Apparel */
#shopCategoryMenu .shop-category-list a[href="#premium-apparel-outerwear"] {
  order: 4 !important;
}

/* 5. Office Gifts */
#shopCategoryMenu .shop-category-list a[href="#executive-office-gifts"] {
  order: 5 !important;
}

/* 6. Travel Gifts */
#shopCategoryMenu .shop-category-list a[href="#travel-gifts"] {
  order: 6 !important;
}

/* 7. Outdoor & Leisure */
#shopCategoryMenu .shop-category-list a[href="#outdoor-leisure-gifts"] {
  order: 7 !important;
}

/* 8. Wellness & Self-Care */
#shopCategoryMenu .shop-category-list a[href="#wellness-gifts"] {
  order: 8 !important;
}

/* 9. Sustainable Corporate Gifts */
#shopCategoryMenu .shop-category-list a[href="#eco-friendly-gifts"] {
  order: 9 !important;
}

/* 10. Premium Executive Pens */
#shopCategoryMenu .shop-category-list a[href="#premium-executive-pens"] {
  order: 10 !important;
}
/* ========================================
   SHOP BY CATEGORY - IMAGE + DROPDOWN
   CONSISTENT SPACING ON ALL DEVICES
======================================== */

/* Image container */
.shop-category-image,
.shop-by-category-image {
    position: relative !important;
    margin-bottom: 20px !important;
    padding-bottom: 0 !important;
}

/* Image itself */
.shop-category-image img,
.shop-by-category-image img {
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Dropdown container */
.shop-by-category,
.shop-by-category-dropdown {
    position: relative !important;
    top: auto !important;
    transform: none !important;
    margin-top: 0 !important;
    clear: both !important;
}

/* Mobile */
@media screen and (max-width: 767px) {

    .shop-category-image,
    .shop-by-category-image {
        margin-bottom: 24px !important;
    }

    .shop-by-category,
    .shop-by-category-dropdown {
        margin-top: 0 !important;
    }

}
/* ========================================
   SHOP BY CATEGORY - MOBILE SPACING FIX
======================================== */

@media screen and (max-width: 767px) {

  #shopCategoryMenu {
    margin-top: 24px !important;
    margin-bottom: 0 !important;
    position: relative !important;
    top: auto !important;
    transform: none !important;
  }

}
/* ========================================
   PREMIUM DRINKWARE - TOP SPACING FIX
   MOBILE ONLY
======================================== */

@media screen and (max-width: 767px) {

  /* Reduce spacing above Premium Drinkware */
  #premium-drinkware {
    scroll-margin-top: 80px;
  }

  /* Remove excess top padding from its section */
  .zpsection:has(#premium-drinkware) {
    padding-top: 0 !important;
  }

  /* Keep heading spacing consistent */
  .zpsection:has(#premium-drinkware) h2 {
    margin-top: 24px !important;
    margin-bottom: 12px !important;
  }

}