/* Until the configurator is built (as soon as the page is parsed, it does not wait for the theme scripts)
   the native fields it replaces are not shown, so a slow connection never shows them first. If it does not
   start at all they come back after 8 seconds. This file is only loaded on tube configurator pages. */
body:not(.wkpo-tube-active) #add-to-cart-or-refresh > .product-variants,
body:not(.wkpo-tube-active) #add-to-cart-or-refresh .wk_custom_variant {
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    animation: wkpo-tube-fallback 0s 8s forwards;
}
@keyframes wkpo-tube-fallback { to { visibility: visible; max-height: none; overflow: visible; } }
/* Unlike hidden, clip does not create a scroll ancestor that breaks the theme's sticky gallery. */
html.wkpo-tube-page, body.wkpo-tube-active { overflow-x: clip; }
body.wkpo-tube-active > .alert-warning.row { margin-left: 0; margin-right: 0; }
body.wkpo-tube-active #add-to-cart-or-refresh > .product-variants,
body.wkpo-tube-active #add-to-cart-or-refresh .wk_custom_variant,
body.wkpo-tube-active #add-to-cart-or-refresh .product-variants:not(#wkpo-tube-configurator *) {
    display: none !important;
}
#wkpo-tube-configurator { color: #293b40; font-size: 14px; line-height: 1.5; letter-spacing: 0; margin: 16px 0 24px; min-width: 0; }
#wkpo-tube-configurator * { box-sizing: border-box; letter-spacing: 0; }
#wkpo-tube-configurator .tube-step { border: 0; border-top: 1px solid #d9e2e3; border-radius: 0; margin: 0; padding: 14px 0; min-width: 0; }
#wkpo-tube-configurator h3, #wkpo-tube-configurator legend { display: flex; align-items: center; gap: 10px; color: #27383d; font-size: 17px; font-weight: 600; line-height: 1.4; padding: 0; margin: 0 0 14px; width: 100%; float: none; flex-wrap: wrap; }
#wkpo-tube-configurator h3 > span, #wkpo-tube-configurator legend > span { display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; flex: 0 0 25px; border-radius: 50%; background: #e4f2f2; color: #216779; font-size: 13px; }
#wkpo-tube-configurator h3 small { font-size: 12px; color: #657575; font-weight: 400; margin-left: auto; }
#wkpo-tube-configurator label { display: block; font-size: 13px; margin-bottom: 6px; color: #4b5a5d; }
#wkpo-tube-configurator select, #wkpo-tube-configurator textarea { width: 100%; max-width: 100%; min-height: 44px; background-color: #fff; color: #24393d; border: 1px solid #aabfc1; border-radius: 4px; padding: 10px 12px; font-size: 14px; }
#wkpo-tube-configurator textarea { resize: vertical; }
#wkpo-tube-configurator :focus-visible { outline: 2px solid #157387; outline-offset: 3px; }
#wkpo-tube-configurator canvas { display: block; max-width: 100%; height: auto; }
#wkpo-tube-configurator .tube-section { display: grid; grid-template-columns: minmax(120px, 182px) minmax(0, 1fr); align-items: center; gap: 20px; margin-top: 8px; }
#wkpo-tube-configurator dl { margin: 0; }
#wkpo-tube-configurator dl > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid #edf0ef; padding: 7px 0; }
#wkpo-tube-configurator dt { font-weight: 400; color: #617074; }
#wkpo-tube-configurator dd { margin: 0; font-weight: 600; white-space: nowrap; }
#wkpo-tube-configurator .tube-pieces-drawing { min-width: 0; }
#wkpo-tube-configurator .tube-pieces-drawing canvas { width: 100%; aspect-ratio: 450 / 110; object-fit: contain; }
#wkpo-tube-configurator .tube-length { display: block; }
#wkpo-tube-configurator p { margin: 7px 0 0; font-size: 13px; line-height: 1.55; }
#wkpo-tube-configurator .tube-muted { color: #657575; }
#wkpo-tube-configurator .tube-finishes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
#wkpo-tube-configurator .tube-finishes label { position: relative; margin: 0; cursor: pointer; }
#wkpo-tube-configurator .tube-finishes input { position: absolute; left: 12px; bottom: 15px; width: 16px; height: 16px; accent-color: #20798b; z-index: 1; }
#wkpo-tube-configurator .tube-finishes label > span { display: block; border: 1px solid #bccbcd; border-radius: 4px; padding: 8px 8px 12px; }
#wkpo-tube-configurator .tube-finishes input:checked + span { border-color: #237e8d; background: #f0f8f8; box-shadow: inset 0 0 0 1px #237e8d; }
#wkpo-tube-configurator .tube-finishes b { display: block; padding-left: 30px; font-weight: 600; }
#wkpo-tube-configurator .tube-finishes canvas { margin: auto; }
#wkpo-tube-configurator .tube-cap-detail { display: grid; grid-template-columns: minmax(120px, 210px) minmax(0, 1fr); gap: 12px; align-items: center; margin: 12px 0; }
#wkpo-tube-configurator .tube-cap-detail strong { font-weight: 500; color: #815b25; }
#wkpo-tube-configurator .tube-summary { background: #edf6f4; border-left: 3px solid #348272; padding: 14px 16px; }
#wkpo-tube-configurator .tube-summary strong, #wkpo-tube-configurator .tube-summary span { display: block; }
#wkpo-tube-configurator .tube-summary span { font-size: 13px; margin-top: 4px; }
#wkpo-tube-configurator [data-error] { color: #a92e36; }
@media (max-width: 480px) {
    #wkpo-tube-configurator .tube-section { gap: 14px; grid-template-columns: 130px minmax(0, 1fr); }
    #wkpo-tube-configurator .tube-cap-detail { grid-template-columns: 135px minmax(0, 1fr); gap: 8px; }
    #wkpo-tube-configurator .tube-cap-detail p { font-size: 12px; }
}
#wkpo-tube-configurator .tube-size-row { display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: center; gap: 14px; }
#wkpo-tube-configurator .tube-dimensions { display: flex; flex-wrap: wrap; gap: 5px 16px; font-size: 12px; margin-top: 7px; color: #617074; }
#wkpo-tube-configurator .tube-dimensions b { color: #293b40; white-space: nowrap; }
#wkpo-tube-configurator .tube-cut-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 14px; }
#wkpo-tube-configurator .tube-finish-field { border: 0; margin: 10px 0 0; padding: 0; min-width: 0; }
#wkpo-tube-configurator .tube-finish-field legend { font-size: 13px; font-weight: 400; margin-bottom: 6px; }
#wkpo-tube-configurator .tube-finishes label > span { display: grid; grid-template-columns: minmax(0, 1fr) 96px; align-items: center; padding: 9px 9px 9px 35px; min-height: 80px; }
#wkpo-tube-configurator .tube-finishes input { left: 10px; top: 50%; bottom: auto; transform: translateY(-50%); }
#wkpo-tube-configurator .tube-finishes canvas, #wkpo-tube-configurator .tube-finishes img { grid-column: 2; grid-row: 1 / 4; width: 96px; height: auto; }
#wkpo-tube-configurator .tube-finishes small { grid-column: 1; grid-row: 2; display: block; color: #657575; font-size: 12px; line-height: 1.3; margin: 2px 0 4px; }
#wkpo-tube-configurator .tube-finishes b { grid-column: 1; grid-row: 1; padding-left: 0; }
#wkpo-tube-configurator .tube-finishes em { grid-column: 1; grid-row: 3; color: #216779; font-style: normal; font-size: 12px; white-space: nowrap; }
#wkpo-tube-configurator .tube-caps-toggle { display: flex; align-items: center; gap: 10px; cursor: pointer; }
#wkpo-tube-configurator .tube-caps-toggle input { flex: 0 0 18px; width: 18px; height: 18px; accent-color: #20798b; }
#wkpo-tube-configurator .tube-caps-toggle small { display: block; color: #657575; }
#wkpo-tube-configurator .tube-caps-toggle b { margin-left: auto; color: #216779; font-size: 13px; white-space: nowrap; }
#wkpo-tube-configurator .tube-cap-detail { grid-template-columns: 120px minmax(0, 1fr); margin: 8px 0 0; }
#wkpo-tube-configurator .tube-cap-detail p { margin: 0; font-size: 12px; }
#wkpo-tube-configurator .tube-summary { padding: 10px 12px; }
@media (max-width: 600px) {
    #wkpo-tube-configurator .tube-size-row { grid-template-columns: 68px minmax(0, 1fr); gap: 10px; }
    #wkpo-tube-configurator .tube-cut-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    #wkpo-tube-configurator .tube-finishes label > span { grid-template-columns: minmax(0, 1fr) 64px; padding-left: 30px; gap: 0 6px; }
    #wkpo-tube-configurator .tube-finishes canvas, #wkpo-tube-configurator .tube-finishes img { width: 64px; }
    #wkpo-tube-configurator .tube-cap-detail { grid-template-columns: 90px minmax(0, 1fr); }
}

