/**
 * Profile Configurator Frontend Styles
 *
 * Styles for the metal profile configurator on single product pages.
 * Follows the target design with two-column layout and accordion UI.
 */

/* CSS Variables - Based on Figma design specs */
:root {
    --speedly-bg-light: #F9F9F9;
    --speedly-bg-white: #ffffff;
    --speedly-border: #E6E7E8;
    --speedly-border-light: #D9D9D9;
    --speedly-text-primary: #000000;
    --speedly-text-secondary: #373737;
    --speedly-text-muted: #878380;
    --speedly-text-light: #ABABAB;
    --speedly-accent: #48A38F;
    --speedly-cta-bg: #48A38F;
    --speedly-cta-hover: #3d8f7c;
    --speedly-cta-text: #ffffff;
    --speedly-price-bg: #F9F9F9;
    --speedly-info-bg: rgba(239, 169, 81, 0.20);
    --speedly-info-border: transparent;
    --speedly-error: #FF0000;
    --speedly-success: #48A38F;

    --speedly-radius-sm: 0;
    --speedly-radius-md: 0;
    --speedly-radius-lg: 0;

    --speedly-spacing-xs: 4px;
    --speedly-spacing-sm: 8px;
    --speedly-spacing-md: 16px;
    --speedly-spacing-lg: 24px;
    --speedly-spacing-xl: 32px;

    --speedly-focus-ring: 0 0 0 3px rgba(72, 163, 143, 0.4);
    --speedly-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --speedly-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);

    --speedly-transition: 0.2s ease;
}

/* Container */
.profile-configurator-page {
    max-width: 1340px;
    margin: 0 auto;
}

.profile-configurator-container {
    display: flex;
    flex-direction: column;
    gap: var(--speedly-spacing-xl);
}

/* Disable double-tap-to-zoom on every interactive element inside the
   configurator. Without this, mobile Safari/Chrome treat a quick double
   tap on the +/- quantity buttons (or any other tap target) as a
   "zoom in here" gesture, which makes rapid clicking impossible.
   `touch-action: manipulation` keeps pinch-zoom and panning intact —
   it only suppresses the legacy double-tap zoom and the 300ms tap
   delay, which is exactly what we want for a touch UI. */
.profile-configurator-container,
.profile-configurator-container button,
.profile-configurator-container input,
.profile-configurator-container select,
.profile-configurator-container label,
.profile-configurator-container .accordion-header,
.profile-configurator-container .profile-quantity-selector,
.profile-configurator-container .profile-quantity-selector * {
    touch-action: manipulation;
}

/* Desktop: Two-column layout */
@media (min-width: 768px) {
    .profile-configurator-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--speedly-spacing-xl);
        align-items: start;
    }
}

@media (min-width: 1024px) {
    .profile-configurator-container {
        grid-template-columns: 55fr 45fr;
    }
}

/* ========================================
   LEFT COLUMN: Canvas Preview
   ======================================== */

.profile-canvas-column {
    position: sticky;
    top: var(--speedly-spacing-lg);
}

.profile-canvas-wrapper {
    background: var(--speedly-bg-white);
    padding: var(--speedly-spacing-md);
    /* Border and margin now on .profile-display-area parent */
}

#profile-preview-canvas {
    display: block;
    max-width: 100%;
}

/* Zoom Controls */
.profile-zoom-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--speedly-spacing-sm);
    margin-top: var(--speedly-spacing-sm);
    padding-top: var(--speedly-spacing-sm);
    border-top: 1px solid var(--speedly-border);
}

.profile-zoom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--speedly-border);
    border-radius: var(--speedly-radius-sm);
    background: var(--speedly-bg-white);
    color: var(--speedly-text-secondary);
    cursor: pointer;
    transition: all var(--speedly-transition);
}

.profile-zoom-btn:hover {
    background: var(--speedly-bg-light);
    border-color: var(--speedly-text-muted);
    color: var(--speedly-text-primary);
}

.profile-zoom-btn:focus-visible {
    outline: none;
    box-shadow: var(--speedly-focus-ring);
}

.profile-zoom-btn svg {
    width: 16px;
    height: 16px;
}

.profile-zoom-level {
    min-width: 48px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--speedly-text-secondary);
    font-variant-numeric: tabular-nums;
}

.profile-zoom-reset {
    margin-left: var(--speedly-spacing-xs);
}

/* Display Area - contains slides */
.profile-display-area {
    position: relative;
    background: var(--speedly-bg-white);
    border: 1px solid var(--speedly-border-light);
    border-radius: var(--speedly-radius-md);
    margin-bottom: var(--speedly-spacing-md);
    overflow: hidden;
}

/* Slides */
.profile-slide {
    display: none;
}

.profile-slide--active {
    display: block;
}

/* Canvas wrapper slide */
.profile-slide.profile-canvas-wrapper {
    padding: var(--speedly-spacing-md);
    border: none;
    margin-bottom: 0;
}

/* Image wrapper slide */
.profile-image-wrapper {
    display: none;
    width: 100%;
    aspect-ratio: 3 / 2;
    background: var(--speedly-bg-light);
}

.profile-image-wrapper.profile-slide--active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-gallery-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Thumbnail Gallery */
.profile-thumbnail-gallery {
    display: flex;
    gap: var(--speedly-spacing-sm);
    flex-wrap: wrap;
}

