@import url(https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap);.gibson {
  font-family: "poppinsLight", sans-serif;
  word-spacing: 2px; }
  .gibson b,
  .gibson strong {
    font-weight: 600; }

@keyframes fontVariantBolder {
  from {
    font-variation-settings: 'wght' 500, 'wdth' 35; }
  to {
    font-variation-settings: 'wght' 600, 'wdth' 56.67; } }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.chakra-petch {
  font-family: "Chakra Petch", sans-serif; }

.ccm-stick-customizer-container {
  padding-left: 0;
  padding-right: 0; }
  @media (min-width: 769px) {
    .ccm-stick-customizer-container {
      max-width: 1920px; } }

.ccm-stick-customizer-banner {
  background-color: #E41E2E;
  text-transform: uppercase;
  font-weight: 700;
  padding: 32px 16px; }
  @media (min-width: 769px) {
    .ccm-stick-customizer-banner {
      padding: 40px 48px; } }
  .ccm-stick-customizer-banner h2 {
    font-style: italic;
    font-size: 48px;
    color: #fff;
    margin-bottom: 10px; }
  .ccm-stick-customizer-banner .reference {
    font-size: 18px;
    color: #fff; }
    .ccm-stick-customizer-banner .reference span {
      color: #000; }

.ccm-stick-customizer-container .user-info {
  padding: 32px 16px; }
  @media (min-width: 769px) {
    .ccm-stick-customizer-container .user-info {
      padding: 40px 48px; } }

.ccm-stick-customizer-container h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px; }
  @media (min-width: 769px) {
    .ccm-stick-customizer-container h3 {
      font-size: 24px; } }

.ccm-stick-customizer-container .user-info-desc {
  font-size: 14px;
  margin-bottom: 56px;
  font-weight: 400; }
  @media (min-width: 769px) {
    .ccm-stick-customizer-container .user-info-desc {
      font-size: 18px;
      margin-bottom: 40px;
      max-width: 690px; } }

.ccm-stick-customizer-container .form-control-label {
  font-size: 14px; }
  @media (min-width: 769px) {
    .ccm-stick-customizer-container .form-control-label {
      font-size: 18px; } }

.ccm-stick-customizer-container #userDetails-form-fname {
  background-image: none !important; }

.ccm-stick-customizer-container .storeLocatorInfo {
  background-color: #D9D4CF;
  padding: 32px 16px; }
  @media (min-width: 769px) {
    .ccm-stick-customizer-container .storeLocatorInfo {
      padding: 56px 48px 42px; } }
  .ccm-stick-customizer-container .storeLocatorInfo h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px; }
    @media (min-width: 769px) {
      .ccm-stick-customizer-container .storeLocatorInfo h2 {
        font-size: 18px; } }
  .ccm-stick-customizer-container .storeLocatorInfo .form-group {
    -ms-flex: 1;
        flex: 1; }

