/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 08 2026 | 06:27:07 */
/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 
/* ================================
   NOM NOM JAR BUILDER
================================ */

.nn-jar-builder {
  margin: 90px auto 120px;
  max-width: 1500px;
  padding: 0 40px;
}

.nn-jar-builder-grid {
  display: grid;
  grid-template-columns: minmax(320px, 380px) minmax(700px, 1fr);
  gap: 80px;
  align-items: start;
}

.nn-jar-box-panel {
  background: #050505;
  border: 3px solid #ff3f98;
  border-radius: 32px;
  padding: 40px;
  min-height: 220px;
  position: sticky;
  top: 120px;
}

.nn-jar-box-panel h2 {
  color: white;
  font-size: 82px;
  line-height: 0.9;
  margin-bottom: 30px;
  text-transform: uppercase;
  word-break: keep-all;
}

.nn-empty-box {
  color: #cfcfcf;
  font-size: 22px;
  margin-bottom: 25px;
}

.nn-box-count {
  color: #ff3f98;
  font-size: 24px;
  font-weight: 700;
}

.nn-jar-order-panel {
  max-width: 720px;
}

.nn-jar-order-panel h2 {
  font-size: 78px;
  line-height: 0.9;
  margin-bottom: 20px;
  text-transform: uppercase;
  max-width: 700px;
}

.nn-jar-order-panel p {
  font-size: 20px;
  line-height: 1.6;
  color: #555;
  max-width: 680px;
}

.nn-jar-counter {
  background: #050505;
  border: 3px solid #ff3f98;
  border-radius: 28px;
  padding: 22px 28px;
  color: white;
  font-size: 42px;
  font-weight: 700;
  margin: 35px 0;
  text-transform: uppercase;
  max-width: 720px;
}

.nn-jar-counter span {
  color: #ff3f98;
}

.nn-pack-options {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 24px;
  margin-bottom: 48px;
  max-width: 720px;
}

.nn-pack-options button {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  color: #111 !important;
  border: 2px solid #e4e4e4;
  border-radius: 22px;
  padding: 22px 10px 18px;
  min-height: 96px;
  width: 100%;
  cursor: pointer;
  transition: all 0.22s ease;
  font-size: 17px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.04);
}

.nn-pack-options button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 5px;
  background: #ff3f98;
  border-radius: 0 0 999px 999px;
  opacity: 0.85;
}

.nn-pack-options button span {
  display: block;
  font-size: 22px;
  font-weight: 900;
  color: #ff3f98;
  margin-top: 9px;
  letter-spacing: -0.5px;
}

.nn-pack-options button:hover {
  border-color: #ff3f98;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(255,63,152,0.15);
}

.nn-pack-options button.active {
  background: #050505;
  color: #fff !important;
  border-color: #ff3f98;
  box-shadow: 0 18px 36px rgba(255,63,152,0.22);
}

.nn-pack-options button.active {
  background: #050505;
  color: #fff !important;
  border-color: #32d17c;
  box-shadow: 0 18px 36px rgba(50, 209, 124, 0.22);
}

.nn-pack-options button.active::before {
  background: #32d17c;
}

.nn-pack-options button.active span {
  color: #32d17c;
}
/* ================================
   JAR QUANTITY SELECTOR
================================ */

.nn-jar-qty {
  display: inline-flex;
  align-items: center;
  background: #ff4f9f;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(255, 79, 159, 0.22);
  margin-top: 16px;
}

.nn-jar-qty button {
  width: 54px;
  height: 54px;
  border: none;
  background: transparent;
  color: white;
  font-size: 30px;
  font-weight: 900;
  cursor: pointer;
  transition: all 0.2s ease;

  display: flex;
  align-items: center;
  justify-content: center;

  line-height: 1;
  padding: 0;

  transform: translateY(-1px);
}

.nn-jar-qty button:hover {
  background: rgba(255,255,255,0.12);
}

.nn-jar-qty .nn-qty-count {
  width: 52px;
  height: 54px;
  background: white;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
}

.nn-jar-qty.is-active {
  background: #32d17c;
  box-shadow: 0 12px 28px rgba(50, 209, 124, 0.28);
}