.profile-thumbnail {
    width: 60px;
    height: 60px;
    border: 2px solid var(--speedly-border);
    border-radius: var(--speedly-radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--speedly-transition), box-shadow var(--speedly-transition);
    background: var(--speedly-bg-white);
}

.profile-thumbnail:hover,
.profile-thumbnail:focus {
    border-color: var(--speedly-accent);
}

.profile-thumbnail--active {
    border-color: var(--speedly-accent);
    box-shadow: 0 0 0 2px rgba(72, 163, 143, 0.3);
}

.profile-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Canvas thumbnail */
.profile-thumbnail--canvas {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--speedly-bg-white);
}

.profile-thumbnail--canvas canvas {
    width: 100%;
    height: 100%;
}

/* ========================================
   RIGHT COLUMN: Configurator
   ======================================== */

.profile-configurator-column {
    display: flex;
    flex-direction: column;
    gap: var(--speedly-spacing-md);
}

/* Product Header */
.profile-product-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--speedly-spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--speedly-spacing-sm);
}

.profile-product-title {
    font-size: 30px;
    font-weight: 700;
    color: var(--speedly-text-primary);
    margin: 0;
    flex: 1;
}

.profile-product-price-header {
    text-align: right;
}

.profile-price-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    justify-content: flex-end;
}

.profile-price-from {
    font-size: 25px;
    font-weight: 700;
    color: var(--speedly-text-primary);
}

.profile-price-value {
    font-size: 25px;
    font-weight: 700;
    color: var(--speedly-text-primary);
}

/* Remove default WooCommerce price styling */
.profile-price-value .woocommerce-Price-amount,
.profile-price-value .amount {
    font-size: inherit;
    font-weight: inherit;
}

.profile-price-note {
    display: block;
    font-size: 12px;
    color: var(--speedly-text-secondary);
    line-height: 1;

}

/* Info Text - main styles in INFO BOX section below */

.profile-info-text p {
    margin: 0;
}

.profile-guide-link {
    color: var(--speedly-text-secondary);
    text-decoration: underline;
}

.profile-guide-link:hover {
    color: var(--speedly-text-primary);
}

/* ========================================
   QUANTITY SELECTOR
   ======================================== */

.profile-quantity-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    border: 1px solid var(--speedly-border);
    margin: var(--speedly-spacing-md) 0;
}

.profile-qty-btn {
    width: 58px;
    height: 100%;
    border: none;
    background: transparent;
    font-size: 35px;
    font-weight: 400;
    color: var(--speedly-text-primary);
    cursor: pointer;
    transition: color var(--speedly-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.profile-qty-btn:hover {
    background: transparent;
    color: #EFA951;
}

.profile-qty-btn:focus,
.profile-qty-btn:focus-visible {
    outline: none;
    box-shadow: none;
    background: transparent;
    color: #EFA951;
}

.profile-qty-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--speedly-spacing-xs);
    flex: 1;
    font-size: 16px;
    color: var(--speedly-text-primary);
}

.profile-qty-input,
input[type="number"].profile-qty-input {
    width: 60px;
    border: none !important;
    background: #ffffff !important;
    text-align: right;
    font-size: 16px;
    font-weight: 400;
    color: var(--speedly-text-primary);
    -moz-appearance: textfield;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
}

.profile-qty-input::-webkit-inner-spin-button,
.profile-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.profile-qty-input:focus,
input[type="number"].profile-qty-input:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.profile-qty-label {
    font-size: 16px;
    color: var(--speedly-text-primary);
}

/* ========================================
   SAVED SETTINGS NOTICE
   ======================================== */

.profile-saved-notice {
    background-color: rgba(239, 169, 81, 0.20);
    padding: 10px 16px;
    margin: 0 0 var(--speedly-spacing-md) 0;
    font-size: 13px;
    color: var(--speedly-text-secondary);
    text-align: center;
    line-height: 1.4;
}

.profile-saved-notice[hidden] {
    display: none;
}

.profile-reset-link {
    color: var(--speedly-text-primary);
    font-weight: 700;
    text-decoration: none;
}

.profile-reset-link:hover {
    text-decoration: underline;
}

/* ========================================
   ACCORDION
   ======================================== */

.profile-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px dotted var(--speedly-border-light);
    counter-reset: section-counter;
}

.accordion-section {
    border-bottom: 1px dotted var(--speedly-border-light);
    counter-increment: section-counter;
}

/* Hidden sections don't increment counter */
.accordion-section[style*="display: none"],
.accordion-section[hidden] {
    counter-increment: none;
}

.accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--speedly-spacing-sm);
    padding: 8px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    color: var(--speedly-text-primary);
    transition: color var(--speedly-transition);
}

.accordion-header:hover {
    color: #EFA951;
    background: transparent;
}

.accordion-header:hover .accordion-icon {
    color: #EFA951;
}

.accordion-header:focus,
.accordion-header:focus-visible {
    outline: none;
    box-shadow: none;
    background: transparent !important;
    color: var(--speedly-text-primary) !important;
}

.accordion-header:focus .accordion-title,
.accordion-header:focus .accordion-number,
.accordion-header:focus-visible .accordion-title,
.accordion-header:focus-visible .accordion-number {
    color: var(--speedly-text-primary) !important;
}

