/* Subx PDP options flow. Site palette: gold #D4AF37, cream surfaces, ink #171717. */

/* Native panel handling: pre-hidden while the flow boots, removed once it mounts,
   restored if the flow declines the page. */
html body.subx-flow form.cart table.variations,
html body.subx-flow .tm-extra-product-options {
    visibility: hidden;
}
html body.subx-flow-on form.cart table.variations,
html body.subx-flow-on .tm-extra-product-options,
html body.subx-flow-on form.cart .reset_variations {
    display: none !important;
}
html body.subx-flow-off form.cart table.variations,
html body.subx-flow-off .tm-extra-product-options {
    visibility: visible;
}

/* ---------- panel ---------- */
html body.subx-flow-on .subx-flow-panel,
html body.subx-flow-on .subx-flow-panel * {
    transition: none !important;
    box-sizing: border-box;
    text-transform: none;
}
html body.subx-flow-on .subx-flow-panel {
    background: #F7F4EC !important;
    border: 1px solid #EDE7DA !important;
    border-radius: 14px !important;
    padding: 22px 20px 14px !important;
    margin: 18px 0 22px !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    color: #171717 !important;
}
html body.subx-flow-on .subx-fp-head {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid #E7E4DC !important;
}
html body.subx-flow-on .subx-fp-title {
    margin: 0 !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    color: #171717 !important;
    line-height: 1.3 !important;
}
html body.subx-flow-on .subx-fp-state {
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #9B9B9B !important;
    white-space: nowrap !important;
}
html body.subx-flow-on .subx-fp-state.done { color: #B08A2F !important; }

/* ---------- progress chips ---------- */
html body.subx-flow-on .subx-fp-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 14px 0 4px !important;
}
html body.subx-flow-on .subx-fp-chip {
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    border: 1px solid #E7E4DC !important;
    border-radius: 999px !important;
    padding: 6px 13px !important;
    color: #8B8B8B !important;
    background: #FFFFFF !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}
html body.subx-flow-on .subx-fp-chip.active {
    color: #171717 !important;
    border-color: #171717 !important;
}
html body.subx-flow-on .subx-fp-chip.done {
    color: #171717 !important;
    border-color: #D4AF37 !important;
}
html body.subx-flow-on .subx-fp-chip-tick { color: #B08A2F !important; }

/* ---------- stage headers ---------- */
html body.subx-flow-on .subx-fp-stage {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    padding: 18px 0 8px !important;
    border-bottom: 1px solid #E7E4DC !important;
}
html body.subx-flow-on .subx-fp-stage h4 {
    margin: 0 !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #171717 !important;
}
html body.subx-flow-on .subx-fp-stage-count {
    margin-left: auto !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #9B9B9B !important;
}
html body.subx-flow-on .subx-fp-stage-count.done { color: #B08A2F !important; }

/* ---------- confirmed rows ---------- */
html body.subx-flow-on .subx-fp-done {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #EDE7DA !important;
}
html body.subx-flow-on .subx-fp-done img {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
    background: #FFFFFF !important;
    border: 1px solid #E7E4DC !important;
    border-radius: 10px !important;
    flex: 0 0 44px !important;
    mix-blend-mode: multiply;
}
html body.subx-flow-on .subx-fp-done-noimg { display: none !important; }
html body.subx-flow-on .subx-fp-done-meta { min-width: 0 !important; display: block !important; }
html body.subx-flow-on .subx-fp-done-g {
    display: block !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    color: #8B8B8B !important;
}
html body.subx-flow-on .subx-fp-done-v {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #171717 !important;
    margin-top: 1px !important;
}
html body.subx-flow-on .subx-fp-change {
    margin-left: auto !important;
    background: none !important;
    border: 0 !important;
    cursor: pointer !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: #171717 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    padding: 8px 0 8px 8px !important;
    box-shadow: none !important;
}
html body.subx-flow-on .subx-fp-change:hover { color: #B08A2F !important; background: none !important; }

/* ---------- queued rows ---------- */
html body.subx-flow-on .subx-fp-next {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 0 !important;
    border-bottom: 1px solid #EDE7DA !important;
    opacity: .5 !important;
}
html body.subx-flow-on .subx-fp-next span:first-child {
    font-size: 13.5px !important;
    color: #6B6B6B !important;
}
html body.subx-flow-on .subx-fp-next-dot { margin-left: auto !important; color: #9B9B9B !important; }

/* ---------- open group card ---------- */
html body.subx-flow-on .subx-fp-open {
    background: #FFFFFF !important;
    border: 1px solid #E7E4DC !important;
    border-radius: 12px !important;
    padding: 16px 16px 14px !important;
    margin: 12px 0 !important;
    scroll-margin-top: 140px;
}
html body.subx-flow-on .subx-fp-open-head {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    margin-bottom: 13px !important;
}
html body.subx-flow-on .subx-fp-open-head h5 {
    margin: 0 !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #171717 !important;
}
html body.subx-flow-on .subx-fp-req {
    margin-left: auto !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #B08A2F !important;
    white-space: nowrap !important;
}

/* ---------- swatch tiles ---------- */
html body.subx-flow-on .subx-fp-tiles {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)) !important;
    gap: 8px !important;
}
html body.subx-flow-on .subx-fp-tile {
    position: relative !important;
    background: #FBF9F4 !important;
    border: 1px solid #E7E4DC !important;
    border-radius: 10px !important;
    padding: 12px 6px 10px !important;
    cursor: pointer !important;
    text-align: center !important;
}
html body.subx-flow-on .subx-fp-tile:hover { border-color: #C9BC94 !important; }
html body.subx-flow-on .subx-fp-tile img {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto 6px !important;
    mix-blend-mode: multiply;
}
html body.subx-flow-on .subx-fp-tile-label {
    display: block !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    line-height: 1.45 !important;
    color: #171717 !important;
}
html body.subx-flow-on .subx-fp-tile.no-img { padding: 20px 8px !important; }
html body.subx-flow-on .subx-fp-tile.no-img .subx-fp-tile-label { font-size: 12.5px !important; }
html body.subx-flow-on .subx-fp-tile[aria-checked="true"] {
    border: 1.5px solid #D4AF37 !important;
    background: #FFFDF4 !important;
}
html body.subx-flow-on .subx-fp-tick {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: #D4AF37 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
}
html body.subx-flow-on .subx-fp-tile[aria-checked="true"] .subx-fp-tick { display: flex !important; }

/* ---------- add to cart gate ---------- */
html body.subx-flow-on .single_add_to_cart_button.subx-flow-locked,
html body.subx-flow-on .single_add_to_cart_button.subx-flow-locked:hover {
    background: #FFFFFF !important;
    border: 1px solid #E7E4DC !important;
    color: #9B9B9B !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}
html body.subx-flow-on .woocommerce-variation-add-to-cart-disabled .single_add_to_cart_button {
    opacity: 1 !important;
}
html body.subx-flow-on .single_add_to_cart_button.subx-flow-locked:disabled,
html body.subx-flow-on .single_add_to_cart_button.subx-flow-locked.disabled {
    pointer-events: none !important;
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
html body.subx-flow-on .subx-flow-panel { padding: 18px 16px 10px !important; }
}
@media (max-width: 767px) {
html body.subx-flow-on .subx-flow-panel { padding: 16px 14px 8px !important; margin: 14px 0 18px !important; }
html body.subx-flow-on .subx-fp-title { font-size: 17px !important; }
html body.subx-flow-on .subx-fp-tiles { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)) !important; }
html body.subx-flow-on .subx-fp-open { padding: 12px 12px 10px !important; scroll-margin-top: 110px; }
html body.subx-flow-on .subx-fp-done img { width: 40px !important; height: 40px !important; flex-basis: 40px !important; }
}
/* SUBX-FLOW-HIDE-MAX: the native panel stays hidden even against older armored rules, all widths */
html body.subx-flow-on:not(#subx-a):not(#subx-b):not(#subx-c) form.cart table.variations,
html body.subx-flow-on:not(#subx-a):not(#subx-b):not(#subx-c) form.cart table.variations *,
html body.subx-flow-on:not(#subx-a):not(#subx-b):not(#subx-c) .tm-extra-product-options,
html body.subx-flow-on:not(#subx-a):not(#subx-b):not(#subx-c) form.cart .reset_variations {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Total bar: no background at any width, blends with the page */
html body.subx-flow-on:not(#subx-a):not(#subx-b):not(#subx-c) .single_variation {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    box-shadow: none !important;
}