.nn-jar-qty button:focus,
.nn-jar-qty button:active,
.nn-jar-qty button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.nn-jar-qty.is-active .nn-qty-count {
  color: #32d17c;
}
@media (max-width: 1200px) {

  .nn-jar-builder {
    padding: 0 20px;
  }

  .nn-jar-builder-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .nn-jar-box-panel {
    position: relative;
    top: auto;
    padding: 30px;
  }

  .nn-jar-box-panel h2,
  .nn-jar-order-panel h2 {
    font-size: 52px;
  }

  .nn-jar-counter {
    font-size: 28px;
  }

  .nn-pack-options {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 12px;
    max-width: 100%;
    margin-bottom: 28px;
  }

  .nn-pack-options button {
    width: 100%;
    min-width: auto !important;
    min-height: 60px;
    font-size: 18px;
    padding: 18px 20px;
  }

}

.nn-jar-note {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 720px;
  margin: -10px auto 34px;
  padding: 13px 24px;
  background: #fff4fa;
  border: 2px solid rgba(255, 63, 152, 0.35);
  border-radius: 999px;
  color: #333;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 8px 22px rgba(255, 63, 152, 0.08);
}

.nn-totals {
  margin-top: 10px;
}
/* ================================
   PACK SIZE MODAL
================================ */

.nn-pack-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;

  background: rgba(0,0,0,0.78) !important;

  display: none !important;
  align-items: center !important;
  justify-content: center !important;

  z-index: 999999999 !important;
  padding: 20px !important;
}

.nn-pack-modal.show {
  display: flex !important;
}

.nn-pack-modal-card {
  position: relative !important;

  background: #050505 !important;
  border: 3px solid #ff3f98 !important;
  border-radius: 32px !important;

  padding: 38px !important;

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

  box-shadow: 0 25px 80px rgba(0,0,0,0.5) !important;

  transform: translateY(0) !important;
}

.nn-pack-modal-card h2 {
  color: #fff !important;
  font-size: 52px !important;
  line-height: 0.92 !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

.nn-pack-modal-card p {
  color: #d7d7d7 !important;
  font-size: 18px !important;
  margin-bottom: 28px !important;
}

.nn-pack-modal-close {
  position: absolute !important;
  top: 16px !important;
  right: 22px !important;

  background: transparent !important;
  border: none !important;

  color: #fff !important;

  font-size: 42px !important;
  line-height: 1 !important;

  cursor: pointer !important;
}

.nn-pack-modal-options {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 14px !important;
}

.nn-pack-modal-options button {
  background: #fff !important;
  color: #111 !important;

  border: 2px solid #e4e4e4 !important;
  border-radius: 22px !important;

  padding: 22px 10px 18px !important;

  min-height: 96px !important;

  font-size: 17px !important;
  font-weight: 900 !important;

  text-transform: uppercase !important;

  cursor: pointer !important;
}

.nn-pack-modal-options button span {
  display: block !important;

  color: #ff3f98 !important;

  font-size: 22px !important;
  font-weight: 900 !important;

  margin-top: 8px !important;
}

@media (max-width: 700px) {

  .nn-pack-modal-card h2 {
    font-size: 38px !important;
  }

  .nn-pack-modal-options {
    grid-template-columns: repeat(2, 1fr) !important;
  }

}
body.nn-modal-open {
  overflow: hidden;
}

.nn-pack-modal-card {
  animation: nnModalPop 0.22s ease-out;
}

@keyframes nnModalPop {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
#nn-pack-modal.nn-pack-modal.show {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 2147483647 !important;
}

#nn-pack-modal.nn-pack-modal {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.82) !important;
}

#nn-pack-modal .nn-pack-modal-card {
  z-index: 2147483647 !important;
}
.nn-box-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 24px 0;
}

.nn-box-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  background: #ffffff;
  color: #111;

  border-radius: 18px;
  padding: 14px 16px;

  font-size: 15px;
  font-weight: 900;

  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
}

.nn-box-item-name {
  line-height: 1.2;
}

.nn-box-item-qty {
  background: #ff3f98;
  color: #fff;

  min-width: 38px;
  height: 38px;

  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;
  font-weight: 900;
}
.nn-progress-wrap {
  width: 100%;
  max-width: 720px;
  height: 16px;
  background: #eeeeee;
  border-radius: 999px;
  overflow: hidden;
  margin: -20px 0 34px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.12);
}