.accordion-number {
    font-weight: 400;
    min-width: 24px;
}

/* Dynamic numbering using CSS counter */
.accordion-number::before {
    content: counter(section-counter) ".";
}

.accordion-title {
    flex: 1;
    display: flex;
    align-items: center;
    font-weight: 400;
}

.accordion-title-text {
    flex-shrink: 0;
}

.accordion-selected-value {
    margin-left: auto;
    font-size: 14px;
    color: var(--speedly-text-muted);
    font-weight: 400;
}

.accordion-icon {
    font-size: 35px;
    font-weight: 400;
    line-height: 1;
    color: var(--speedly-text-primary);
    transition: transform var(--speedly-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
}

.accordion-content {
    padding: 0 0 var(--speedly-spacing-lg) 0;
    display: none;
}

.accordion-content--visible,
.accordion-content:not([hidden]) {
    display: block;
}

.accordion-placeholder {
    padding: var(--speedly-spacing-sm) 0;
    color: var(--speedly-text-light);
    font-size: 16px;
}

/* ========================================
   SHARED OPTION BOX STYLES (Material, Color, Assembly)
   ======================================== */

/* Visually hidden for accessibility */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Generic fieldset reset */
.profile-option-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

/* Generic 3-column grid for option boxes */
.profile-option-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--speedly-spacing-md);
}

@media (max-width: 480px) {
    .profile-option-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mounting direction grid - 2 columns */
.mounting-direction-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* End Cap Grid - 3 columns */
.end-cap-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* Generic option container */
.profile-option {
    position: relative;
}

/* Generic option label (clickable wrapper — border is on image, not label) */
.profile-option-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--speedly-spacing-xs);
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--speedly-radius-md);
    cursor: pointer;
    background: transparent;
    transition: transform var(--speedly-transition);
    text-align: center;
    height: 100%;
}

.profile-option-label:hover {
    transform: translateY(-2px);
}

/* Generic option title (below the bordered image area) */
.profile-option-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--speedly-text-primary);
    line-height: 1.2;
}

/* Generic image wrapper (bordered card area) */
.profile-option-image-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid var(--speedly-border);
    border-radius: var(--speedly-radius-md);
    background: var(--speedly-bg-white);
    padding: var(--speedly-spacing-sm);
    transition: border-color var(--speedly-transition);
}

.profile-option-label:hover .profile-option-image-wrapper {
    border-color: var(--speedly-text-muted);
}

.profile-option-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.profile-option-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--speedly-bg-light);
    border-radius: var(--speedly-radius-sm);
    color: var(--speedly-text-light);
}

.profile-option-image-placeholder .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
}

/* Selected state - green border on image wrapper */
.profile-option-radio:checked + .profile-option-label .profile-option-image-wrapper {
    border-color: var(--speedly-accent);
}

.profile-option-radio:checked + .profile-option-label .profile-option-title {
    color: var(--speedly-accent);
}

/* Focus state for keyboard navigation */
.profile-option-radio:focus-visible + .profile-option-label .profile-option-image-wrapper {
    outline: 2px solid var(--speedly-accent);
    outline-offset: 2px;
}

/* Image zoom - only when selected */
.profile-option-image-zoom {
    position: relative;
}

.profile-option-radio:checked + .profile-option-label .profile-option-image-zoom {
    cursor: zoom-in;
}

.profile-option-radio:checked + .profile-option-label .profile-option-image-zoom::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.2s;
    border-radius: var(--speedly-radius-sm);
}

.profile-option-radio:checked + .profile-option-label .profile-option-image-zoom:hover::after {
    background: rgba(0, 0, 0, 0.05);
}

/* Material options: button-style layout (like thickness) */
.material-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.material-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--speedly-spacing-md);
}

.material-option {
    position: relative;
    flex: 0 0 auto;
}

.material-label {
    display: flex;
    align-items: center;
    gap: var(--speedly-spacing-sm);
    padding: var(--speedly-spacing-sm) var(--speedly-spacing-lg);
    border: 2px solid var(--speedly-border);
    border-radius: var(--speedly-radius-md);
    cursor: pointer;
    background: var(--speedly-bg);
    transition: border-color var(--speedly-transition), background-color var(--speedly-transition), transform var(--speedly-transition);
}

.material-label:hover {
    border-color: var(--speedly-border-hover);
    transform: translateY(-1px);
}

.material-value {
    font-size: 16px;
    font-weight: 400;
    color: var(--speedly-text-primary);
    white-space: nowrap;
}

.material-label .profile-tooltip-info {
    position: static;
    flex-shrink: 0;
}

.material-radio:checked + .material-label {
    border-color: var(--speedly-accent);
    background: rgba(239, 169, 81, 0.05);
}

.material-radio:checked + .material-label .material-value {
    font-weight: 700;
    color: var(--speedly-accent);
}

.material-radio:focus-visible + .material-label {
    outline: 2px solid var(--speedly-accent);
    outline-offset: 2px;
}

.material-option.is-unavailable {
    display: none;
}

/* Color options: image-first layout with title below */
.color-label {
    padding: 0;
    border: none;
    gap: var(--speedly-spacing-sm);
}

.color-label:hover {
    border-color: transparent;
}

