/* vk-pdp-options
   Split out of the monolithic product-page stylesheet so this section
   owns exactly one file. Do not merge these back together. */

.vpk-option {

    display: flex;

    flex-direction: column;

    gap: 8px;

  }

.vpk-option__label {

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: var(--vpk-muted);

  }

.vpk-option__label span {

    color: var(--vpk-text);

    font-weight: 600;

  }

.vpk-swatches {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

  }

.vpk-swatch {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 8px 16px;

    font-size: 12px;

    font-weight: 600;

    font-family: 'Inter', sans-serif;

    letter-spacing: 0.02em;

    color: var(--vpk-muted);

    background: transparent;

    border: 1px solid #333;

    border-radius: 999px;

    cursor: pointer;

    transition: all 0.2s;

    white-space: nowrap;

    outline: none;

    line-height: 1;

  }

.vpk-swatch:hover {

    border-color: #666;

    color: var(--vpk-text);

  }

.vpk-swatch.is-active {

    border-color: var(--vpk-lime);

    color: var(--vpk-lime);

    background: var(--vpk-lime-10);

  }

.vpk-swatch.is-unavailable {

    opacity: 0.3;

    cursor: not-allowed;

    text-decoration: line-through;

  }

.vpk-mobile-only {

    display: none !important;

  }

.vpk-desktop-only {

    display: flex;

  }

.vpk-option__select {

    width: 100%;

    height: 48px;

    padding: 0 40px 0 14px;

    font-family: 'Inter', sans-serif;

    font-size: 13px;

    font-weight: 600;

    color: var(--vpk-text);

    background: var(--vpk-surface);

    border: 1px solid #333;

    border-radius: var(--vpk-radius);

    cursor: pointer;

    outline: none;

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%23888'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 14px center;

    background-size: 16px;

    transition: border-color 0.2s;

  }

.vpk-option__select:hover {

    border-color: #666;

  }

.vpk-option__select:focus {

    border-color: var(--vpk-lime);

    box-shadow: 0 0 0 2px var(--vpk-lime-10);

  }

.vpk-qty {

    display: flex;

    flex-direction: column;

    gap: 8px;

  }

.vpk-qty__label {

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: var(--vpk-muted);

  }

.vpk-qty__wrap {

    display: inline-flex;

    align-items: center;

    border: 1px solid #333;

    border-radius: var(--vpk-radius);

    overflow: hidden;

    width: fit-content;

  }

.vpk-qty__btn {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 44px;

    height: 44px;

    background: transparent;

    border: none;

    color: var(--vpk-text);

    font-size: 18px;

    cursor: pointer;

    transition: background 0.2s;

    font-family: 'Inter', sans-serif;

  }

.vpk-qty__btn:hover {

    background: rgba(255, 255, 255, 0.05);

  }

.vpk-qty__input {

    width: 56px;

    height: 44px;

    text-align: center;

    font-size: 14px;

    font-weight: 600;

    font-family: 'Inter', sans-serif;

    color: var(--vpk-text);

    background: transparent;

    border: none;

    border-left: 1px solid #333;

    border-right: 1px solid #333;

    outline: none;

    -moz-appearance: textfield;

  }

.vpk-qty__input::-webkit-inner-spin-button,
.vpk-qty__input::-webkit-outer-spin-button {

    -webkit-appearance: none;

    margin: 0;

  }

@media (max-width: 767px) {
  .vpk-mobile-only {

      display: block !important;

    }
  .vpk-desktop-only {

      display: none !important;

    }
}

.vpk-flavor-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 12px;
 margin-bottom: 24px;
 }

.vpk-flavor-count {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 7px 16px;
 background: rgba(170,255,0,0.05);
 border: 1px solid rgba(170,255,0,0.10);
 border-radius: 8px;
 font-size: 12px;
 font-weight: 700;
 color: #AAFF00;
 letter-spacing: 0.03em;
 }

.vpk-flavor-count span {
 font-size: 18px;
 font-weight: 800;
 }

.vpk-flavors {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
 gap: 8px;
 margin-bottom: 28px;
 }

.vpk-flavor {
 display: flex;
 align-items: center;
 padding: 12px 16px;
 font-size: 12.5px;
 font-weight: 600;
 color: #999;
 background: #080808;
 border: 1px solid #181818;
 border-radius: 10px;
 transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 cursor: default;
 text-transform: capitalize;
 position: relative;
 overflow: hidden;
 }

.vpk-flavor::before {
 content: '';
 position: absolute;
 left: 0;
 top: 20%;
 bottom: 20%;
 width: 3px;
 border-radius: 0 3px 3px 0;
 background: #222;
 transition: all 0.3s ease;
 }

.vpk-flavor:hover {
 color: #fff;
 border-color: rgba(170,255,0,0.15);
 background: rgba(170,255,0,0.02);
 transform: translateX(3px);
 }

.vpk-flavor:hover::before {
 background: #AAFF00;
 top: 10%;
 bottom: 10%;
 box-shadow: 0 0 8px rgba(170,255,0,0.3);
 }

.vpk-flavors-note {
 font-size: 11.5px;
 color: #555;
 font-style: italic;
 line-height: 1.65;
 padding-left: 14px;
 border-left: 2px solid rgba(170,255,0,0.12);
 }

@media (max-width: 768px) {
  .vpk-flavors {
 grid-template-columns: repeat(2, 1fr);
 gap: 6px;
 }
  .vpk-flavor {
 font-size: 12px;
 padding: 10px 14px;
 }
}

@media (max-width: 480px) {
  .vpk-flavors {
 grid-template-columns: 1fr 1fr;
 }
  .vpk-flavor {
 font-size: 12px;
 padding: 10px 12px;
 }
}