.nn-progress-bar {
  height: 100%;
  width: 0%;
  background: #ff3f98;
  border-radius: 999px;
  transition: width 0.3s ease, background 0.3s ease;
}

.nn-progress-bar.is-complete {
  background: #32d17c;
}

.nn-jar-counter.is-complete {
  border-color: #32d17c;
  box-shadow: 0 0 0 4px rgba(50, 209, 124, 0.16),
              0 18px 36px rgba(50, 209, 124, 0.22);
}

.nn-box-count.is-complete {
  color: #32d17c;
}
.nn-pack-modal-options button.active {
  background: #050505 !important;
  color: #fff !important;
  border-color: #32d17c !important;
  box-shadow: 0 18px 36px rgba(50, 209, 124, 0.22) !important;
}

.nn-pack-modal-options button.active span {
  color: #32d17c !important;
}
.nn-builder-cta {
  display: block;
  margin-top: 28px;
  max-width: 720px;
  background: #ffffff;
  border: none;
  border-radius: 24px;
  padding: 22px;
  text-align: center;
  box-shadow: 0 10px 28px rgba(255, 63, 152, 0.08);
}

.nn-builder-cta-text {
  color: #333 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  margin-bottom: 14px !important;
}

.nn-add-box-btn {
  width: 100%;
  background: #ff3f98 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 16px 24px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  cursor: pointer;
}

.nn-add-box-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 63, 152, 0.22);
}

@media (max-width: 700px) {
  .nn-builder-cta {
    position: sticky;
    bottom: 16px;
    z-index: 9999;
  }
}
.nn-accordion-toggle {
  cursor: pointer;
  background: #0a0a0a;
  color: #fff !important;

  width: 100%;
  max-width: 980px;

  margin: 34px auto 10px;
  padding: 14px 26px;

  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.05);

  box-shadow:
    0 6px 16px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.04);

  transition: all .22s ease;
}

/* Hover */
.nn-accordion-toggle:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 60, 158, .25);
  box-shadow:
    0 10px 20px rgba(0,0,0,.14),
    0 0 0 1px rgba(255,60,158,.08);
}

/* Title sizing */
.nn-accordion-toggle h2,
.nn-accordion-toggle h3,
.nn-accordion-toggle {
  font-size: clamp(26px, 2.5vw, 40px) !important;
  line-height: 1 !important;
  letter-spacing: .5px;
}

/* Plus icon */
.nn-accordion-toggle::after {
  content: "+";
  color: #ff3c9e;
  font-size: 24px;
  font-weight: 700;

  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
}

.nn-accordion-toggle.nn-open::after {
  content: "−";
  color: #fff;
}

/* Category descriptions */
.nn-accordion-toggle + p,
.nn-accordion-toggle + .kt-adv-heading,
.nn-accordion-toggle + h5 {
  max-width: 760px;

  margin:
    0 auto 18px !important;

  font-size: 13px !important;
  line-height: 1.5 !important;

  text-align: center;

  opacity: .72;
}

.nn-accordion-content {
  display: none;
}

.nn-accordion-content.nn-open {
  display: block;
}
/* Cleaner, smaller accordion headers */
.nn-accordion-toggle {
  cursor: pointer;
  background: #0a0a0a;
  color: #fff !important;

  width: 100%;
  max-width: 980px;

  margin: 34px auto 10px;
  padding: 14px 26px;

  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.05);

  box-shadow:
    0 6px 16px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.04);

  transition: all .22s ease;

  font-size: clamp(26px, 2.5vw, 40px) !important;
  line-height: 1 !important;
  letter-spacing: .5px;

  position: relative;
}

.nn-accordion-toggle:hover {
  transform: translateY(-1px);

  border-color: rgba(255, 60, 158, .25);

  box-shadow:
    0 10px 20px rgba(0,0,0,.14),
    0 0 0 1px rgba(255,60,158,.08);
}

.nn-accordion-toggle::after {
  content: "+";

  color: #ff3c9e;

  font-size: 24px;
  font-weight: 700;

  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
}