.color-label .profile-option-image-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border: 2px solid var(--speedly-border);
    border-radius: var(--speedly-radius-md);
    background: var(--speedly-bg-white);
    transition: border-color var(--speedly-transition), box-shadow var(--speedly-transition);
}

.color-label .profile-option-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--speedly-radius-md);
}

.color-label .profile-option-title {
    font-weight: 400;
    font-size: 14px;
}

/* Color selected state: border on image wrapper */
.color-radio:checked + .color-label {
    border-color: transparent;
}

.color-radio:checked + .color-label .profile-option-image-wrapper {
    border-color: var(--speedly-accent);
    box-shadow: 0 0 0 2px var(--speedly-accent);
}

.color-radio:checked + .color-label .profile-option-title {
    font-weight: 700;
    color: var(--speedly-accent);
}

/* No options message */
.profile-option-no-options {
    padding: var(--speedly-spacing-md) 0;
    color: var(--speedly-text-muted);
    font-size: 14px;
    text-align: center;
}

/* Generic help text (used in multiple sections) */
.profile-help-text {
    margin-top: var(--speedly-spacing-md);
    margin-bottom: 0;
    font-size: 16px;
    color: var(--speedly-text-secondary);
}

.profile-help-text a {
    color: var(--speedly-accent);
    text-decoration: underline;
}

.profile-help-text a:hover {
    color: var(--speedly-accent-dark, #3a8a78);
}

/* ========================================
   IMAGE MODAL (shared across sections)
   ======================================== */

.profile-option-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--speedly-spacing-lg);
}

.profile-option-modal[hidden] {
    display: none;
}

.profile-option-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    cursor: pointer;
}

.profile-option-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    background: var(--speedly-bg-white);
    border-radius: var(--speedly-radius-lg);
    padding: var(--speedly-spacing-md);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--speedly-spacing-sm);
}

.profile-option-modal-close,
.profile-option-modal-close:hover,
.profile-option-modal-close:focus,
.profile-option-modal-close:active {
    position: absolute;
    top: var(--speedly-spacing-sm);
    right: var(--speedly-spacing-sm);
    width: 36px !important;
    height: 36px !important;
    border: none !important;
    background: rgba(0, 0, 0, 0.6) !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    border-radius: 50% !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s;
    z-index: 1;
    color: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

.profile-option-modal-close svg {
    width: 20px;
    height: 20px;
    stroke: #fff !important;
}

.profile-option-modal-close:hover,
.profile-option-modal-close:hover:focus {
    background: rgba(0, 0, 0, 0.8) !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
}

.profile-option-modal-image {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: var(--speedly-radius-md);
}

.profile-option-modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--speedly-text-primary);
}

/* ========================================
   THICKNESS GRID (Section 3)
   ======================================== */

.thickness-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.thickness-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--speedly-spacing-md);
}

.thickness-option {
    position: relative;
    flex: 0 0 auto;
}

.thickness-label {
    display: flex;
    align-items: center;
    gap: var(--speedly-spacing-sm);
    padding: var(--speedly-spacing-sm) var(--speedly-spacing-lg);
    border: 2px solid var(--speedly-border);
    border-radius: var(--speedly-radius-md);
    cursor: pointer;
    background: var(--speedly-bg);
    transition: border-color var(--speedly-transition), background-color var(--speedly-transition), transform var(--speedly-transition);
}

.thickness-label:hover {
    border-color: var(--speedly-border-hover);
    transform: translateY(-1px);
}

.thickness-value {
    font-size: 16px;
    font-weight: 400;
    color: var(--speedly-text-primary);
    white-space: nowrap;
}

.thickness-checkmark {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--speedly-accent);
    border-radius: 50%;
    color: var(--speedly-cta-text);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity var(--speedly-transition), transform var(--speedly-transition);
}

/* Selected state */
.thickness-radio:checked + .thickness-label {
    border-color: var(--speedly-accent);
    background: rgba(239, 169, 81, 0.05);
}

.thickness-radio:checked + .thickness-label .thickness-value {
    font-weight: 700;
    color: var(--speedly-accent);
}

.thickness-radio:checked + .thickness-label .thickness-checkmark {
    opacity: 1;
    transform: scale(1);
}

/* Focus state for keyboard navigation */
.thickness-radio:focus-visible + .thickness-label {
    outline: 2px solid var(--speedly-accent);
    outline-offset: 2px;
}

/* No options message */
.thickness-no-options {
    padding: var(--speedly-spacing-md) 0;
    color: var(--speedly-text-muted);
    font-size: 14px;
    text-align: center;
}

/* Unavailable options (filtered by variant selection) */
.color-option.is-unavailable,
.thickness-option.is-unavailable {
    display: none;
}

/* ========================================
   LENGTH GRID (Section 4)
   ======================================== */

.length-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.length-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--speedly-spacing-md);
}

.length-option {
    position: relative;
    flex: 0 0 auto;
}

.length-label {
    display: flex;
    align-items: center;
    gap: var(--speedly-spacing-sm);
    padding: var(--speedly-spacing-sm) var(--speedly-spacing-lg);
    border: 2px solid var(--speedly-border);
    border-radius: var(--speedly-radius-md);
    cursor: pointer;
    background: var(--speedly-bg);
    transition: border-color var(--speedly-transition), background-color var(--speedly-transition), transform var(--speedly-transition);
}