#wkpo-tube-configurator img { display: block; max-width: 100%; height: auto; }
#wkpo-tube-configurator .tube-pieces-drawing img { width: 100%; object-fit: contain; }
#wkpo-tube-configurator .tube-label-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#wkpo-tube-configurator .tube-label-row label { margin: 0; }
#wkpo-tube-configurator .tube-info-btn { flex: 0 0 22px; width: 22px; height: 22px; padding: 0; border: 1px solid #2f7f91; border-radius: 50%; background: #fff; color: #216779; font: italic 700 13px/20px Georgia, serif; text-align: center; cursor: pointer; }
#wkpo-tube-configurator .tube-info-btn[aria-expanded="true"] { background: #216779; color: #fff; }
#wkpo-tube-configurator .tube-info { background: #eef6fb; border-left: 3px solid #2f7f91; margin: 10px 0 0; padding: 9px 12px; font-size: 13px; line-height: 1.5; }
#wkpo-tube-configurator .tube-info[hidden] { display: none; }
#wkpo-tube-configurator .tube-hint { color: #4b5a5d; font-size: 13px; line-height: 1.45; margin: 0 0 6px; overflow-wrap: anywhere; }
#wkpo-tube-configurator textarea { overflow-wrap: anywhere; line-height: 1.45; min-height: 78px; }
@media (max-width: 600px) {
    #wkpo-tube-configurator textarea { font-size: 16px; }
}