.nn-accordion-toggle.nn-open::after {
  content: "−";
  color: #fff;
}

.nn-accordion-toggle::after {
  font-size: 26px;
}

/* Category subtitles */
.nn-accordion-toggle + p,
.nn-accordion-toggle + .kt-adv-heading,
.nn-accordion-toggle + h5 {
  max-width: 920px;

  margin: 10px auto 26px !important;

  font-size: 20px !important;
  line-height: 1.7 !important;

  letter-spacing: .2px;

  text-align: center;

  color: #222 !important;

  font-weight: 600;

  opacity: 1;
}
/* Flavor grid container */
.nn-accordion-content {
  max-width: 1040px;
  margin: 18px auto 42px;
}

/* Shrink flavor card text */
.nn-accordion-content h2,
.nn-accordion-content h3,
.nn-accordion-content h4 {
  font-size: clamp(18px, 1.8vw, 26px) !important;
  line-height: 1.05 !important;
  margin-top: 14px !important;
  margin-bottom: 8px !important;
}

.nn-accordion-content p {
  font-size: 15px !important;
  line-height: 1.55 !important;

  max-width: 92%;

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

  color: #444 !important;

  font-weight: 500;
}
.nn-accordion-content h3,
.nn-accordion-content h4 {
  margin-bottom: 10px !important;
}
/* Shrink quantity selector spacing */
.nn-accordion-content .nn-flavor-controls,
.nn-accordion-content .nn-qty-control,
.nn-accordion-content .nn-jar-qty {
  margin-top: 10px !important;
  transform: scale(.9);
}

/* Slightly reduce image dominance */
.nn-accordion-content img {
  max-height: 430px;
  object-fit: cover;
}

@media (max-width: 768px) {
  .nn-accordion-toggle {
    margin: 24px 12px 6px;
    padding: 13px 16px;
    font-size: 25px !important;
  }

  .nn-accordion-content {
    margin: 14px 10px 34px;
  }

  .nn-accordion-content h2,
  .nn-accordion-content h3,
  .nn-accordion-content h4 {
    font-size: 21px !important;
  }

  .nn-accordion-content p {
    font-size: 13px !important;
  }

  .nn-accordion-content img {
    max-height: 360px;
  }
}
/* Center collapsed accordion sections */
.nn-flavor-accordion,
.nn-accordion-toggle,
.nn-accordion-content,
.chocolate-toggle,
.vanilla-toggle,
.cinnamon-toggle,
.classics-toggle {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Center category descriptions */
.vanilla-toggle + p,
.cinnamon-toggle + p,
.classics-toggle + p,
.chocolate-toggle + p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Make accordion bars feel centered */
.nn-accordion-toggle {
  width: 100%;
  max-width: 860px;
}
/* FINAL ACCORDION OVERRIDE */
.nn-accordion-toggle {
  max-width: 980px !important;
  padding: 14px 26px !important;
  margin: 34px auto 10px !important;
  border-radius: 14px !important;
  background: #0a0a0a !important;
  position: relative !important;
  font-size: clamp(26px, 2.5vw, 40px) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.12) !important;
}

.nn-accordion-toggle::after {
  float: none !important;
  position: absolute !important;
  right: 22px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 24px !important;
}

.nn-accordion-toggle + p,
.nn-accordion-toggle + .kt-adv-heading,
.nn-accordion-toggle + h5 {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}
/* FINAL CANDY ACCORDION STYLE */
.nn-accordion-toggle {
  background: linear-gradient(135deg, #ff3f98 0%, #8f4cff 55%, #16c7ff 100%) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.45) !important;
  box-shadow: 0 12px 28px rgba(255,63,152,.20) !important;
}

.nn-accordion-toggle::after,
.nn-accordion-toggle.nn-open::after {
  color: #fff !important;
}

.nn-accordion-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(143,76,255,.24) !important;
}
/* ================================
   LIGHTER BUILDER SECTION POLISH
================================ */

.nn-jar-builder {
  margin: 70px auto 95px !important;
}

.nn-jar-builder-grid {
  gap: 52px !important;
}