.length-label:hover {
    border-color: var(--speedly-border-hover);
    transform: translateY(-1px);
}

.length-value {
    font-size: 16px;
    font-weight: 400;
    color: var(--speedly-text-primary);
    white-space: nowrap;
}

.length-checkmark {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--speedly-accent);
    border-radius: 50%;
    color: var(--speedly-cta-text);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity var(--speedly-transition), transform var(--speedly-transition);
}

/* Selected state */
.length-radio:checked + .length-label {
    border-color: var(--speedly-accent);
    background: rgba(239, 169, 81, 0.05);
}

.length-radio:checked + .length-label .length-value {
    font-weight: 700;
    color: var(--speedly-accent);
}

.length-radio:checked + .length-label .length-checkmark {
    opacity: 1;
    transform: scale(1);
}

/* Focus state for keyboard navigation */
.length-radio:focus-visible + .length-label {
    outline: 2px solid var(--speedly-accent);
    outline-offset: 2px;
}

/* No options message */
.length-no-options {
    padding: var(--speedly-spacing-md) 0;
    color: var(--speedly-text-muted);
    font-size: 14px;
    text-align: center;
}

/* Custom length wrapper (shown below pills when Speciallængde selected) */
.length-fieldset + .profile-custom-length-wrapper:not([hidden]) {
    margin-top: var(--speedly-spacing-md);
}

/* Custom length input (shown when Speciallængde selected) */
.profile-custom-length-wrapper {
    display: none;
}

.profile-custom-length-wrapper:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--speedly-spacing-md);
}

.profile-custom-length-label {
    font-size: 16px;
    font-weight: 400;
    color: var(--speedly-text-primary);
    flex-shrink: 0;
}

.profile-custom-length-input-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    border: 1px solid var(--speedly-border) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    width: 206px !important; /* Match select width */
}

.profile-custom-length-input-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Align error message to the right, below the input */
.profile-length-error {
    text-align: right;
    font-size: 12px;
    color: var(--speedly-error);
    margin-top: var(--speedly-spacing-xs);
    display: none;
}

.profile-custom-length-input,
input[type="number"].profile-custom-length-input {
    width: 150px !important;
    height: 44px !important;
    padding: 0 var(--speedly-spacing-md) !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--speedly-bg-light) !important;
    font-size: 16px !important;
    color: var(--speedly-text-primary) !important;
    text-align: left !important;
    -moz-appearance: textfield !important;
    box-shadow: none !important;
}

.profile-custom-length-input::-webkit-inner-spin-button,
.profile-custom-length-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.profile-custom-length-input:focus {
    outline: none;
}

.profile-custom-length-input-wrapper:focus-within {
    border-color: var(--speedly-accent);
    box-shadow: var(--speedly-focus-ring);
}

.profile-custom-length-unit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    min-width: 56px !important;
    padding: 0 var(--speedly-spacing-md) !important;
    background: var(--speedly-bg-white) !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--speedly-text-secondary) !important;
    white-space: nowrap !important;
}

.profile-length-error:not(:empty) {
    display: block;
}

/* ========================================
   MEASUREMENTS FORM (Section 5)
   ======================================== */

.profile-measurements-form {
    display: flex;
    flex-direction: column;
    gap: var(--speedly-spacing-lg);
}

.profile-measurement-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--speedly-spacing-md);
    flex-wrap: wrap;
}

.profile-measurement-label {
    font-size: 16px;
    font-weight: 400;
    color: var(--speedly-text-primary);
    flex-shrink: 0;
}

.profile-measurement-input-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    border: 1px solid var(--speedly-border) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

.profile-measurement-input,
input[type="number"].profile-measurement-input {
    width: 180px !important;
    height: 44px !important;
    padding: 0 var(--speedly-spacing-md) !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--speedly-bg-light) !important;
    font-size: 16px !important;
    color: var(--speedly-text-primary) !important;
    text-align: left !important;
    -moz-appearance: textfield !important;
    box-shadow: none !important;
}

.profile-measurement-input::-webkit-inner-spin-button,
.profile-measurement-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.profile-measurement-input:focus {
    outline: none;
}

.profile-measurement-input-wrapper:focus-within {
    border-color: var(--speedly-accent);
    box-shadow: var(--speedly-focus-ring);
}

input[type="number"].profile-measurement-input.is-default {
    color: #878380 !important;
}

.profile-measurement-input.has-error {
    color: var(--speedly-error);
}

.profile-measurement-input-wrapper.has-error {
    border-color: var(--speedly-error);
}

.profile-measurement-unit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    min-width: 56px !important;
    padding: 0 var(--speedly-spacing-md) !important;
    background: var(--speedly-bg-white) !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--speedly-text-secondary) !important;
    white-space: nowrap !important;
}

/* Make degree symbol larger to match mm visual weight */
.profile-measurement-unit--degree {
    font-size: 24px !important;
    font-weight: 400 !important;
}

.profile-measurement-error {
    font-size: 12px;
    color: var(--speedly-error);
    margin-top: 0;
    display: none;
    width: 100%;
    text-align: right;
}

.profile-measurement-field.has-error .profile-measurement-error {
    display: block;
}