.ccm-stick-customizer-container .storeDetails {
  width: 100%; }
  @media (min-width: 769px) {
    .ccm-stick-customizer-container .storeDetails {
      width: 50%; } }
  .ccm-stick-customizer-container .storeDetails .form-control-label {
    transform: translate(2.4rem, 45px);
    font-size: 12px;
    font-weight: 700;
    color: #000;
    margin-bottom: 0; }
  .ccm-stick-customizer-container .storeDetails .form-control-label.js-focus, .ccm-stick-customizer-container .storeDetails .form-control-label.js-not-empty {
    transform: translate(2.1rem, 31px);
    border-color: #000; }
  .ccm-stick-customizer-container .storeDetails .btn {
    background: rgba(0, 0, 0, 0.24);
    border: 2px solid #767676;
    margin: 16px 0 3rem;
    border-left: 0;
    padding: 26px 24px;
    border-color: #000;
    cursor: pointer; }

.name-or-location-input {
  background: transparent;
  border: 2px solid #000;
  padding: 14px 24px;
  height: 80px;
  line-height: 26px;
  box-sizing: border-box;
  width: 570px;
  box-shadow: none !important;
  font-size: 20px;
  text-transform: capitalize;
  line-height: 26px;
  margin: 0;
  border-right: 0;
  width: 100%; }
  .name-or-location-input:focus {
    box-shadow: none !important;
    border-color: #000; }

.store-cards-container {
  background-color: #f3f3f3;
  padding: 16px; }
  @media (min-width: 769px) {
    .store-cards-container {
      padding: 48px; } }
  .store-cards-container .card {
    padding: 24px 24px 0;
    border: 0; }
    @media (min-width: 769px) {
      .store-cards-container .card {
        padding: 32px; } }
    .store-cards-container .card .submit-button {
      background: #E41E2E;
      padding: 12px 24px;
      color: #FFFFFF;
      font-size: 18px;
      left: 0;
      margin-left: -24px;
      margin-right: -24px;
      cursor: pointer;
      -ms-flex-pack: justify;
          justify-content: space-between; }
      .store-cards-container .card .submit-button::before {
        content: '';
        display: block;
        background: url("../../../images/store-icon.png") center center no-repeat;
        width: 24px;
        height: 24px;
        -ms-flex-order: 2;
            order: 2; }
      @media (min-width: 769px) {
        .store-cards-container .card .submit-button {
          width: 100%;
          margin-left: 0;
          margin-right: 0;
          position: absolute;
          bottom: -70px;
          opacity: 0;
          transition: bottom 0.5s ease, opacity 0.3s ease;
          visibility: hidden;
          padding: 20px 32px;
          font-size: 24px;
          -ms-flex-pack: unset;
              justify-content: unset; }
          .store-cards-container .card .submit-button::before {
            -ms-flex-order: unset;
                order: unset;
            margin-right: 12px;
            width: 32px;
            height: 32px; } }
    .store-cards-container .card:not(.submit-button):hover .submit-button {
      bottom: 0;
      opacity: 1;
      visibility: visible; }
  .store-cards-container .store-name {
    font-size: 18px;
    font-family: "grotesk15";
    font-weight: 700;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.24); }
  .store-cards-container .store-address {
    padding: 32px 0;
    font-family: "Helvetica Neue", sans-serif !important; }
    .store-cards-container .store-address .address {
      font-size: 18px;
      font-weight: 700; }
    .store-cards-container .store-address .address2 {
      font-size: 16px;
      font-style: italic; }
  .store-cards-container .distance {
    font-size: 16px; }
  .store-cards-container .title {
    font-size: 12px;
    font-weight: 400; }

.ccm-stick-customizer-order-banner {
  padding: 32px 16px;
  background-color: #000;
  color: #fff; }
  @media (min-width: 769px) {
    .ccm-stick-customizer-order-banner {
      padding: 40px 48px; } }

.ccm-stick-customizer-order-banner .header-title {
  font-size: 24px;
  font-style: italic; }
  @media (min-width: 769px) {
    .ccm-stick-customizer-order-banner .header-title {
      font-size: 48px; } }

.ccm-stick-customizer-order-banner .ref-number {
  font-size: 14px; }
  @media (min-width: 769px) {
    .ccm-stick-customizer-order-banner .ref-number {
      font-size: 18px; } }

.ccm-stick-customizer-order-banner span {
  color: #E41E2E; }

.ccm-stick-customizer-confirmation {
  padding: 32px 16px; }
  @media (min-width: 769px) {
    .ccm-stick-customizer-confirmation {
      padding: 48px; } }
  .ccm-stick-customizer-confirmation .title {
    font-size: 18px;
    margin-bottom: 12px;
    font-weight: 700; }
    @media (min-width: 769px) {
      .ccm-stick-customizer-confirmation .title {
        font-size: 32px;
        margin-bottom: 32px; } }
  .ccm-stick-customizer-confirmation .desc {
    font-size: 14px;
    margin-bottom: 14px;
    font-weight: 400; }
    @media (min-width: 769px) {
      .ccm-stick-customizer-confirmation .desc {
        font-size: 18px;
        margin-bottom: 72px; } }
  .ccm-stick-customizer-confirmation .ref-number-label {
    font-size: 18px;
    font-weight: 500; }
    .ccm-stick-customizer-confirmation .ref-number-label span {
      color: #E41E2E; }
  .ccm-stick-customizer-confirmation .download-deisgn-btn {
    background-color: #E41E2E;
    padding: 24px;
    border: 0;
    color: #fff !important;
    text-decoration: none;
    display: block;
    font-weight: 700;
    font-size: 18px; }
    @media (min-width: 769px) {
      .ccm-stick-customizer-confirmation .download-deisgn-btn {
        font-size: 20px; } }
    .ccm-stick-customizer-confirmation .download-deisgn-btn:hover {
      color: #fff; }

#design-thumbnail {
  max-height: 248px;
  width: 100%;
  height: 248px; }
  @media (min-width: 769px) {
    #design-thumbnail {
      max-width: 100%;
      height: 248px;
      width: auto;
      display: block; } }

#orderDetails-form-quantity {
  border-radius: 0;
  box-shadow: -13px 13px 0 -11px #767676, 13px 13px 0 -11px #767676;
  background: none; }

.all-products-container img {
  width: 400px !important; }

.c-design-container {
  overflow-y: auto;
  max-height: 600px; }

.b-container,
.all-products-container,
.g-container,
.p-container {
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  margin-bottom: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  display: -ms-flexbox;
  display: flex;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #e22929 #f1f5f9;
  -webkit-overflow-scrolling: touch; }
  .b-container .design-label,
  .all-products-container .design-label,
  .g-container .design-label,
  .p-container .design-label {
    position: absolute;
    font-size: 14px;
    color: #9ca3af;
    top: 0px;
    left: 10px;
    background-color: #fff;
    padding: 3px 8px;
    -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
    padding: 8px 0; }

/* For Webkit-based browsers (Chrome, Safari) */
.c-scrollbar::-webkit-scrollbar {
  width: 8px; }

.c-scrollbar::-webkit-scrollbar-thumb {
  background-color: #e22929;
  border-radius: 4px; }

.c-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9; }