/* Your Box panel */
.nn-jar-box-panel {
  background: linear-gradient(135deg, #ff3f98 0%, #8f4cff 60%, #16c7ff 100%) !important;
  border: none !important;
  border-radius: 24px !important;
  padding: 30px !important;
  min-height: 180px !important;
  box-shadow: 0 14px 34px rgba(255,63,152,.18) !important;
}

.nn-jar-box-panel h2 {
  font-size: 52px !important;
  line-height: .95 !important;
  margin-bottom: 18px !important;
}

.nn-empty-box {
  color: #fff !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
}

.nn-box-count {
  color: #fff !important;
  font-size: 18px !important;
}

/* Builder heading */
.nn-jar-order-panel h2 {
  font-size: 54px !important;
  line-height: .95 !important;
  margin-bottom: 14px !important;
}

.nn-jar-order-panel p {
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* 0 / 0 Jars Selected box */
.nn-jar-counter {
  font-size: 28px !important;
  padding: 16px 22px !important;
  border-radius: 18px !important;
  margin: 24px 0 24px !important;
  max-width: 560px !important;
}

.nn-progress-wrap {
  max-width: 560px !important;
  height: 10px !important;
  margin: -14px 0 28px !important;
}

/* Pack size area */
.nn-pack-options {
  max-width: 560px !important;
  gap: 10px !important;
  margin-bottom: 28px !important;
}

.nn-pack-options button {
  min-height: 74px !important;
  padding: 16px 8px 12px !important;
  font-size: 13px !important;
  border-radius: 16px !important;
}

.nn-pack-options button span {
  font-size: 16px !important;
}

/* Add to cart card */
.nn-builder-cta {
  max-width: 560px !important;
  padding: 18px !important;
  border-radius: 20px !important;
}

.nn-builder-cta-text {
  font-size: 14px !important;
}

.nn-add-box-btn {
  font-size: 14px !important;
  padding: 13px 20px !important;
}
/* ================================
   BUILDER DETAILS POLISH
================================ */

/* Totals */
.nn-totals {
  max-width: 560px !important;
  margin-top: 22px !important;
  background: #fff8fc !important;
  border: 1px solid rgba(255,63,152,.16) !important;
  border-radius: 18px !important;
  padding: 18px 20px !important;
  box-shadow: 0 10px 24px rgba(255,63,152,.06) !important;
}

.nn-totals p,
.nn-totals div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 10px !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  color: #222 !important;
}

.nn-totals p:last-child,
.nn-totals div:last-child {
  margin-bottom: 0 !important;
  font-weight: 900 !important;
}

/* Pack note */
.nn-jar-note {
  background: linear-gradient(135deg, #fff7fc, #ffffff) !important;
  border: 2px solid rgba(255,63,152,.28) !important;
  color: #222 !important;
  font-size: 14px !important;
  padding: 13px 24px !important;
  box-shadow: 0 10px 24px rgba(255,63,152,.08) !important;
}

/* Add to cart card */
.nn-builder-cta {
  background: linear-gradient(135deg, #fff, #fff5fa) !important;
  border: 1px solid rgba(255,63,152,.14) !important;
  box-shadow: 0 16px 34px rgba(255,63,152,.10) !important;
}

.nn-builder-cta-text {
  color: #222 !important;
  font-weight: 900 !important;
  letter-spacing: .2px !important;
}

.nn-add-box-btn {
  background: linear-gradient(135deg, #ff3f98, #ff5bac) !important;
  box-shadow: 0 10px 24px rgba(255,63,152,.20) !important;
}
/* ================================
   PACK BUTTON TYPOGRAPHY FIX
================================ */

.nn-pack-options button {
  min-height: 92px !important;
  padding: 18px 10px 14px !important;
}

/* PACK TITLE */
.nn-pack-options button strong,
.nn-pack-options button .nn-pack-title,
.nn-pack-options button span:first-child {
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .3px !important;
}

/* PRICE */
.nn-pack-options button span:last-child,
.nn-pack-options button .price {
  font-size: 24px !important;
  font-weight: 900 !important;
  margin-top: 10px !important;
}

/* ACTIVE BUTTON */
.nn-pack-options button.active,
.nn-pack-options button.selected {
  transform: translateY(-2px);
  box-shadow:
    0 14px 28px rgba(0,255,163,.18),
    0 4px 10px rgba(0,0,0,.12) !important;
}

.nn-add-box-btn:hover {
  background: linear-gradient(135deg, #ff2f90, #8f4cff) !important;
}
/* ================================
   PACK SIZE CARD SCALE UP
================================ */

.nn-pack-options button {
  min-height: 118px !important;
  min-width: 148px !important;

  padding: 20px 12px 18px !important;

  border-radius: 22px !important;
}

/* PACK TITLE */
.nn-pack-options button strong,
.nn-pack-options button .nn-pack-title,
.nn-pack-options button span:first-child {
  font-size: 28px !important;
  font-weight: 900 !important;

  line-height: 1 !important;

  letter-spacing: .4px !important;
}

/* PRICE */
.nn-pack-options button span:last-child,
.nn-pack-options button .price {
  font-size: 36px !important;
  font-weight: 900 !important;

  margin-top: 14px !important;
}

/* TOP PINK ACCENT */
.nn-pack-options button::before {
  height: 10px !important;
  border-radius: 999px !important;
}
/* ================================
   FLAVOR NAV SECTION UPGRADE
================================ */

/* The row/section that holds the flavor intro */
.nn-flavor-nav-section {
  max-width: 1180px;
  margin: 54px auto 70px !important;
  padding: 34px 28px !important;

  background:
    radial-gradient(circle at top left, rgba(255,63,152,.16), transparent 34%),
    radial-gradient(circle at bottom right, rgba(22,199,255,.16), transparent 34%),
    linear-gradient(135deg, #ffffff, #fff6fb);

  border: 2px solid rgba(255,63,152,.14);
  border-radius: 28px;

  box-shadow: 0 18px 42px rgba(255,63,152,.10);
}

/* Main headline */
.nn-flavor-nav-section h2,
.nn-flavor-nav-section h3 {
  font-size: clamp(32px, 4vw, 58px) !important;
  line-height: 1.05 !important;
  text-align: center !important;
  margin-bottom: 24px !important;
}

/* Existing clickable buttons */
.nn-flavor-nav-section a,
.nn-flavor-nav-section .wp-block-button__link {
  border-radius: 999px !important;
  padding: 14px 24px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.10) !important;
  transition: all .2s ease !important;
}

.nn-flavor-nav-section a:hover,
.nn-flavor-nav-section .wp-block-button__link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 28px rgba(255,63,152,.18) !important;
}
.nn-flavor-jump-nav {
  max-width: 980px;
  margin: 55px auto 70px !important;
  padding: 40px 28px !important;
  text-align: center;
  border-radius: 30px;
  background:
    radial-gradient(circle at top left, rgba(255,63,152,.16), transparent 35%),
    radial-gradient(circle at bottom right, rgba(22,199,255,.16), transparent 35%),
    linear-gradient(135deg, #fff, #fff6fb);
  border: 2px solid rgba(255,63,152,.16);
  box-shadow: 0 18px 42px rgba(255,63,152,.10);
}

.nn-flavor-jump-nav h2 {
  font-size: clamp(34px, 4vw, 58px) !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
}

.nn-flavor-jump-nav p {
  font-size: 18px !important;
  line-height: 1.5 !important;
  max-width: 720px;
  margin: 0 auto 28px !important;
  color: #333 !important;
  font-weight: 600;
}

.nn-flavor-jump-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.nn-flavor-jump-buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff3f98, #8f4cff, #16c7ff);
  color: #fff !important;
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none !important;
  box-shadow: 0 10px 24px rgba(255,63,152,.18);
}

.nn-flavor-jump-buttons a:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(143,76,255,.24);
}
/* ================================
   PAGE RHYTHM + FLAVOR POLISH
================================ */

/* Tighten spacing between major sections */
.nn-flavor-jump-nav {
  margin-bottom: 45px !important;
}

.nn-jar-builder {
  margin-top: 45px !important;
  margin-bottom: 70px !important;
}

/* Bring first accordion closer after builder */
.chocolate-toggle {
  margin-top: 20px !important;
}

/* Give flavor galleries a softer premium container feel */
.nn-accordion-content.nn-open {
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,246,251,.82)) !important;
  border: 1px solid rgba(255,63,152,.10) !important;
  border-radius: 30px !important;
  padding: 34px 28px 40px !important;
  box-shadow: 0 22px 50px rgba(255,63,152,.08) !important;
}

/* Clean card spacing inside flavor galleries */
.nn-accordion-content .kt-row-column-wrap {
  row-gap: 38px !important;
}

/* Product images feel more premium */
.nn-accordion-content img {
  border-radius: 18px !important;
  box-shadow: 0 12px 26px rgba(0,0,0,.14) !important;
}

/* Slightly stronger flavor titles */
.nn-accordion-content h2,
.nn-accordion-content h3,
.nn-accordion-content h4 {
  margin-top: 16px !important;
  font-weight: 900 !important;
}

/* Improve selected quantity control spacing */
.nn-accordion-content .nn-jar-qty {
  margin-top: 12px !important;
}

/* Tighten collapsed category spacing */
.vanilla-toggle,
.cinnamon-toggle,
.classics-toggle {
  margin-top: 42px !important;
}

@media (max-width: 768px) {
  .nn-flavor-jump-nav {
    margin: 34px 14px 34px !important;
    padding: 30px 18px !important;
  }

  .nn-jar-builder {
    margin-top: 34px !important;
    margin-bottom: 48px !important;
  }

  .nn-accordion-content.nn-open {
    padding: 22px 14px 28px !important;
    border-radius: 22px !important;
  }

  .vanilla-toggle,
  .cinnamon-toggle,
  .classics-toggle {
    margin-top: 34px !important;
  }
}
/* ================================
   ALIGN FLAVOR QUANTITY SELECTORS
================================ */

.nn-accordion-content .wp-block-kadence-column,
.nn-accordion-content .kt-inside-inner-col {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.nn-accordion-content .nn-jar-qty {
  margin-top: auto !important;
  align-self: center !important;
}

/* Give descriptions consistent space before selector */
.nn-accordion-content p {
  min-height: 90px;
}
/* Bigger Add To Cart text */
.nn-add-box-btn {
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}
/* Bigger pack size text */
.nn-pack-options button {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}

/* Keep price size separate */
.nn-pack-options button span,
.nn-pack-options button .price {
  font-size: 30px !important;
}
/* ================================
   MOBILE BUILDER STACK ORDER
================================ */

@media (max-width: 768px) {
  .nn-jar-builder-grid {
    display: flex !important;
    flex-direction: column !important;
  }

  .nn-jar-order-panel {
    order: 1 !important;
  }

  .nn-jar-box-panel {
    order: 2 !important;
    display: none !important;
  }

  .nn-jar-box-panel.nn-has-items {
    display: block !important;
  }
}
/* =========================
   HERO CTA BUTTON
========================= */

.hero a[href="#jar-builder"],
a[href="#jar-builder"] {

  background: linear-gradient(
    135deg,
    #ff3f98 0%,
    #a24dff 50%,
    #16c7ff 100%
  ) !important;

  color: #ffffff !important;

  border: 2px solid rgba(255,255,255,.7) !important;

  border-radius: 999px !important;

  padding: 18px 38px !important;

  font-size: 18px !important;

  font-weight: 900 !important;

  letter-spacing: .12em !important;

  text-transform: uppercase !important;

  text-decoration: none !important;

  box-shadow:
    0 18px 40px rgba(255,63,152,.38),
    0 8px 18px rgba(22,199,255,.22),
    inset 0 1px 0 rgba(255,255,255,.35) !important;

  transition: all .25s ease !important;

  position: relative;

  overflow: hidden;

}

/* Hover */

.hero a[href="#jar-builder"]:hover,
a[href="#jar-builder"]:hover {

  transform: translateY(-3px) scale(1.05) !important;

  box-shadow:
    0 24px 52px rgba(162,77,255,.42),
    0 10px 22px rgba(22,199,255,.26),
    inset 0 1px 0 rgba(255,255,255,.4) !important;

}

/* Mobile */

@media (max-width: 768px) {

  .hero a[href="#jar-builder"],
  a[href="#jar-builder"] {

    padding: 16px 28px !important;

    font-size: 16px !important;

    letter-spacing: .1em !important;

  }

}