/* Reset all measurements link */
.profile-measurements-reset {
    display: block;
    /* 180px input + 56px unit + 2px border = 238px to match input wrapper width */
    width: 238px;
    margin-left: auto;
    margin-top: var(--speedly-spacing-md);
    font-size: 14px;
    color: var(--speedly-text-muted);
    text-decoration: underline;
    cursor: pointer;
}

.profile-measurements-reset:hover {
    color: var(--speedly-text-secondary);
}

.profile-measurements-reset[hidden] {
    display: none;
}

/* Help/tooltip icon for measurement fields */
.profile-measurement-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--speedly-border);
    border-radius: 50%;
    font-size: 11px;
    color: var(--speedly-text-muted);
    cursor: help;
    flex-shrink: 0;
    margin-left: auto;
}

/* Info tooltip icon (positioned absolute inside image wrapper) */
.profile-tooltip-info {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--speedly-border);
    border-radius: 50%;
    font-size: 11px;
    font-style: italic;
    font-weight: 600;
    color: var(--speedly-text-muted);
    cursor: help;
    flex-shrink: 0;
    z-index: 1;
    background: var(--speedly-bg-white);
}

/* Tooltip icon in card options: absolute top-right within image wrapper.
   Also force the same square aspect + cover/fill behaviour the color
   cards use, so square source images fill the padded content box
   edge-to-edge while keeping the inherited white inner frame (the
   `padding: var(--speedly-spacing-sm)` from .profile-option-image-wrapper). */
.assembly-label .profile-option-image-wrapper,
.mounting-direction-label .profile-option-image-wrapper,
.end-cap-label .profile-option-image-wrapper,
.addon-per-length-toggle-label .profile-option-image-wrapper {
    position: relative;
    aspect-ratio: 1;
}

.assembly-label .profile-option-image,
.mounting-direction-label .profile-option-image,
.end-cap-label .profile-option-image,
.addon-per-length-toggle-label .profile-option-image {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    border-radius: var(--speedly-radius-md);
}

.assembly-label .profile-measurement-help,
.mounting-direction-label .profile-measurement-help,
.end-cap-label .profile-measurement-help,
.addon-per-length-toggle-label .profile-measurement-help {
    position: absolute;
    top: 12px;
    right: 12px;
    margin-left: 0;
    z-index: 1;
    background: var(--speedly-bg-white);
}

/* Reset measurements link */
.profile-reset-measurements {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--speedly-spacing-xs);
    padding: var(--speedly-spacing-sm) 0;
    font-size: 14px;
    color: var(--speedly-error);
    text-decoration: none;
    cursor: pointer;
}

.profile-reset-measurements:hover {
    text-decoration: underline;
}

/* ========================================
   PRICE DISPLAY
   ======================================== */

.profile-price-display {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    gap: var(--speedly-spacing-sm);
    padding: var(--speedly-spacing-sm) var(--speedly-spacing-md);
    height: 37px;
    background: var(--speedly-price-bg);
    border-top: 1px solid var(--speedly-border-light);
}

.profile-price-label {
    font-size: 20px;
    font-weight: 400;
    color: var(--speedly-text-primary);
}

.profile-total-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--speedly-text-primary);
}

.profile-total-price.is-loading {
    opacity: 0.5;
}

.profile-total-price.has-error {
    color: var(--speedly-error);
}

.profile-total-price .price-error {
    font-size: 14px;
    font-weight: 400;
    color: var(--speedly-error);
}

.profile-price-error-message {
    padding: var(--speedly-spacing-sm) var(--speedly-spacing-md);
    background: var(--speedly-price-bg);
    border-top: 1px solid var(--speedly-border-light);
    color: var(--speedly-error);
    font-size: 13px;
    line-height: 1.4;
}

.profile-price-error-message[hidden] {
    display: none;
}

/* ========================================
   PRICE DEBUG (only shown with ?debug=1)
   ======================================== */

.profile-price-debug {
    background: #1e1e1e;
    color: #d4d4d4;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 12px;
    line-height: 1.5;
    padding: var(--speedly-spacing-md);
    margin-bottom: var(--speedly-spacing-sm);
    border-radius: var(--speedly-radius-sm);
    overflow-x: auto;
}

.profile-price-debug .debug-header {
    font-size: 14px;
    font-weight: 700;
    color: #569cd6;
    margin-bottom: var(--speedly-spacing-md);
    padding-bottom: var(--speedly-spacing-sm);
    border-bottom: 1px solid #333;
}

.profile-price-debug .debug-error {
    color: #f14c4c;
    font-weight: 600;
    margin-bottom: var(--speedly-spacing-sm);
}

.profile-price-debug .debug-section {
    margin-bottom: var(--speedly-spacing-md);
    padding-bottom: var(--speedly-spacing-sm);
    border-bottom: 1px solid #333;
}

.profile-price-debug .debug-subtitle {
    color: #4ec9b0;
    font-weight: 600;
    margin-bottom: var(--speedly-spacing-xs);
}

.profile-price-debug .debug-row {
    display: flex;
    justify-content: space-between;
    gap: var(--speedly-spacing-md);
    padding: 2px 0;
}

.profile-price-debug .debug-row span:first-child {
    color: #9cdcfe;
}

.profile-price-debug .debug-row strong {
    color: #dcdcaa;
}

.profile-price-debug .debug-keys {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--speedly-spacing-xs);
    padding-left: var(--speedly-spacing-md);
}

.profile-price-debug code {
    background: #2d2d2d;
    padding: 2px 6px;
    border-radius: 3px;
    color: #ce9178;
    font-size: 11px;
}

.profile-price-debug .debug-total {
    display: flex;
    justify-content: space-between;
    gap: var(--speedly-spacing-md);
    background: #2d2d2d;
    padding: var(--speedly-spacing-sm);
    margin-top: var(--speedly-spacing-sm);
    border-radius: 3px;
}

.profile-price-debug .debug-total span:first-child {
    color: #4ec9b0;
    font-weight: 600;
}

.profile-price-debug .debug-total strong {
    color: #b5cea8;
    font-size: 14px;
}

/* ========================================
   INFO BOX
   ======================================== */

.profile-info-box {
    display: flex;
    align-items: center;
    gap: var(--speedly-spacing-sm);
    padding: var(--speedly-spacing-sm) calc(var(--speedly-spacing-md) / 2);
    height: 37px;
    background: var(--speedly-info-bg);
    font-size: 16px;
    color: var(--speedly-text-primary);
    border-top: 1px solid var(--speedly-border-light);
    overflow: hidden;
    cursor: pointer;
}

.profile-info-text {
    font-size: 14px;
    color: var(--speedly-text-secondary);
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 400;
    color: var(--speedly-text-primary);
    flex-shrink: 0;
}

.profile-info-text strong {
    font-weight: 700;
}

/* ========================================
   ADD TO CART BUTTON
   ======================================== */

.profile-add-to-cart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--speedly-spacing-md);
    width: 100%;
    height: 71px;
    padding: 0 var(--speedly-spacing-lg);
    background: var(--speedly-cta-bg);
    border: none;
    font-size: 20px;
    font-weight: 700;
    color: var(--speedly-cta-text);
    cursor: pointer;
    transition: background-color var(--speedly-transition);
}

.profile-add-to-cart-btn:hover {
    background: var(--speedly-cta-hover);
}

.profile-add-to-cart-btn:focus-visible {
    outline: none;
    box-shadow: var(--speedly-focus-ring);
}

.profile-add-to-cart-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.profile-add-to-cart-btn .btn-content {
    display: flex;
    align-items: center;
    gap: var(--speedly-spacing-sm);
}

.profile-add-to-cart-btn .btn-icon {
    display: flex;
    align-items: center;
}

.profile-add-to-cart-btn .btn-icon svg {
    width: 27px;
    height: 27px;
}

.profile-add-to-cart-btn .btn-thumbnail {
    width: 40px;
    height: 28px;
    object-fit: contain;
    background: rgba(255,255,255,0.2);
}

/* Button States */
.profile-add-to-cart-btn.is-loading .btn-text::after {
    content: '...';
    animation: ellipsis 1.5s infinite;
}

.profile-add-to-cart-btn.is-success {
    background: var(--speedly-success);
}

@keyframes ellipsis {
    0% { content: '.'; }
    33% { content: '..'; }
    66% { content: '...'; }
}

/* ========================================
   DELIVERY INFO
   ======================================== */

.profile-delivery-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--speedly-spacing-sm);
    padding: var(--speedly-spacing-md) 0;
    font-size: 16px;
    color: var(--speedly-text-primary);
}

.profile-delivery-info p {
    margin: 0;
}

.profile-delivery-info .delivery-icon {
    width: 28px;
    height: 28px;
}

.profile-delivery-info a,
.profile-delivery-info u {
    text-decoration: underline;
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 767px) {
    .profile-canvas-column {
        position: static;
    }

    .profile-canvas-wrapper {
        padding: var(--speedly-spacing-sm);
    }

    #profile-preview-canvas {
        max-width: 100%;
    }

    .profile-product-header {
        flex-direction: column;
        gap: var(--speedly-spacing-sm);
    }

    .profile-product-price-header {
        text-align: left;
    }

    .profile-measurement-input {
        max-width: none;
    }
}

/* ========================================
   ACCESSIBILITY: Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .accordion-icon,
    .accordion-header,
    .profile-qty-btn,
    .profile-measurement-input,
    .profile-add-to-cart-btn,
    .profile-thumbnail,
    .profile-option-label,
    .profile-option-image-wrapper {
        transition: none;
    }

    .profile-option-label:hover {
        transform: none;
    }

    @keyframes ellipsis {
        0%, 100% { content: '...'; }
    }
}

/* ========================================
   ASSEMBLY SECTION (Section 6)
   Uses generic .profile-option-* classes for box styling
   ======================================== */

.accordion-section--assembly {
    /* Hidden by default, shown via JS when quantity > 1 */
}

/* Assembly description (only assembly has description) */
.profile-option-description {
    font-size: 12px;
    font-weight: 400;
    color: var(--speedly-text-muted);
    line-height: 1.3;
}

/* Price display on options */
.profile-option-price {
    font-size: 12px;
    font-weight: 600;
    color: var(--speedly-accent);
    margin-top: auto;
    padding-top: var(--speedly-spacing-xs);
}

/* Warning text */
.profile-warning-text {
    margin-top: var(--speedly-spacing-md);
    padding: var(--speedly-spacing-sm) var(--speedly-spacing-md);
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: var(--speedly-radius-sm);
    color: #856404;
    font-size: 16px;
    line-height: 1.5;
}

.profile-warning-text strong {
    font-weight: 700;
}

/* Overlap input wrapper - same line layout like Speciallængde */
.profile-overlap-wrapper {
    margin-top: var(--speedly-spacing-lg);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--speedly-spacing-md);
}

.profile-overlap-label {
    font-size: 16px;
    font-weight: 400;
    flex-shrink: 0;
    color: var(--speedly-text-primary);
}

.profile-overlap-input-group {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    border: 1px solid var(--speedly-border) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    width: 180px;
}

.profile-overlap-input,
input[type="number"].profile-overlap-input {
    width: 120px !important;
    height: 44px !important;
    padding: 0 var(--speedly-spacing-md) !important;
    border: none !important;
    border-radius: 0 !important;
    background: var(--speedly-bg-light) !important;
    font-size: 16px !important;
    color: var(--speedly-text-primary) !important;
    text-align: left !important;
    -moz-appearance: textfield !important;
    box-shadow: none !important;
}

.profile-overlap-input::-webkit-inner-spin-button,
.profile-overlap-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.profile-overlap-input:focus {
    outline: none;
}

.profile-overlap-input-group:focus-within {
    border-color: var(--speedly-accent);
    box-shadow: var(--speedly-focus-ring);
}

.profile-overlap-unit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    min-width: 56px !important;
    padding: 0 var(--speedly-spacing-md) !important;
    background: var(--speedly-bg-white) !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--speedly-text-secondary) !important;
    white-space: nowrap !important;
    text-transform: uppercase;
}

/* ========================================
   VALIDATION ERROR STYLES
   ======================================== */

.accordion-section.has-validation-error .accordion-header {
    border-color: var(--speedly-error);
    background-color: rgba(255, 0, 0, 0.05);
}

.accordion-section.has-validation-error .accordion-title {
    color: var(--speedly-error);
}

.accordion-section.has-validation-error .accordion-icon {
    color: var(--speedly-error);
}

/* Shake animation for validation errors */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.accordion-section.has-validation-error {
    animation: shake 0.5s ease-in-out;
}

/* ========================================
   ADDON PER LENGTH PRODUCT (Section 9)
   ======================================== */

.addon-per-length-content {
    display: flex;
    flex-direction: column;
    gap: var(--speedly-spacing-md);
}

/* Toggle wrapper (card-style radio options for enabled/disabled) */
.addon-per-length-toggle-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--speedly-spacing-sm);
}

/* 2-column grid for toggle cards */
.addon-per-length-toggle-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* Details */
.addon-per-length-details[hidden] {
    display: none;
}

.addon-per-length-details {
    display: flex;
    flex-direction: column;
    gap: var(--speedly-spacing-md);
}

.addon-per-length-fee-description {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--speedly-text-secondary);
}

.addon-per-length-fee-description p {
    margin: 0;
}

/* Type options (30mm/35mm) */
.addon-per-length-type-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.addon-per-length-type-legend {
    font-size: 14px;
    font-weight: 600;
    color: var(--speedly-text-primary);
    margin-bottom: var(--speedly-spacing-sm);
}

.addon-per-length-type-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--speedly-spacing-sm);
}

.addon-per-length-type-option {
    position: relative;
}

.addon-per-length-type-label {
    display: inline-flex;
    align-items: center;
    gap: var(--speedly-spacing-sm);
    padding: var(--speedly-spacing-sm) var(--speedly-spacing-lg);
    border: 2px solid var(--speedly-border);
    border-radius: var(--speedly-radius-md);
    cursor: pointer;
    background: var(--speedly-bg-white);
    font-size: 14px;
    font-weight: 400;
    color: var(--speedly-text-primary);
    transition: border-color var(--speedly-transition), transform var(--speedly-transition);
    white-space: nowrap;
}

.addon-per-length-type-label:hover {
    border-color: var(--speedly-text-muted);
    transform: translateY(-1px);
}

.addon-per-length-type-value {
    font-size: 14px;
    font-weight: 400;
    color: var(--speedly-text-primary);
    white-space: nowrap;
}

.addon-per-length-type-checkmark {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--speedly-accent);
    border-radius: 50%;
    color: var(--speedly-cta-text);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity var(--speedly-transition), transform var(--speedly-transition);
}

.addon-per-length-type-radio:checked + .addon-per-length-type-label {
    border-color: var(--speedly-accent);
    background: rgba(239, 169, 81, 0.05);
}

.addon-per-length-type-radio:checked + .addon-per-length-type-label .addon-per-length-type-value {
    font-weight: 700;
    color: var(--speedly-accent);
}

.addon-per-length-type-radio:checked + .addon-per-length-type-label .addon-per-length-type-checkmark {
    opacity: 1;
    transform: scale(1);
}

.addon-per-length-type-radio:focus-visible + .addon-per-length-type-label {
    outline: 2px solid var(--speedly-accent);
    outline-offset: 2px;
}

.addon-per-length-price-display {
    margin-left: auto;
    font-size: 16px;
    font-weight: 600;
    color: var(--speedly-accent);
    white-space: nowrap;
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .profile-configurator-container {
        display: block;
    }

    .profile-canvas-column {
        position: static;
        page-break-inside: avoid;
    }

    .profile-add-to-cart-btn,
    .profile-quantity-selector,
    .profile-thumbnail-gallery {
        display: none;
    }
}