/*
 * Bespoke Configurator — configurator.css
 *
 * Brand: Badger & Brown
 * Font:  Josefin Sans (Google Fonts) + custom web fonts from badgerandbrown.co.uk
 * Colours sourced from Elementor global tokens on badgerandbrown.co.uk
 */

/* ==========================================================================
   Custom web fonts (hosted on badgerandbrown.co.uk)
   Google Fonts (Josefin Sans, Pinyon Script, Playball) are enqueued via PHP.
   ========================================================================== */

@font-face {
    font-family: 'Poor Richard';
    src: url('https://www.badgerandbrown.co.uk/fonts/poor-richard.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Really Awesome';
    src: url('https://www.badgerandbrown.co.uk/fonts/really-awesome.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Champagne Limousines';
    src: url('https://www.badgerandbrown.co.uk/fonts/champagne-limousines.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Rounded Elegance';
    src: url('https://www.badgerandbrown.co.uk/fonts/rounded-elegance.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Yellow Butterflies';
    src: url('https://www.badgerandbrown.co.uk/fonts/yellow-butterflies.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Harrington';
    src: url('https://www.badgerandbrown.co.uk/fonts/harrington.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'Silent Reaction';
    src: url('https://www.badgerandbrown.co.uk/fonts/silent-reaction.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */
.bc-configurator {
    --bc-primary:       #505152;
    --bc-primary-hover: #3a3b3c;
    --bc-accent:        #5E3E1C;
    --bc-accent-hover:  #4a3116;
    --bc-dark:          #0E1311;
    --bc-border:        #d8d8d8;
    --bc-border-focus:  #505152;
    --bc-bg:            #F9F9F9;
    --bc-card-header:   #ededed;   /* gray header band on cards */
    --bc-white:         #ffffff;
    --bc-text:          #1a1a1a;
    --bc-text-light:    #777777;
    --bc-error:         #c0392b;
    --bc-success:       #00B579;
    --bc-radius:        6px;
    --bc-radius-card:   8px;
    --bc-shadow:        0 2px 10px rgba( 0, 0, 0, 0.07 );
    --bc-font:          'Josefin Sans', sans-serif;
}

/* ==========================================================================
   Base wrapper
   ========================================================================== */

.bc-configurator {
    font-family: var( --bc-font );
    font-size: 15px;
    isolation: isolate; /* own stacking context — shields from theme clip-path / filter resets */
    letter-spacing: 0.01em;
    color: var( --bc-text );
    max-width: 1140px;   /* matches Elementor boxed max-width */
    margin: 0 auto;
    padding: 0 16px 48px;
    box-sizing: border-box;
}

.bc-configurator *,
.bc-configurator *::before,
.bc-configurator *::after {
    box-sizing: inherit;
}

/* Blanket override — defeats Elementor / theme purple on button and link hover */
.bc-configurator button:hover,
.bc-configurator button:focus,
.bc-configurator a:hover,
.bc-configurator a:focus {
    color: inherit;
    background-color: inherit;
    border-color: inherit;
    outline: none;
}

/* ==========================================================================
   Page header
   ========================================================================== */

.bc-page-header {
    margin: 0 0 36px;
    padding: 24px 0;
    border-bottom: 1px solid var( --bc-border );
}

.bc-page-header .bc-page-subtitle {
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.8;
    color: var( --bc-text );
    margin: 0;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   Bespoke Guided Journey
   ========================================================================== */

.bc-guided-journey {
    margin: 0 0 48px;
    padding: 32px 36px;
    border: 1px solid var( --bc-border );
    border-radius: 4px;
    background: #fff;
}

.bc-guided-journey--inline {
    margin: 0 0 32px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

.bc-guided-journey__title {
    font-size: 1.35rem;
    font-weight: 700;
    text-align: center;
    text-decoration: underline;
    margin: 0 0 24px;
    color: var( --bc-text );
}

.bc-guided-journey__intro {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var( --bc-text );
    margin: 0 0 28px;
}

.bc-guided-journey__step {
    margin: 0 0 28px;
}

.bc-guided-journey__step:last-child {
    margin-bottom: 0;
}

.bc-guided-journey__step > p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: var( --bc-text );
    margin: 0 0 16px;
}

.bc-guided-journey__logo-examples {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.bc-guided-journey__logo-examples img {
    max-height: 90px;
    max-width: 90px;
    width: auto;
    object-fit: contain;
    border-radius: 4px;
}

.bc-guided-journey__finish-examples {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.bc-guided-journey__finish-example {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bc-guided-journey__finish-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var( --bc-text );
    margin: 0;
}

.bc-guided-journey__finish-example img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var( --bc-border );
}

/* ==========================================================================
   Section header
   ========================================================================== */

.bc-section-header {
    margin: 0 0 28px;
}

.bc-section-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var( --bc-dark );
    margin: 0 0 4px;
    line-height: 1.25;
}

/* ==========================================================================
   Field-group cards — two-tone card matching the screenshot
   ========================================================================== */

.bc-field-group {
    border: 1px solid var( --bc-border );
    border-radius: var( --bc-radius-card );
    overflow: hidden;
    margin-bottom: 16px;
    background: var( --bc-white );
    box-shadow: var( --bc-shadow );
}

/* Gray header band */
.bc-field-group > .bc-field-label,
.bc-field-group > .bc-field-group__header {
    display: block;
    width: 100%;
    background: var( --bc-card-header );
    padding: 14px 20px;
    font-size: 0.92rem;
    font-weight: 400;
    font-family: var( --bc-font );
    letter-spacing: 0.04em;
    text-transform: none;
    color: var( --bc-text );
    text-align: center;
    border-bottom: 1px solid var( --bc-border );
    margin-bottom: 0;
}

/* White body area */
.bc-field-group > .bc-input,
.bc-field-group > .bc-textarea,
.bc-field-group > .bc-select-wrap,
.bc-field-group > .bc-upload-area,
.bc-field-group > .bc-tab-intro,
.bc-field-group > p {
    display: block;
    padding: 18px 20px;
    margin: 0;
}

.bc-field-group > .bc-input,
.bc-field-group > .bc-textarea {
    border: none;
    border-radius: 0;
    font-size: 1rem;
    padding: 16px 20px;
    min-height: 56px;
}

.bc-field-group > .bc-input:focus,
.bc-field-group > .bc-textarea:focus {
    outline: 2px solid var( --bc-border-focus );
    outline-offset: -2px;
}

.bc-field-group > .bc-select-wrap {
    padding: 14px 20px;
}

/* Arrow sits inside the select — account for the 20px wrapper padding */
.bc-field-group > .bc-select-wrap::after {
    right: 32px;
}

.bc-field-group > .bc-select-wrap .bc-select {
    border: 1px solid var( --bc-border );
    border-radius: var( --bc-radius );
    padding: 12px 36px 12px 14px;
    font-size: 0.95rem;
    min-height: 48px;
}

.bc-field-group > .bc-swatches {
    display: flex;
    padding: 16px 20px;
    gap: 10px;
    flex-wrap: wrap;
}

/* Wrapping swatch rows inside a card: restore padding */
.bc-field-group > .bc-swatches--inline {
    padding: 16px 20px;
    margin: 0;
    flex-wrap: wrap;
    overflow-x: visible;
}

.bc-field-group > .bc-upload-area {
    padding: 16px 20px;
}

.bc-field-group > .bc-colour-picker-wrap {
    margin: 16px 20px 8px;
    border-radius: var( --bc-radius );
}

.bc-field-group > .bc-tab-intro,
.bc-field-group > p {
    font-size: 0.9rem;
    line-height: 1.75;
    color: var( --bc-text );
    text-align: center;
    padding: 18px 24px;
}

/* Two-column input layout inside a card (e.g. Initials 1 / Initials 2) */
.bc-field-group--cols {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
}

.bc-field-group--cols > .bc-field-label {
    grid-column: 1 / -1;
}

.bc-field-group--cols > .bc-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var( --bc-border );
}

.bc-field-group--cols > .bc-cols > .bc-col-item {
    padding: 4px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bc-field-group--cols > .bc-cols > .bc-col-item:first-child {
    border-right: 1px solid var( --bc-border );
}

.bc-field-group--cols > .bc-cols > .bc-col-item > label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var( --bc-text-light );
    margin-top: 12px;
}

.bc-field-group--cols > .bc-cols > .bc-col-item > .bc-input {
    border: none;
    border-bottom: 1px solid var( --bc-border );
    border-radius: 0;
    padding: 10px 0;
    font-size: 1rem;
    min-height: 48px;
    background: transparent;
}

.bc-field-group--cols > .bc-cols > .bc-col-item > .bc-input:focus {
    outline: none;
    border-bottom-color: var( --bc-border-focus );
}

/* Char counter placement inside cards */
.bc-field-group > .bc-char-counter {
    padding: 0 20px 10px;
    text-align: right;
    font-size: 0.72rem;
    color: var( --bc-text-light );
}

/* Hide the old required asterisk from card-style labels */
.bc-field-group > .bc-field-label .bc-required {
    margin-left: 4px;
}

/* ==========================================================================
   Type selection cards (Step 1)
   ========================================================================== */

.bc-type-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 40px;
}

@media ( max-width: 600px ) {
    .bc-type-cards {
        grid-template-columns: 1fr;
    }
}

.bc-type-card {
    border: 2px solid var( --bc-border );
    border-radius: var( --bc-radius );
    padding: 28px 24px 24px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var( --bc-white );
}

.bc-type-card:hover {
    border-color: var( --bc-primary );
    box-shadow: var( --bc-shadow );
    color: inherit;
}

.bc-type-card__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var( --bc-radius );
    margin-bottom: 16px;
}

.bc-type-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var( --bc-dark );
    margin: 0 0 8px;
}

.bc-type-card p {
    font-size: 0.9rem;
    color: var( --bc-text-light );
    margin: 0;
    line-height: 1.6;
}

/* ==========================================================================
   Placeholder boxes (image areas before real images are added)
   ========================================================================== */

.bc-placeholder {
    background: #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var( --bc-text-light );
    font-size: 0.8rem;
    text-align: center;
    padding: 8px;
}

.bc-placeholder--dark {
    background: var( --bc-dark );
    color: #ffffff;
}

/* ==========================================================================
   Examples grid
   ========================================================================== */

.bc-examples-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    color: var( --bc-text-light );
}

.bc-examples-grid {
    display: grid;
    grid-template-columns: repeat( 4, 1fr );
    gap: 8px;
    margin-bottom: 32px;
}

.bc-examples-grid--3col {
    grid-template-columns: repeat( 3, 1fr );
}

.bc-example-thumb {
    aspect-ratio: 1;
    border-radius: var( --bc-radius );
}

/* ==========================================================================
   Scroll margin — keeps scrolled-to elements clear of the fixed site header.
   --bc-scroll-margin is written dynamically by configurator.js at boot/resize.
   ========================================================================== */

.bc-step,
.bc-tab-nav,
.bc-form-messages,
.bc-configurator {
    scroll-margin-top: var( --bc-scroll-margin, 100px );
}

/* ==========================================================================
   Configure layout (product image + tabs)
   ========================================================================== */

.bc-configure-layout {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 32px;
}

/* Ties get a narrower preview column so the tall portrait stack doesn't dominate */
.bc-step--tie .bc-configure-layout {
    grid-template-columns: 280px 1fr;
}

.bc-configure-left {
    position: sticky;
    top: 130px; /* clears the fixed site header + a little breathing room */
}

@media ( max-width: 860px ) {
    .bc-configure-layout {
        grid-template-columns: 1fr;
    }

    .bc-configure-left {
        position: static;
    }
}

/* Product image preview */
.bc-product-image--preview {
    width: 100%;
    aspect-ratio: 1;
    border-radius: var( --bc-radius );
    border: 1px solid var( --bc-border );
    font-size: 0.85rem;
}

.bc-image-note {
    font-size: 0.78rem;
    color: var( --bc-text-light );
    margin-top: 8px;
    text-align: center;
}

.bc-scroll-note {
    margin-top: 12px;
    padding: 10px 14px;
    background: var( --bc-bg );
    border-radius: var( --bc-radius );
    font-size: 0.82rem;
    color: var( --bc-text-light );
}

.bc-scroll-note p {
    margin: 0;
}

/* Font swatch decorative block at top-right */
.bc-font-swatch {
    border: 1px solid var( --bc-border );
    border-radius: var( --bc-radius );
    padding: 14px 16px;
    margin-bottom: 20px;
    background: var( --bc-white );
}

.bc-font-swatch__label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var( --bc-text-light );
    margin-bottom: 8px;
}

.bc-font-swatch__preview {
    font-size: 1.1rem;
    font-style: italic;
    color: var( --bc-text-light );
    min-height: 32px;
}

.bc-font-swatch__note {
    font-size: 0.78rem;
    color: var( --bc-text-light );
    margin-top: 6px;
}

/* ==========================================================================
   Font picker — preset buttons + Google Fonts live search
   ========================================================================== */

.bc-font-picker {
    padding: 12px;
    border: 1px solid var( --bc-border );
    border-radius: var( --bc-radius );
    background: var( --bc-bg );
}

.bc-font-picker__presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.bc-font-preset-btn {
    padding: 5px 11px;
    font-size: 0.95rem;
    line-height: 1.4;
    border: 1px solid var( --bc-border );
    border-radius: var( --bc-radius );
    background: var( --bc-white );
    color: var( --bc-text );
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
}

.bc-font-preset-btn:hover {
    border-color: var( --bc-primary );
    background: var( --bc-bg );
    color: var( --bc-text );
    background-color: var( --bc-bg );
}

.bc-font-preset-btn--active {
    border-color: var( --bc-accent );
    background: var( --bc-accent );
    color: var( --bc-white );
}

.bc-font-preset-btn--active:hover {
    border-color: var( --bc-accent-hover );
    background: var( --bc-accent-hover );
    color: var( --bc-white );
    background-color: var( --bc-accent-hover );
}

.bc-font-picker__search {
    position: relative;
    margin-bottom: 8px;
}

.bc-font-search-input {
    width: 100%;
    box-sizing: border-box;
}

/* Dropdown is appended to <body>, outside .bc-configurator, so CSS variables
   won't resolve there — use literal values. */
.bc-font-search-results {
    position: fixed;
    z-index: 9999;
    background: #ffffff;
    border: 1px solid #d8d2cc;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.12 );
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 280px;
    overflow-y: auto;
}

.bc-font-result {
    padding: 8px 14px;
    font-size: 1.05rem;
    cursor: pointer;
    color: #2c2420;
    transition: background 0.12s;
}

.bc-font-result:hover {
    background: #f7f4f1;
    color: #2c2420;
}

.bc-font-result--custom {
    font-size: 0.80rem;
    font-family: var( --bc-font );
    color: var( --bc-text-light );
    border-top: 1px solid var( --bc-border );
    padding-top: 8px;
    margin-top: 2px;
}

.bc-font-picker__selected {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var( --bc-bg );
    border: 1px solid var( --bc-border );
    border-radius: var( --bc-radius );
    font-size: 0.82rem;
}

.bc-font-picker__selected-label {
    font-weight: 600;
    color: var( --bc-text );
    font-family: var( --bc-font );
    white-space: nowrap;
}

.bc-font-picker__preview {
    flex: 1;
    font-size: 1.15rem;
    color: var( --bc-text );
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bc-font-picker__clear {
    flex-shrink: 0;
    padding: 2px 7px;
    font-size: 0.75rem;
    background: transparent;
    border: 1px solid var( --bc-border );
    border-radius: 3px;
    color: var( --bc-text-light );
    cursor: pointer;
    line-height: 1.4;
    font-family: var( --bc-font );
}

.bc-font-picker__clear:hover {
    border-color: var( --bc-error );
    color: var( --bc-error );
    background-color: transparent;
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.bc-tabs {
    border: 1px solid var( --bc-border );
    border-radius: var( --bc-radius );
    background: var( --bc-white );
    overflow: hidden;
}

.bc-tab-nav {
    display: flex;
    border-bottom: 1px solid var( --bc-border );
    background: var( --bc-bg );
}

.bc-tab-btn {
    flex: 1;
    padding: 12px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    font-family: var( --bc-font );
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var( --bc-text-light );
    background: transparent;
    border: none;
    border-right: 1px solid var( --bc-border );
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-align: center;
}

.bc-tab-btn:last-child {
    border-right: none;
}

.bc-tab-btn:hover,
.bc-tab-btn:focus {
    background: var( --bc-white );
    color: var( --bc-primary );
}

.bc-tab-btn--active {
    background: var( --bc-white );
    color: var( --bc-accent );
    box-shadow: inset 0 -2px 0 var( --bc-accent );
}

.bc-tab-panel {
    display: none;
    padding: 24px;
}

.bc-tab-panel--active {
    display: block;
}

.bc-tab-panel-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 20px;
    margin-top: 8px;
    border-top: 1px solid var( --bc-border );
}

.bc-tab-intro {
    font-size: 0.88rem;
    color: var( --bc-text-light );
    margin: 0 0 16px;
    line-height: 1.6;
}

/* Pattern reference box — shown for paisley / floral selections */
.bc-pattern-reference-box {
    background: var( --bc-bg-alt, #f9f7f4 );
    border: 1px solid var( --bc-border );
    border-radius: var( --bc-radius );
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bc-pattern-reference-box__intro {
    font-size: 0.86rem;
    color: var( --bc-text-light );
    line-height: 1.6;
    margin: 0 0 4px;
}

/* Repeat logo toggle + spacing slider */
.bc-toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.90rem;
    color: var( --bc-text );
    user-select: none;
}

.bc-toggle-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var( --bc-accent, #7a5c3a );
    cursor: pointer;
    flex-shrink: 0;
}

.bc-repeat-count-wrap {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.bc-repeat-count-btn {
    flex: 1;
    padding: 6px 4px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1.5px solid var( --bc-border, #d4c9bc );
    border-radius: var( --bc-radius-sm, 4px );
    background: #fff;
    color: var( --bc-text, #3a2e25 );
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.bc-repeat-count-btn:hover {
    border-color: var( --bc-accent, #7a5c3a );
    color: var( --bc-accent, #7a5c3a );
}

.bc-repeat-count-btn--active {
    background: var( --bc-accent, #7a5c3a );
    border-color: var( --bc-accent, #7a5c3a );
    color: #fff;
}

/* ==========================================================================
   Form fields (standalone — outside tab panels)
   ========================================================================== */

.bc-field-group--standalone {
    margin-bottom: 18px;
}

.bc-field-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var( --bc-dark );
    margin-bottom: 6px;
}

.bc-field-label--inline {
    display: inline-block;
    width: 120px;
    vertical-align: middle;
    margin-bottom: 0;
}

.bc-required {
    color: var( --bc-error );
    font-size: 0.9em;
}

.bc-input,
.bc-textarea,
.bc-select {
    width: 100%;
    padding: 11px 14px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var( --bc-text );
    background: var( --bc-white );
    border: 1px solid var( --bc-border );
    border-radius: var( --bc-radius );
    outline: none;
    transition: border-color 0.15s;
    appearance: none;
}

.bc-input:focus,
.bc-textarea:focus,
.bc-select:focus {
    border-color: var( --bc-border-focus );
}

.bc-input.bc-field--error,
.bc-textarea.bc-field--error,
.bc-select.bc-field--error {
    border-color: var( --bc-error );
    background: #fff5f5;
}

.bc-textarea {
    resize: vertical;
    min-height: 96px;
}

.bc-select-wrap {
    position: relative;
}

.bc-select-wrap::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY( -50% );
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var( --bc-text-light );
    pointer-events: none;
}

.bc-size-note {
    font-size: 0.8rem;
    color: var( --bc-text-light );
    margin-top: 6px;
}

/* ==========================================================================
   Swatches (shape / material)
   ========================================================================== */

.bc-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

/* Wrapping swatches — used for shape + material */
.bc-swatches--inline {
    flex-wrap: wrap;
    overflow-x: visible;
    overflow-y: visible;
    padding: 16px 20px;
    gap: 10px;
}

.bc-swatches--inline .bc-swatch {
    min-width: 80px;
    padding: 14px 10px 10px;
    font-size: 0.68rem;
    flex-direction: column;
    gap: 10px;
}

/* Shape icon area — fixed height so all labels sit at the same baseline */
.bc-swatches--inline .bc-swatch__shape {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.bc-swatches--inline .bc-swatch__shape--rectangle { width: 48px; height: 28px; }
.bc-swatches--inline .bc-swatch__shape--oval       { width: 44px; height: 28px; }
.bc-swatches--inline .bc-swatch__shape--bar        { width: 52px; height: 14px; }

.bc-swatches--inline .bc-swatch__colour {
    width: 34px;
    height: 34px;
}

.bc-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    border: 2px solid var( --bc-border );
    border-radius: var( --bc-radius );
    background: var( --bc-white );
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var( --bc-text-light );
    transition: border-color 0.15s, color 0.15s;
    min-width: 72px;
    text-align: center;
}

.bc-swatch:hover,
.bc-swatch:focus {
    border-color: var( --bc-accent );
    color: var( --bc-accent );
}

.bc-swatch--active {
    border-color: var( --bc-accent );
    color: var( --bc-accent );
    background: #fdf8f4;
}

/* Shape geometry swatches — gray to stay neutral */
.bc-swatch__shape {
    width: 36px;
    height: 36px;
    background: #d0d0d0;
}

.bc-swatch__shape--square    { border-radius: 2px; }
.bc-swatch__shape--circle    { border-radius: 50%; }
.bc-swatch__shape--rectangle { width: 50px; height: 28px; border-radius: 2px; }
.bc-swatch__shape--oval      { width: 44px; height: 28px; border-radius: 50%; }
.bc-swatch__shape--bar       { width: 54px; height: 14px; border-radius: 2px; }
.bc-swatch__shape--hexagon   {
    clip-path: polygon( 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50% );
    border-radius: 0;
}
.bc-swatch__shape--shield    {
    clip-path: polygon( 15% 0%, 85% 0%, 100% 60%, 50% 100%, 0% 60% );
    border-radius: 0;
}
.bc-swatch__shape--round     { border-radius: 50%; }
.bc-swatch__shape--custom    {
    background: none;
    border: 2px dashed var( --bc-border );
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var( --bc-text-light );
}

/* Material colour swatches — rounded squares matching the screenshot */
.bc-swatch__colour {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    border: 1px solid rgba( 0,0,0,0.12 );
}

.bc-swatch__colour--silver                      { background: linear-gradient( 135deg, #e0e0e0, #a8a8a8 ); }
.bc-swatch__colour--silver-plated               { background: linear-gradient( 135deg, #e8e8e8, #b0b0b0 ); }
.bc-swatch__colour--silver-plated-rhodium       { background: linear-gradient( 135deg, #e8e8e8, #b0b0b0 ); }
.bc-swatch__colour--gold-plated                 { background: linear-gradient( 135deg, #f5d87a, #c8a43c ); }
.bc-swatch__colour--gold-plated-rhodium         { background: linear-gradient( 135deg, #f5d87a, #c8a43c ); }
.bc-swatch__colour--gold-plated-sterling-silver { background: linear-gradient( 135deg, #f5d87a, #c8a43c ); }
.bc-swatch__colour--sterling-silver-plated      { background: linear-gradient( 135deg, #ececec, #b8b8b8 ); }
.bc-swatch__colour--sterling-silver-plated-rhodium { background: linear-gradient( 135deg, #ebebeb, #b4b4b4 ); }
.bc-swatch__colour--sterling-silver             { background: linear-gradient( 135deg, #f0f0f0, #c0c0c0 ); }
.bc-swatch__colour--rose-gold-plated-rhodium    { background: linear-gradient( 135deg, #f2c4b0, #c47c5e ); }
.bc-swatch__colour--lapis                       { background: linear-gradient( 135deg, #3a6acc, #0e2266 ); }
.bc-swatch__colour--mother-of-pearl             { background: linear-gradient( 135deg, #faf5ff, #d8d0f8 ); }
.bc-swatch__colour--onyx                        { background: linear-gradient( 135deg, #4a4a4a, #0e0e0e ); }
.bc-swatch__colour--wood                        { background: linear-gradient( 135deg, #b8784a, #6b3e1c ); }

/* Personalisation type tiles (Engraved / Photo / Something Else / Design for Me) */
.bc-swatches--personalisation {
    display: grid;
    grid-template-columns: repeat( 4, 1fr );
    gap: 12px;
    padding: 16px 20px;
}

@media ( max-width: 620px ) {
    .bc-swatches--personalisation {
        grid-template-columns: repeat( 2, 1fr );
        gap: 10px;
    }
}

.bc-field-group > .bc-swatches--personalisation {
    display: grid;
}

.bc-swatch--tile {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 16px;
    text-align: center;
    min-width: 0;
    font-size: 0.85rem;
    text-transform: none;
    letter-spacing: 0;
}

.bc-swatch--tile strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var( --bc-text );
}

.bc-swatch--tile.bc-swatch--active strong {
    color: var( --bc-accent );
}

.bc-swatch__tile-icon {
    font-size: 2rem;
    line-height: 1;
    color: var( --bc-text-light );
    transition: color 0.15s;
}

.bc-swatch--tile.bc-swatch--active .bc-swatch__tile-icon {
    color: var( --bc-accent );
}

/* Gift options — image-based swatches (gift box + gift wrap) */
.bc-swatches--gift {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.bc-swatch--gift {
    width: 140px;
    min-width: 0;
    padding: 8px;
    gap: 6px;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8rem;
}

.bc-swatch--gift img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.bc-swatch__tile-desc {
    font-size: 0.78rem;
    color: var( --bc-text-light );
    font-weight: 400;
    margin-top: 2px;
}

/* ==========================================================================
   Upload area
   ========================================================================== */

.bc-upload-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.bc-upload-status {
    font-size: 0.82rem;
    color: var( --bc-text-light );
}

.bc-upload-area--uploaded .bc-upload-status {
    color: var( --bc-success );
}

.bc-upload-remove-btn {
    margin-top: 6px;
    font-size: 0.78rem;
    padding: 4px 10px;
    border-color: var( --bc-error );
    color: var( --bc-error );
    background: transparent;
}

.bc-upload-remove-btn:hover {
    background: #fef9f9;
    color: var( --bc-error );
}

.bc-upload-preview {
    display: block;
    max-width: 120px;
    max-height: 120px;
    border-radius: var( --bc-radius );
    border: 1px solid var( --bc-border );
    object-fit: contain;
    margin-bottom: 6px;
}

.bc-upload-preview__name {
    display: block;
    font-size: 0.8rem;
    color: var( --bc-success );
    word-break: break-all;
}

/* Multiple-file upload list items */
.bc-upload-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var( --bc-border );
    border-radius: var( --bc-radius );
    margin-top: 6px;
    font-size: 0.82rem;
}

.bc-upload-item--pending {
    opacity: 0.6;
}

.bc-upload-item--error {
    border-color: var( --bc-error );
    color: var( --bc-error );
}

.bc-upload-item .bc-upload-preview {
    width: 36px;
    height: 36px;
    min-width: 36px;
    margin: 0;
}

.bc-upload-item__name {
    flex: 1;
    word-break: break-all;
}

.bc-upload-item .bc-upload-item__status {
    font-size: 0.78rem;
    color: var( --bc-text-light );
}

/* ==========================================================================
   Layered cufflink preview
   ========================================================================== */

.bc-preview-stack {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    min-height: 200px; /* fallback if aspect-ratio isn't honoured */
    background: #f5f5f5;
    border-radius: var( --bc-radius );
    overflow: hidden;
    container-type: inline-size; /* enables cqw units for child text sizing */
}

/* Post (stem) — hidden; replaced by clasp overlay */
.bc-preview-stack::before,
.bc-preview-stack::after {
    content: none;
}


/* Clasp overlay — shows the render image of the real clasp hardware */
.bc-preview-clasp-overlay {
    position: absolute;
    inset: 0;
    display: none;
    border-radius: inherit;
    background: #fff;
    overflow: hidden;
    z-index: 6;
}

.bc-clasp-render-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Cufflink face render image — fills the full stack, sits behind all content layers */
.bc-face-render-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.15s ease;
}

/* When a face render is loaded, suppress the CSS gradient and remove the border ring */
.bc-preview-stack--face-render .bc-preview-face {
    background: none !important;
}
.bc-preview-stack--face-render .bc-preview-face::after {
    display: none;
}
.bc-preview-stack--face-render .bc-preview-shape-border {
    display: none;
}

.bc-preview-stack--clasp .bc-preview-clasp-overlay {
    display: block;
}

.bc-preview-stack--clasp .bc-preview-face,
.bc-preview-stack--clasp .bc-preview-shape-border,
.bc-preview-stack--clasp .bc-preview-logo-layer,
.bc-preview-stack--clasp .bc-preview-text-layer {
    opacity: 0;
    pointer-events: none;
}

/* Horizontal T-bar — positioned at ~44% down so the post fits below */
.bc-preview-clasp-bar {
    position: absolute;
    left: 14%;
    right: 14%;
    top: 44%;
    transform: translateY( -50% );
    height: 18%;
    background: linear-gradient( to bottom, #e8e8e8 0%, #a4a4a4 50%, #d2d2d2 100% );
    border-radius: 3px;
    border: 1.5px solid rgba( 80, 70, 60, 0.45 );
    overflow: hidden;
}

/* Engraved text — positioned over the flat plate in the render image (~80% from top) */
.bc-preview-clasp-text {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 77%;
    transform: translateY( -50% );
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    font-size: 1.0rem;
    font-family: "Times New Roman", Times, serif;
    font-weight: normal;
    color: rgba( 60, 40, 10, 0.7 );
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 1px 1px rgba( 255, 255, 255, 0.5 );
}

/* Thin border ring behind the face — same clip-path applied by JS, scaled slightly
   larger so it peeks out as a 1-2 px outline on every shape. Using a separate element
   avoids the CSS filter + clip-path conflict (clip-path clips filter output). */
.bc-preview-shape-border {
    position: absolute;
    inset: 5%;
    border-radius: 50%;
    background: rgba( 80, 70, 60, 0.45 );
    transform: scale( 1.014 );
    transform-origin: center;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.06s ease;
}

/* Cufflink face — material layer */
.bc-preview-face {
    position: absolute;
    inset: 5%;
    border-radius: 50%;
    background: linear-gradient(
        145deg,
        #f6f6f6 0%,
        #e2e2e2 18%,
        #b8b8b8 40%,
        #cecece 58%,
        #ebebeb 78%,
        #c8c8c8 100%
    );
    z-index: 2;
    transition: background 0.3s, opacity 0.06s ease;
}

/* Subtle top-highlight overlay */
.bc-preview-face::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        to bottom,
        rgba( 255, 255, 255, 0.35 ) 0%,
        transparent 50%
    );
    pointer-events: none;
    z-index: 3;
}

/* Logo layer */
.bc-preview-logo-layer {
    position: absolute;
    inset: 5%;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 4;
    pointer-events: none;
    transition: opacity 0.06s ease;
    /* Multiply blends the artwork against the metal face:
       white pixels vanish (white × metal = metal), dark pixels
       darken the surface to simulate a recessed engraving. */
    mix-blend-mode: multiply;
}

.bc-preview-logo-layer.bc-preview-active {
    display: flex;
}

.bc-preview-logo-img {
    /* Default: fill the draggable container width; height follows natural ratio */
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    /* Desaturate + boost contrast so the artwork reads as
       a crisp metal engraving regardless of original colours.
       No brightness reduction here: dimming the whole image turns a white /
       light background into mid-grey, which then multiplies against the metal
       and shows up as a dark rectangle ("box") around the artwork. Keeping
       whites at full white lets them vanish under mix-blend-mode: multiply. */
    filter: grayscale( 1 ) contrast( 1.6 );
    transition: width 0.25s, height 0.25s;
    /* Pass pointer events through to the parent .bc-layer-inner so the
       browser cannot initiate a native image drag that would block dragging. */
    pointer-events: none;
    -webkit-user-drag: none;
    user-drag: none;
}

/* Premium Print: remove the engraving blend mode so the white mount reads as white */
.bc-personalisation--photo .bc-preview-logo-layer,
.bc-preview-stack--photo .bc-preview-logo-layer {
    mix-blend-mode: normal;
}

/* Premium Print: show the uploaded photo in full colour */
.bc-personalisation--photo .bc-preview-logo-img,
.bc-preview-stack--photo .bc-preview-logo-img {
    filter: none;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/*
 * Premium Print framed mount —
 * The face material fills the full face shape.
 * The inner .bc-layer-inner--logo is 72 % × 72 %, centred, with a white
 * background, so ~14 % of material shows all around it as a border frame.
 * border-radius: inherit copies the face-shape radius so the white area
 * matches the cufflink shape (circle, square, rectangle).
 */
.bc-personalisation--photo .bc-layer-inner--logo,
.bc-preview-stack--photo .bc-layer-inner--logo {
    width: 72% !important;
    height: 72% !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate( -50%, -50% ) !important;
    background: #ffffff;
    /* border-radius is set explicitly by applyPreviewShape() when photo mode
       is active; inherit here acts as a fallback when no shape swatch has
       fired yet (parent defaults to border-radius:50% from CSS). */
    border-radius: inherit;
    overflow: hidden;
    cursor: default;
    pointer-events: none;
}

.bc-personalisation--photo .bc-resize-grip,
.bc-personalisation--photo .bc-layer-hint,
.bc-preview-stack--photo .bc-resize-grip,
.bc-preview-stack--photo .bc-layer-hint {
    display: none !important;
}

.bc-personalisation--photo .bc-preview-hint {
    display: none;
}

/* Shrink the draggable container when text is also showing to share the face */
.bc-preview-stack--has-text .bc-layer-inner--logo {
    width: 33%;
}

/* Text layer */
.bc-preview-text-layer {
    position: absolute;
    inset: 5%;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 5;
    padding: 15%;
    box-sizing: border-box;
    pointer-events: none;
    transition: opacity 0.06s ease;
}

.bc-preview-text-layer.bc-preview-active {
    display: flex;
}

/* Shape-pop animation removed — shapes swap instantly. */

.bc-preview-text-content {
    font-size: 0.65rem; /* JS overrides dynamically based on text length */
    color: rgba( 0, 0, 0, 0.55 );
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-line;
    text-shadow: 0 1px 1px rgba( 255, 255, 255, 0.6 );
    letter-spacing: 0.04em;
    max-width: 100%;
    transition: font-size 0.2s;
}

/* When logo + text are both active: logo anchors top, text anchors bottom, tighter gap */
.bc-preview-stack--has-logo.bc-preview-stack--has-text .bc-preview-logo-layer {
    align-items: flex-start;
    padding-top: 8%;
    justify-content: center;
}

.bc-preview-stack--has-logo.bc-preview-stack--has-text .bc-preview-text-layer {
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 8%;
}

.bc-preview-hint {
    font-size: 0.78rem;
    color: var( --bc-text-light );
    text-align: center;
    margin-top: 8px;
    font-style: italic;
}

.bc-preview-disclaimer {
    font-size: 0.85rem;
    color: var( --bc-text-light );
    text-align: center;
    line-height: 1.6;
    font-style: italic;
    margin-top: 16px;
    padding: 14px 20px;
    background: var( --bc-white );
    border: 1px solid var( --bc-border );
    border-radius: var( --bc-radius-card );
    box-shadow: var( --bc-shadow );
}

.bc-configure-something-else {
    grid-column: 1 / -1;
    width: 100%;
}

/* Bespoke guide panel — shown above textarea/upload on the Fully Bespoke journey */
.bc-bespoke-guide {
    background: #faf7f2;
    border: 1px solid #e8ddd0;
    border-radius: var( --bc-radius-card );
    padding: 24px 28px;
    margin-bottom: 28px;
}

.bc-bespoke-guide__title {
    font-size: 1rem;
    font-weight: 700;
    color: var( --bc-text );
    margin: 0 0 14px;
    letter-spacing: 0.01em;
}

.bc-bespoke-guide__list {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.bc-bespoke-guide__list li {
    font-size: 0.88rem;
    color: var( --bc-text );
    line-height: 1.5;
    padding-left: 20px;
    position: relative;
}

.bc-bespoke-guide__list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var( --bc-success );
    font-size: 0.80rem;
    top: 1px;
}

.bc-bespoke-guide__hint {
    font-size: 0.82rem;
    color: var( --bc-text-light );
    line-height: 1.6;
    margin: 0;
    font-style: italic;
}

.bc-shape-bar-hint {
    font-size: 0.72rem;
    color: var( --bc-text-light );
    background: #fff8e7;
    border: 1px solid #f0d080;
    border-radius: var( --bc-radius );
    padding: 8px 12px;
    margin-top: 8px;
    line-height: 1.5;
}

.bc-field-note {
    font-size: 0.72rem;
    color: var( --bc-text-light );
    margin-top: 6px;
    line-height: 1.4;
}

.bc-field-note--warning {
    color: #7a5c30;
    background: #fdf6ec;
    border: 1px solid #e8d4b0;
    border-radius: var( --bc-radius );
    padding: 8px 12px;
    margin-top: 10px;
}

.bc-btn--reset-design {
    display: block;
    width: 100%;
    margin-top: 12px;
    font-size: 0.78rem;
    padding: 8px 16px;
    opacity: 0.7;
}

/* ==========================================================================
   Journey choice — step 1 (two-tile selector)
   ========================================================================== */

.bc-section-intro {
    font-size: 0.88rem;
    color: var( --bc-text-light );
    margin-top: -4px;
    margin-bottom: 8px;
}

.bc-journey-choice {
    display: grid;
    grid-template-columns: repeat( 2, 1fr );
    gap: 20px;
    margin: 0 0 40px;
}

@media ( max-width: 720px ) {
    .bc-step--type .bc-journey-choice {
        grid-template-columns: 1fr;
    }
}

@media ( max-width: 560px ) {
    .bc-journey-choice {
        grid-template-columns: 1fr;
    }
}

.bc-journey-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 32px 24px;
    background: var( --bc-white );
    border: 2px solid var( --bc-border );
    border-radius: var( --bc-radius-card );
    cursor: pointer;
    font-family: var( --bc-font );
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.bc-journey-tile:hover {
    border-color: var( --bc-accent );
    box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.10 );
    transform: translateY( -3px );
    color: inherit;
}

.bc-journey-tile__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Match the height of .bc-tie-type-tile__preview so the title aligns across all 3 tiles */
    height: 96px;
    margin-bottom: 0;
    font-size: 2.4rem;
    line-height: 1;
    color: var( --bc-text-light );
    transition: color 0.2s;
}

.bc-journey-tile:hover .bc-journey-tile__icon {
    color: var( --bc-accent );
}

.bc-journey-tile strong {
    font-size: 1.15rem;
    font-weight: 700;
    color: var( --bc-text );
    display: block;
}

.bc-journey-tile__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: center;
    width: 100%;
    flex: 1; /* push CTA to same bottom position across all tiles */
}

.bc-journey-tile__features li {
    font-size: 0.82rem;
    color: var( --bc-text-light );
    padding-left: 0;
    position: relative;
    line-height: 1.4;
}

.bc-journey-tile__features li::before {
    content: '✓ ';
    position: static;
    color: var( --bc-success );
    font-size: 0.78rem;
}

.bc-journey-tile__moq {
    font-size: 0.75rem;
    font-weight: 600;
    color: var( --bc-accent );
    background: rgba( 176, 125, 74, 0.10 );
    border: 1px solid rgba( 176, 125, 74, 0.30 );
    border-radius: var( --bc-radius );
    padding: 4px 10px;
    margin: 0;
    letter-spacing: 0.02em;
}

.bc-journey-tile__cta {
    margin-top: 8px;
    display: inline-block;
    padding: 10px 22px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var( --bc-white );
    background: var( --bc-accent );
    border-radius: var( --bc-radius );
    letter-spacing: 0.04em;
    transition: background 0.18s;
    pointer-events: none; /* tile itself is the clickable element */
}

.bc-journey-tile:hover .bc-journey-tile__cta {
    background: var( --bc-accent-hover );
}

/* ==========================================================================
   Help footer
   ========================================================================== */

.bc-help-footer {
    margin-top: 48px;
    padding: 24px 32px;
    background: var( --bc-bg );
    border: 1px solid var( --bc-border );
    border-radius: var( --bc-radius-card );
    text-align: center;
    font-size: 0.92rem;
    color: var( --bc-text-light );
}

.bc-help-footer a {
    color: var( --bc-accent );
    text-decoration: none;
    font-weight: 600;
}

.bc-help-footer a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Personalisation choice — step 2 (three-tile selector)
   ========================================================================== */

.bc-personalisation-choice {
    display: grid;
    grid-template-columns: repeat( 3, 1fr );
    gap: 20px;
    margin: 0 0 32px;
}

@media ( max-width: 640px ) {
    .bc-personalisation-choice {
        grid-template-columns: 1fr;
    }
}

.bc-personalisation-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 28px 20px;
    background: var( --bc-white );
    border: 2px solid var( --bc-border );
    border-radius: var( --bc-radius-card );
    cursor: pointer;
    font-family: var( --bc-font );
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.bc-personalisation-tile:hover {
    border-color: var( --bc-accent );
    box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.10 );
    transform: translateY( -3px );
    color: inherit;
}

.bc-personalisation-tile__icon {
    font-size: 2.2rem;
    line-height: 1;
    color: var( --bc-text-light );
    transition: color 0.2s;
}

.bc-personalisation-tile:hover .bc-personalisation-tile__icon {
    color: var( --bc-accent );
}

.bc-personalisation-tile strong {
    font-size: 1rem;
    font-weight: 700;
    color: var( --bc-text );
    display: block;
}

.bc-personalisation-tile__desc {
    font-size: 0.80rem;
    color: var( --bc-text-light );
    font-weight: 400;
    line-height: 1.45;
}

/* Back row below personalisation tiles */
.bc-step-back-row {
    margin: 0;
}

/* Section header with back button inline */
.bc-section-header--with-back {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.bc-section-header--with-back h2 {
    margin: 0;
}

/* ==========================================================================
   Draggable / resizable preview layers
   ========================================================================== */

/* Inner draggable container — sits inside .bc-preview-logo-layer / .bc-preview-text-layer */
.bc-layer-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
    cursor: default;
    z-index: 1;
    user-select: none;
    touch-action: none;
    box-sizing: border-box;
    pointer-events: auto;
}

.bc-layer-inner--logo {
    width: 62%;
    /* overflow:hidden is intentionally omitted here — adding it creates a
       compositing layer that renders as a grey box under mix-blend-mode:multiply
       on the parent. Clipping to the cufflink face shape is already handled
       by overflow:hidden on .bc-preview-logo-layer. Photo mode re-adds
       overflow:hidden via the .bc-personalisation--photo rule below. */
    transition: width 0.2s;
}

.bc-layer-inner--text {
    width: max-content;
    max-width: 80%;
    text-align: center;
}

/* Selected state — Canva-style blue outline */
.bc-layer-inner.bc-layer--selected {
    outline: 2px solid #4a8fd4;
    outline-offset: 3px;
    cursor: grab;
}

.bc-layer-inner.bc-layer--selected.bc-layer--dragging {
    cursor: grabbing;
}

/* Corner selection handles */
.bc-sel-handle {
    display: none;
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    border: 2px solid #4a8fd4;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 );
    z-index: 20;
    pointer-events: all;
}

/* Extend the touch tap-target to 44×44 px without changing the visual size */
.bc-sel-handle::after {
    content: '';
    position: absolute;
    inset: -17px;
}

.bc-layer-inner.bc-layer--selected .bc-sel-handle {
    display: block;
}

.bc-sel-handle--tl { top: -6px;  left: -6px;  cursor: nwse-resize; }
.bc-sel-handle--tr { top: -6px;  right: -6px; cursor: nesw-resize; }
.bc-sel-handle--bl { bottom: -6px; left: -6px;  cursor: nesw-resize; }
.bc-sel-handle--br { bottom: -6px; right: -6px; cursor: nwse-resize; }

.bc-btn--reset-design:hover {
    opacity: 1;
    color: var( --bc-text-light );
}

/* Rotation handle — circular button centred above the selected layer */
.bc-rot-handle {
    display: none;
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX( -50% );
    width: 22px;
    height: 22px;
    background: #fff;
    border: 2px solid #4a8fd4;
    border-radius: 50%;
    cursor: grab;
    pointer-events: all;
    z-index: 22;
    box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.25 );
}

/* Rotation icon (↻) via SVG background */
.bc-rot-handle::before {
    content: '↻';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #4a8fd4;
    line-height: 1;
    pointer-events: none;
}

/* Extend tap target */
.bc-rot-handle::after {
    content: '';
    position: absolute;
    inset: -14px;
}

.bc-layer-inner.bc-layer--selected .bc-rot-handle {
    display: block;
}

.bc-rot-handle:active {
    cursor: grabbing;
}

/* ==========================================================================
   Photo crop / pan / rotate / zoom (print personalisation mode)
   ========================================================================== */

/* The logo layer must not clip controls that extend beyond it in photo mode */
.bc-personalisation--photo .bc-preview-logo-layer,
.bc-preview-stack--photo .bc-preview-logo-layer {
    overflow: visible;
}

/* Ties (non-photo): let the photo-inner and image use natural dimensions
   so the logo is visible — the absolute height:100% chain collapses to 0
   when .bc-layer-inner--logo has no explicit height */
.bc-preview-stack[data-preview="ties"] .bc-photo-inner {
    position: relative;
    width: 100%;
    height: auto;
    top: auto;
    left: auto;
}

.bc-preview-stack[data-preview="ties"] .bc-photo-inner .bc-preview-logo-img {
    height: auto !important;
    object-fit: contain !important;
}

/* Inner transform wrapper — fills the mount; transforms applied by JS */
.bc-photo-inner {
    /* Default (non-photo mode): natural flow so the image's intrinsic height
       is used. position:absolute + height:100% would collapse to zero when
       .bc-layer-inner--logo has no explicit height (engraved mode). */
    position: relative;
    width: 100%;
    height: auto;
    transform-origin: center center;
    pointer-events: none;
}

/* Photo mode: 150 % × 150 %, centred — gives ~25 % panning headroom on each side */
.bc-personalisation--photo .bc-layer-inner--logo .bc-photo-inner,
.bc-preview-stack--photo .bc-layer-inner--logo .bc-photo-inner {
    position: absolute;
    width: 150%;
    height: 150%;
    top:  -25%;
    left: -25%;
}

/* Photo mode only: fill the inner wrapper; parent overflow:hidden clips to mount shape */
.bc-personalisation--photo .bc-photo-inner .bc-preview-logo-img,
.bc-preview-stack--photo .bc-photo-inner .bc-preview-logo-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    pointer-events: none;
}

/* In photo mode the mount is interactive for pan/zoom */
.bc-personalisation--photo .bc-layer-inner--logo,
.bc-preview-stack--photo .bc-layer-inner--logo {
    cursor: grab !important;
    pointer-events: auto !important;
}

.bc-personalisation--photo .bc-layer-inner--logo.bc-photo-panning,
.bc-preview-stack--photo .bc-layer-inner--logo.bc-photo-panning {
    cursor: grabbing !important;
}

/* Rotate handle inside the photo mount (top-right corner, always visible in photo mode) */
.bc-photo-rot-handle {
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 30;
    width: 26px;
    height: 26px;
    background: rgba( 0, 0, 0, 0.52 );
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 14px;
    line-height: 26px;
    text-align: center;
    cursor: grab;
    pointer-events: all;
    box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.35 );
    user-select: none;
}

.bc-photo-rot-handle:active {
    cursor: grabbing;
    background: rgba( 0, 0, 0, 0.72 );
}

.bc-personalisation--photo .bc-photo-rot-handle,
.bc-preview-stack--photo .bc-photo-rot-handle {
    display: block;
}

/* Usage hint below the photo mount */
.bc-photo-hint {
    font-size: 0.68rem;
    color: var( --bc-text-light );
    text-align: center;
    margin-top: 6px;
    font-style: italic;
    line-height: 1.5;
}

/* Hide the engraving sel-handles and rot-handle in photo mode (they belong to text/logo layers) */
.bc-personalisation--photo .bc-layer-inner--logo .bc-sel-handle,
.bc-personalisation--photo .bc-layer-inner--logo .bc-rot-handle,
.bc-preview-stack--photo .bc-layer-inner--logo .bc-sel-handle,
.bc-preview-stack--photo .bc-layer-inner--logo .bc-rot-handle {
    display: none !important;
}

/* ==========================================================================
   Engraving style description
   ========================================================================== */

.bc-engraving-help {
    padding: 8px 12px 10px;
    font-size: 0.68rem;
    color: var( --bc-text-light );
    line-height: 1.5;
    border-top: 1px solid var( --bc-border );
}

.bc-engraving-help p {
    margin: 0 0 6px;
}

.bc-engraving-help p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   3D Product Showcase — Final Quote Preview
   ========================================================================== */

.bc-final-combined-preview {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0 0 24px;
    gap: 0;
    user-select: none;
}

/* ---- Full-width stacked cards ---- */
.bc-final-pair {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    gap: 24px;
}

/* Each card: flat full-width box */
.bc-final-card {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 28px 24px 20px;
    background: var( --bc-white );
    border: 1px solid var( --bc-border );
    border-radius: var( --bc-radius-card );
    box-shadow: var( --bc-shadow );
}

/* Face card — preview fills the card */
.bc-final-card--face .bc-preview-stack {
    width: 100% !important;
    min-height: unset !important;
    aspect-ratio: 1 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* Textile (tie, pocket square) face card in quote step — restrain width, portrait ratio */
.bc-final-pair:has( .bc-final-card--textile ) {
    justify-content: center;
}

.bc-final-card--textile {
    flex: 0 0 auto;
    width: 240px;
    max-width: 80%;
}

.bc-final-card--textile .bc-preview-stack {
    aspect-ratio: 3 / 5 !important;
    background: #e4dfd8 !important;
    overflow: hidden !important;
}

/* Clasp card — render image + engraving text overlay */
.bc-final-clasp-plate {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var( --bc-radius );
    overflow: hidden;
    background: #fff;
    container-type: inline-size;
}

.bc-clasp-final-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.bc-clasp-final-text {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 76%;
    transform: translateY( -50% );
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    font-family: "Times New Roman", Times, serif;
    font-weight: normal;
    color: rgba( 60, 40, 10, 0.70 );
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 1px 1px rgba( 255, 255, 255, 0.50 );
    pointer-events: none;
}

/* Wrapper for the reverse face inside the clasp card */
.bc-final-clasp-face {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
}

/* ---- Travelling light-sweep shimmer ----
   Shape (border-radius / clip-path) is set via JS to match the face. */
.bc-3d-shimmer {
    position: absolute;
    inset: 5%;   /* matches .bc-preview-face inset */
    background: linear-gradient(
        120deg,
        transparent  0%,
        transparent 30%,
        rgba( 255, 255, 255, 0.50 ) 50%,
        transparent 70%,
        transparent 100%
    );
    background-size: 300% 100%;
    animation: bc-product-shimmer 6s ease-in-out infinite;
    pointer-events: none;
    z-index: 20;
}

@keyframes bc-product-shimmer {
    0%   { background-position: 210% 0;  opacity: 0; }
    12%  { opacity: 1; }
    55%  { background-position: -110% 0; }
    88%  { opacity: 1; }
    100% { background-position: -110% 0; opacity: 0; }
}

/* ---- Back plate — branded reverse face ----
   Shape (border-radius / clip-path) and background are set via JS. */
.bc-3d-back-plate {
    position: absolute;
    inset: 5%;   /* matches .bc-preview-face inset so back == front size */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
}

/* Guilloche concentric-ring pattern on the reverse */
.bc-3d-back-pattern {
    position: absolute;
    inset: 0;
    background:
        repeating-radial-gradient( circle at 50% 50%,
            transparent 0,
            transparent 10px,
            rgba( 0, 0, 0, 0.03 ) 11px,
            transparent 11px
        ),
        repeating-radial-gradient( circle at 50% 50%,
            transparent 0,
            transparent 22px,
            rgba( 0, 0, 0, 0.02 ) 23px,
            transparent 23px
        );
    pointer-events: none;
}

/* Inner border ring */
.bc-3d-back-plate::after {
    content: '';
    position: absolute;
    inset: 7%;
    border: 1px solid rgba( 255, 255, 255, 0.28 );
    pointer-events: none;
    border-radius: inherit;
}

/* Specular highlight */
.bc-3d-back-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba( 255, 255, 255, 0.26 ) 0%,
        transparent 50%,
        rgba( 0, 0, 0, 0.06 ) 100%
    );
    pointer-events: none;
}

/* "Badger & Brown" brand mark */
.bc-3d-back-brand {
    font-family: 'Pinyon Script', cursive;
    font-size: 1.3rem;
    line-height: 1.35;
    color: rgba( 30, 15, 3, 0.50 );
    text-shadow:
        0 1px 2px rgba( 255, 255, 255, 0.65 ),
        0 -1px 1px rgba( 0, 0, 0, 0.07 );
    text-align: center;
    letter-spacing: 0.01em;
    position: relative;
    z-index: 2;
    padding: 0 14%;
}

/* Back-plate engraving text */
.bc-3d-back-engraving {
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba( 40, 22, 4, 0.55 );
    text-shadow: 0 1px 1px rgba( 255, 255, 255, 0.55 );
    position: relative;
    z-index: 2;
    max-width: 70%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top: 1px solid rgba( 0, 0, 0, 0.12 );
    padding-top: 8px;
}

/* Card label */
.bc-final-card__label {
    font-size: 0.70rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var( --bc-text-light );
    font-family: var( --bc-font );
    font-weight: 400;
    margin-top: 4px;
}

@media ( max-width: 640px ) {
    .bc-final-pair {
        flex-direction: column;
        gap: 16px;
    }
}

/* Ties preview: portrait aspect ratio to match a real necktie */
.bc-step--tie .bc-preview-stack {
    aspect-ratio: 3 / 5;
    background: #e4dfd8; /* warm parchment — imitates a light-box / product photo background */
}

/* Textile product previews (ties, pocket squares)
   ========================================================================== */

/* Hide the metallic hardware pseudo-elements */
.bc-preview-stack[data-preview="ties"]::before,
.bc-preview-stack[data-preview="ties"]::after,
.bc-preview-stack[data-preview="pocket_square"]::before,
.bc-preview-stack[data-preview="pocket_square"]::after {
    content: none;
}

/* Tie — realistic necktie silhouette */
.bc-preview-stack[data-preview="ties"] .bc-preview-shape-border {
    display: none;
}

/*
  Necktie clip-path (percentages of the element's own box):
    • Top: the knot — wide, slightly trapezoidal
    • Neck: narrow pinch ~12–18% down
    • Blade: widens steadily to a pointed tip at 100%
  Element is 70% of container width and full height for Classic.
*/
.bc-preview-stack[data-preview="ties"] .bc-preview-face,
.bc-preview-stack[data-preview="ties"] .bc-preview-logo-layer,
.bc-preview-stack[data-preview="ties"] .bc-preview-text-layer {
    inset: 0;
    width: 70%;
    height: 100%;
    left: 50%;
    right: auto;
    bottom: auto;
    top: 0;
    transform: translateX( -50% );
    aspect-ratio: unset;
    border-radius: 0;
    clip-path: none;
}

/* Only the face is clipped to the tie silhouette */
.bc-preview-stack[data-preview="ties"] .bc-preview-face,
.bc-preview-stack[data-preview="ties"] .bc-preview-logo-layer {
    clip-path: polygon(
        30% 0%,    /* knot top-left */
        70% 0%,    /* knot top-right */
        75% 4%,    /* right outer shoulder */
        66% 9%,    /* right inner shoulder */
        60% 14%,   /* right neck */
        72% 94%,   /* right blade near tip */
        50% 100%,  /* pointed tip */
        28% 94%,   /* left blade near tip */
        40% 14%,   /* left neck */
        34% 9%,    /* left inner shoulder */
        25% 4%     /* left outer shoulder */
    );
}

/* Default face colour: classic dark navy (overridden by JS when user picks a ground colour) */
.bc-preview-stack[data-preview="ties"] .bc-preview-face {
    background: linear-gradient( 155deg, #20304a 0%, #182538 55%, #0e1828 100% );
}

/*
  Knot fold + silk sheen overlay.
  Lives in ::before so it floats above the JS-injected ground colour/pattern
  but is still clipped to the tie silhouette (clip-path clips pseudo-elements too).
*/
.bc-preview-stack[data-preview="ties"] .bc-preview-face::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Knot block slightly darker — visually separates knot from blade */
        linear-gradient(
            to bottom,
            rgba( 0,   0,   0,   0.10 ) 0%,
            rgba( 0,   0,   0,   0.10 ) 13%,
            transparent 17%
        ),
        /* Hard shadow line at the knot/blade junction fold */
        linear-gradient(
            to bottom,
            transparent 11.5%,
            rgba( 0,   0,   0,   0.40 ) 13%,
            rgba( 0,   0,   0,   0.20 ) 15%,
            transparent 18%
        ),
        /* Edge light/shadow: left-face highlight, right-face shadow */
        linear-gradient(
            to right,
            rgba( 255, 255, 255, 0.10 ) 0%,
            transparent 22%,
            transparent 74%,
            rgba( 0,   0,   0,   0.08 ) 100%
        ),
        /* Diagonal silk sheen running down the blade */
        linear-gradient(
            148deg,
            transparent 22%,
            rgba( 255, 255, 255, 0.09 ) 36%,
            rgba( 255, 255, 255, 0.04 ) 50%,
            transparent 63%
        );
    pointer-events: none;
    z-index: 3;
}

/* Suppress the generic metallic top-highlight — fabric has a much softer sheen */
.bc-preview-stack[data-preview="ties"] .bc-preview-face::after {
    background: none;
}

/* Ties: logo should display in full colour, not as an engraving */
.bc-preview-stack[data-preview="ties"] .bc-preview-logo-layer {
    mix-blend-mode: normal;
}

/* Ties repeat mode: make the logo layer interactive so the user can drag the grid */
.bc-preview-stack--logo-repeat .bc-preview-logo-layer {
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
}

.bc-preview-stack--logo-repeat .bc-preview-logo-layer.bc-logo-repeat--dragging {
    cursor: grabbing;
}

.bc-preview-stack[data-preview="ties"] .bc-preview-logo-img {
    filter: none;
}

/* Pocket square — soft square */
.bc-preview-stack[data-preview="pocket_square"] .bc-preview-face {
    border-radius: 4px;
    width: 72%;
    aspect-ratio: 1;
    top: 10%;
    background: linear-gradient( 135deg, #f5f3ee, #dedad2 );
}

.bc-preview-stack[data-preview="pocket_square"] .bc-preview-logo-layer,
.bc-preview-stack[data-preview="pocket_square"] .bc-preview-text-layer {
    border-radius: 4px;
    width: 72%;
    aspect-ratio: 1;
    top: 10%;
}

/* ==========================================================================
   Tab progress indicator
   ========================================================================== */

.bc-tab-progress {
    font-size: 0.72rem;
    color: var( --bc-text-light );
    font-style: italic;
    flex: 1;
}

/* ==========================================================================
   Character counter for engraving text fields
   ========================================================================== */

.bc-char-counter {
    display: block;
    font-size: 0.72rem;
    color: var( --bc-text-light );
    text-align: right;
    margin-top: 2px;
}

.bc-char-counter--over {
    color: #c0392b;
    font-weight: 600;
}

/* ==========================================================================
   Field error state
   ========================================================================== */

.bc-field--error {
    border-color: #c0392b !important;
    box-shadow: 0 0 0 3px rgba( 192, 57, 43, 0.12 );
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.bc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 28px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    border-radius: var( --bc-radius );
    cursor: pointer;
    border: 2px solid transparent;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.bc-btn--primary {
    background: var( --bc-accent );
    color: var( --bc-white );
    border-color: var( --bc-accent );
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.82rem;
}

.bc-btn--primary:hover {
    background: var( --bc-accent-hover );
    border-color: var( --bc-accent-hover );
    color: var( --bc-white );
}

.bc-btn--primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.bc-btn--secondary {
    background: transparent;
    color: var( --bc-accent );
    border-color: var( --bc-accent );
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.82rem;
}

.bc-btn--secondary:hover {
    background: var( --bc-accent );
    color: var( --bc-white );
}

.bc-btn--upload {
    background: var( --bc-bg );
    color: var( --bc-primary );
    border-color: var( --bc-border );
    font-size: 0.85rem;
    padding: 9px 20px;
}

.bc-btn--upload:hover {
    border-color: var( --bc-primary );
    color: var( --bc-primary );
}

/* ==========================================================================
   Step navigation footer
   ========================================================================== */

.bc-step-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid var( --bc-border );
}

/* ==========================================================================
   Quote step (Step 3)
   ========================================================================== */

.bc-step--quote {
    padding-top: 32px;
}

.bc-final-header {
    margin-bottom: 24px;
}

/* ---- Success state ---- */
.bc-quote-success {
    text-align: center;
    padding: 48px 24px 56px;
}

.bc-quote-success__icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
}

.bc-quote-success__icon svg {
    width: 100%;
    height: 100%;
}

.bc-quote-success__icon circle {
    stroke: var( --bc-success );
    stroke-width: 2;
}

.bc-quote-success__icon path {
    stroke: var( --bc-success );
    stroke-width: 3;
}

.bc-quote-success__heading {
    font-family: var( --bc-font );
    font-size: 1.4rem;
    font-weight: 600;
    color: var( --bc-dark );
    margin: 0 0 16px;
}

.bc-quote-success__body {
    font-size: 0.95rem;
    color: var( --bc-text-light );
    max-width: 460px;
    margin: 0 auto 28px;
    line-height: 1.6;
}

.bc-step--quote .bc-section-header h2 {
    font-size: 1.3rem;
}

/* Final product image summary */
.bc-product-image--final {
    width: 260px;
    aspect-ratio: 1;
    border-radius: var( --bc-radius );
    border: 1px solid var( --bc-border );
    font-size: 0.85rem;
    margin: 0 auto 24px;
    display: flex;
}

.bc-get-quote-btn {
    display: block;
    width: fit-content;
    margin: 0 auto 24px;
}

/* Quote form (always visible when the quote step is active) */
.bc-quote-form-wrap,
.bc-quote-form-inner {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.bc-quote-form .bc-field-group {
    margin-bottom: 0;
    border-radius: var( --bc-radius-card );
    overflow: hidden;
    /* stacked cards touch each other — merge with gap */
    margin-bottom: 16px;
}

.bc-quote-form .bc-field-label {
    display: block;
    width: 100%;
    background: var( --bc-card-header );
    padding: 12px 20px;
    font-size: 0.88rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.03em;
    color: var( --bc-text );
    text-align: center;
    border-bottom: 1px solid var( --bc-border );
    margin-bottom: 0;
}

.bc-quote-form .bc-input,
.bc-quote-form .bc-textarea {
    border: none;
    border-radius: 0;
    min-height: 52px;
    font-size: 1rem;
    padding: 14px 20px;
    display: block;
    width: 100%;
}

.bc-quote-form .bc-input:focus,
.bc-quote-form .bc-textarea:focus {
    outline: 2px solid var( --bc-border-focus );
    outline-offset: -2px;
}

.bc-form-messages {
    display: none;
    padding: 14px 18px;
    border-radius: var( --bc-radius );
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.bc-form-messages p {
    margin: 0;
}

.bc-form-messages--success {
    background: #eafaf1;
    color: var( --bc-success );
    border: 1px solid #a9dfbf;
}

.bc-form-messages--error {
    background: #fef9f9;
    color: var( --bc-error );
    border: 1px solid #e6b0aa;
}

.bc-submit-btn {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
}

.bc-form-row--submit {
    margin-top: 8px;
}

/* ==========================================================================
   Admin styles — quote list table
   ========================================================================== */

.bc-admin-wrap {
    margin: 20px 0;
}

.bc-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    align-items: center;
}

.bc-filters select,
.bc-filters input[type="search"] {
    height: 30px;
    padding: 0 8px;
    font-size: 0.85rem;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.bc-filters button {
    height: 30px;
    padding: 0 12px;
    font-size: 0.85rem;
}

/* Admin quote list table */
.bc-quote-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 1px 3px rgba( 0,0,0,0.08 );
}

.bc-quote-table th {
    background: var( --bc-bg );
    padding: 10px 12px;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
    border-bottom: 2px solid var( --bc-border );
}

.bc-quote-table td {
    padding: 10px 12px;
    font-size: 0.85rem;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.bc-quote-table tr:last-child td {
    border-bottom: none;
}

.bc-quote-table tr:hover td {
    background: #fafafa;
}

/* Status badges */
.bc-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-family: var( --bc-font );
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bc-status-badge--new        { background: #d6eaf8; color: #1a5276; }
.bc-status-badge--in-review  { background: #fdf6d4; color: #7d6608; }
.bc-status-badge--quoted     { background: #d5f5e3; color: #1e8449; }
.bc-status-badge--ordered    { background: #e8daef; color: #6c3483; }
.bc-status-badge--cancelled  { background: #fadbd8; color: #922b21; }

/* ==========================================================================
   Admin quote single view
   ========================================================================== */

.bc-quote-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    max-width: 1200px;
    margin-top: 24px;
}

@media ( max-width: 900px ) {
    .bc-quote-layout {
        grid-template-columns: 1fr;
    }
}

.bc-meta-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.bc-meta-table th,
.bc-meta-table td {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
}

.bc-meta-table th {
    width: 38%;
    font-weight: 600;
    color: var( --bc-text-light );
    padding-right: 12px;
}

.bc-meta-table tr:last-child th,
.bc-meta-table tr:last-child td {
    border-bottom: none;
}

.bc-action-box {
    background: var( --bc-white );
    border: 1px solid var( --bc-border );
    border-radius: var( --bc-radius );
    padding: 20px;
}

.bc-action-box h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var( --bc-border );
}

.bc-action-box label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.bc-action-box input[type="number"],
.bc-action-box select,
.bc-action-box textarea {
    width: 100%;
    padding: 8px 10px;
    font-size: 0.9rem;
    border: 1px solid var( --bc-border );
    border-radius: var( --bc-radius );
    margin-bottom: 12px;
    font-family: inherit;
}

.bc-action-box .button {
    width: 100%;
    text-align: center;
    padding: 8px;
    margin-top: 4px;
}

/* Checkout link in admin */
.bc-checkout-link-box {
    word-break: break-all;
    background: #f9f9f9;
    border: 1px solid var( --bc-border );
    border-radius: var( --bc-radius );
    padding: 10px 12px;
    font-size: 0.82rem;
    margin-top: 12px;
}

/* ==========================================================================
   Responsive tweaks
   ========================================================================== */

@media ( max-width: 600px ) {
    .bc-tab-nav {
        flex-wrap: wrap;
    }

    .bc-tab-btn {
        flex-basis: 50%;
        border-right: none;
        border-bottom: 1px solid var( --bc-border );
    }

    .bc-step-nav {
        flex-direction: column-reverse;
    }

    .bc-step-nav .bc-btn {
        width: 100%;
    }

    .bc-product-image--final {
        width: 180px;
    }
}

/* ==========================================================================
   Tie pattern tile swatches
   ========================================================================== */

.bc-swatches--tie-patterns {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 68px, 1fr ) );
    gap: 10px;
    padding: 10px 0;
}

.bc-swatch--tie-pattern {
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 6px 4px 8px;
    font-size: 0.6rem;
    letter-spacing: 0;
    text-transform: none;
    min-width: 0;
}

/* Tie silhouette shape shared by all pattern tiles */
.bc-swatch__tie-face {
    display: block;
    width: 44px;
    height: 44px;
    background: #b8b4b0;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Pattern stripe overlays — dark semi-transparent so ground colour shows through */
.bc-swatch__tie-face--thin-stripe {
    background-image: repeating-linear-gradient( 45deg,
        rgba( 20, 20, 20, 0.45 ) 0, rgba( 20, 20, 20, 0.45 ) 2px,
        transparent 2px, transparent 10px );
}
.bc-swatch__tie-face--stripe {
    background-image: repeating-linear-gradient( 45deg,
        rgba( 20, 20, 20, 0.45 ) 0, rgba( 20, 20, 20, 0.45 ) 5px,
        transparent 5px, transparent 16px );
}
.bc-swatch__tie-face--wide-stripe {
    background-image: repeating-linear-gradient( 45deg,
        rgba( 20, 20, 20, 0.45 ) 0, rgba( 20, 20, 20, 0.45 ) 10px,
        transparent 10px, transparent 24px );
}
.bc-swatch__tie-face--club-stripe {
    background-image: repeating-linear-gradient( 45deg,
        rgba( 20, 20, 20, 0.45 ) 0, rgba( 20, 20, 20, 0.45 ) 14px,
        transparent 14px, transparent 44px );
}
.bc-swatch__tie-face--hairline {
    background-image: repeating-linear-gradient( 45deg,
        rgba( 20, 20, 20, 0.5 ) 0, rgba( 20, 20, 20, 0.5 ) 1px,
        transparent 1px, transparent 7px );
}
.bc-swatch__tie-face--double-stripe {
    background-image: repeating-linear-gradient( 45deg,
        rgba( 20, 20, 20, 0.45 ) 0, rgba( 20, 20, 20, 0.45 ) 3px,
        transparent 3px, transparent 8px,
        rgba( 20, 20, 20, 0.45 ) 8px, rgba( 20, 20, 20, 0.45 ) 11px,
        transparent 11px, transparent 24px );
}
.bc-swatch__tie-face--regimental {
    background-image: repeating-linear-gradient( 45deg,
        rgba( 20, 20, 20, 0.4 ) 0, rgba( 20, 20, 20, 0.4 ) 8px,
        transparent 8px, transparent 20px );
}
.bc-swatch__tie-face--rep-stripe {
    background-image: repeating-linear-gradient( 45deg,
        rgba( 20, 20, 20, 0.45 ) 0, rgba( 20, 20, 20, 0.45 ) 6px,
        rgba( 255, 255, 255, 0.25 ) 6px, rgba( 255, 255, 255, 0.25 ) 8px,
        rgba( 20, 20, 20, 0.45 ) 8px, rgba( 20, 20, 20, 0.45 ) 14px,
        transparent 14px, transparent 26px );
}
.bc-swatch__tie-face--horizontal {
    background-image: repeating-linear-gradient( 0deg,
        rgba( 20, 20, 20, 0.42 ) 0, rgba( 20, 20, 20, 0.42 ) 4px,
        transparent 4px, transparent 14px );
}
.bc-swatch__tie-face--thick-thin {
    background-image: repeating-linear-gradient( 45deg,
        rgba( 20, 20, 20, 0.45 ) 0, rgba( 20, 20, 20, 0.45 ) 8px,
        transparent 8px, transparent 12px,
        rgba( 20, 20, 20, 0.45 ) 12px, rgba( 20, 20, 20, 0.45 ) 14px,
        transparent 14px, transparent 28px );
}
.bc-swatch__tie-face--pencil-stripe {
    background-image: repeating-linear-gradient( 45deg,
        rgba( 20, 20, 20, 0.5 ) 0, rgba( 20, 20, 20, 0.5 ) 1px,
        transparent 1px, transparent 14px );
}
.bc-swatch__tie-face--block-stripe {
    background-image: repeating-linear-gradient( 45deg,
        rgba( 20, 20, 20, 0.45 ) 0, rgba( 20, 20, 20, 0.45 ) 12px,
        transparent 12px, transparent 24px );
}
.bc-swatch__tie-face--check {
    background-image:
        repeating-linear-gradient( 45deg, rgba( 20, 20, 20, 0.3 ) 0, rgba( 20, 20, 20, 0.3 ) 4px, transparent 4px, transparent 16px ),
        repeating-linear-gradient( -45deg, rgba( 20, 20, 20, 0.3 ) 0, rgba( 20, 20, 20, 0.3 ) 4px, transparent 4px, transparent 16px );
}
.bc-swatch__tie-face--polka-dot {
    background-color: #2e2b28;
    background-image:
        radial-gradient( circle, rgba( 230, 230, 230, 0.92 ) 38%, transparent 38% ),
        radial-gradient( circle, rgba( 230, 230, 230, 0.92 ) 38%, transparent 38% );
    background-size: 16px 16px, 16px 16px;
    background-position: 0 0, 8px 8px;
}
.bc-swatch__tie-face--micro-dot {
    background-color: #2e2b28;
    background-image:
        radial-gradient( circle, rgba( 200, 200, 200, 0.75 ) 22%, transparent 22% ),
        radial-gradient( circle, rgba( 200, 200, 200, 0.75 ) 22%, transparent 22% );
    background-size: 7px 7px, 7px 7px;
    background-position: 0 0, 3.5px 3.5px;
}
/* Woven herringbone — offset chevron weave (no crossed diagonals) */
.bc-swatch__tie-face--herringbone {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='7'%3E%3Cpath d='M0 0L7 7L14 0' fill='none' stroke='rgba(20,20,20,0.5)' stroke-width='1.6'/%3E%3C/svg%3E");
    background-size: 14px 7px;
}
.bc-swatch__tie-face--diamond {
    background-image:
        repeating-linear-gradient( 45deg, rgba( 20, 20, 20, 0.2 ) 0, rgba( 20, 20, 20, 0.2 ) 2px, transparent 2px, transparent 12px ),
        repeating-linear-gradient( -45deg, rgba( 20, 20, 20, 0.2 ) 0, rgba( 20, 20, 20, 0.2 ) 2px, transparent 2px, transparent 12px );
}
.bc-swatch__tie-face--plaid {
    background-image:
        repeating-linear-gradient( 0deg, rgba( 20, 20, 20, 0.18 ) 0, rgba( 20, 20, 20, 0.18 ) 2px, transparent 2px, transparent 14px ),
        repeating-linear-gradient( 90deg, rgba( 20, 20, 20, 0.18 ) 0, rgba( 20, 20, 20, 0.18 ) 2px, transparent 2px, transparent 14px );
}
.bc-swatch__tie-face--pin-dot {
    background-image:
        radial-gradient( circle 1px at 50% 50%, rgba( 20, 20, 20, 0.45 ) 100%, transparent 100% );
    background-size: 4px 4px;
}
.bc-swatch__tie-face--paisley {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='28' viewBox='0 0 20 28'%3E%3Cpath d='M10 26C3 26 1 20 1 14 1 7 5 3 10 3 8.5 0.5 13 0 14 3 15 5.5 12.5 7.5 11 8 16 10 19 14 19 17 19 23 16 26 10 26Z' fill='rgba(20,20,20,0.42)'/%3E%3Cellipse cx='10' cy='17' rx='3.5' ry='5' fill='rgba(255,255,255,0.16)'/%3E%3Ccircle cx='10' cy='17' r='1.5' fill='rgba(20,20,20,0.32)'/%3E%3Ccircle cx='13.5' cy='3.5' r='1' fill='rgba(20,20,20,0.28)'/%3E%3C/svg%3E"),
                     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='28' viewBox='0 0 20 28'%3E%3Cpath d='M10 26C3 26 1 20 1 14 1 7 5 3 10 3 8.5 0.5 13 0 14 3 15 5.5 12.5 7.5 11 8 16 10 19 14 19 17 19 23 16 26 10 26Z' fill='rgba(20,20,20,0.42)'/%3E%3Cellipse cx='10' cy='17' rx='3.5' ry='5' fill='rgba(255,255,255,0.16)'/%3E%3Ccircle cx='10' cy='17' r='1.5' fill='rgba(20,20,20,0.32)'/%3E%3Ccircle cx='13.5' cy='3.5' r='1' fill='rgba(20,20,20,0.28)'/%3E%3C/svg%3E");
    background-size: 20px 28px, 20px 28px;
    background-position: 0 0, 10px 14px;
}
.bc-swatch__tie-face--floral {
    background-image:
        radial-gradient( circle 3px at 50% 50%, rgba( 20, 20, 20, 0.45 ) 100%, transparent 100% ),
        radial-gradient( circle 2px at 50% 20%, rgba( 20, 20, 20, 0.25 ) 100%, transparent 100% ),
        radial-gradient( circle 2px at 80% 50%, rgba( 20, 20, 20, 0.25 ) 100%, transparent 100% ),
        radial-gradient( circle 2px at 50% 80%, rgba( 20, 20, 20, 0.25 ) 100%, transparent 100% ),
        radial-gradient( circle 2px at 20% 50%, rgba( 20, 20, 20, 0.25 ) 100%, transparent 100% );
    background-size: 18px 18px;
}
.bc-swatch__tie-face--geometric {
    background-image:
        repeating-linear-gradient( 45deg,  rgba( 20, 20, 20, 0.28 ) 0, rgba( 20, 20, 20, 0.28 ) 2px, transparent 2px, transparent 10px ),
        repeating-linear-gradient( -45deg, rgba( 20, 20, 20, 0.28 ) 0, rgba( 20, 20, 20, 0.28 ) 2px, transparent 2px, transparent 10px ),
        repeating-linear-gradient( 0deg,   rgba( 20, 20, 20, 0.12 ) 0, rgba( 20, 20, 20, 0.12 ) 1px, transparent 1px, transparent 10px );
}
.bc-swatch__tie-face--custom {
    clip-path: none;
    border-radius: var( --bc-radius );
    background: none;
    border: 2px dashed var( --bc-border );
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var( --bc-text-light );
}

.bc-swatch__tie-face--upload {
    clip-path: none;
    border-radius: var( --bc-radius );
    background: none;
    border: 2px dashed var( --bc-accent, #b07d4a );
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var( --bc-accent, #b07d4a );
}

.bc-swatch__upload-note {
    display: block;
    font-size: 0.55rem;
    color: var( --bc-accent, #b07d4a );
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
    margin-top: -2px;
}

/* ==========================================================================
   Colour palette swatches (ground colour / stripe colour)
   ========================================================================== */

.bc-swatches--colour {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 6px 0 2px;
}

.bc-swatch--colour {
    width: 29px;
    height: 29px;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba( 0, 0, 0, 0.18 );
    flex-shrink: 0;
    transition: transform 0.1s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.bc-swatch--colour:hover {
    transform: scale( 1.2 );
    border-color: var( --bc-accent );
}

.bc-swatch--colour.bc-swatch--active {
    border-color: var( --bc-accent );
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var( --bc-accent );
    transform: scale( 1.1 );
}

/* ==========================================================================
   Tie type choice — Classic / Slim tiles
   ========================================================================== */

/* Realistic necktie silhouette inside each tile */
.bc-tie-type-tile__preview {
    display: block;
    margin: 0 auto 0;
    background: var( --bc-border );
    height: 96px;
    /*
      Knot: wide flat top
      Shoulders: peak then pinch inward to neck
      Blade: lines run to a point at the bottom
    */
    clip-path: polygon(
        30% 0%,   /* knot top-left */
        70% 0%,   /* knot top-right */
        75% 8%,   /* right outer shoulder */
        62% 16%,  /* right neck */
        72% 96%,  /* right blade near tip */
        50% 100%, /* pointed tip */
        28% 96%,  /* left blade near tip */
        38% 16%,  /* left neck */
        25% 8%    /* left outer shoulder */
    );
    transition: background 0.2s;
}

.bc-tie-type-tile__preview--classic {
    width: 46px;
}

.bc-tie-type-tile__preview--slim {
    width: 26px;
}

.bc-tie-type-tile:hover .bc-tie-type-tile__preview,
.bc-tie-type-tile.bc-swatch--active .bc-tie-type-tile__preview {
    background: var( --bc-accent );
}

/* Slim tie — narrower blade */
.bc-preview-stack[data-preview="ties"][data-tie-type="slim"] .bc-preview-face,
.bc-preview-stack[data-preview="ties"][data-tie-type="slim"] .bc-preview-logo-layer,
.bc-preview-stack[data-preview="ties"][data-tie-type="slim"] .bc-preview-text-layer {
    width: 48%;
}

/* ==========================================================================
   Colour picker
   ========================================================================== */

.bc-colour-picker-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var( --bc-bg );
    border: 1px solid var( --bc-border );
    border-radius: var( --bc-radius );
    margin-bottom: 8px;
}

.bc-colour-picker {
    -webkit-appearance: none;
    width: 52px;
    height: 40px;
    padding: 2px 3px;
    border: 1px solid var( --bc-border );
    border-radius: var( --bc-radius );
    cursor: pointer;
    background: none;
    flex-shrink: 0;
    transition: border-color 0.15s;
}

.bc-colour-picker:hover {
    border-color: var( --bc-border-focus );
}

.bc-colour-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.bc-colour-picker::-webkit-color-swatch {
    border: none;
    border-radius: calc( var( --bc-radius ) - 2px );
}

.bc-colour-picker-hex {
    font-size: 0.82rem;
    font-family: monospace;
    color: var( --bc-text-light );
    min-width: 58px;
    letter-spacing: 0.04em;
}

.bc-colour-picker-label {
    font-size: 0.82rem;
    color: var( --bc-text-light );
}

/* ==========================================================================
   Logo placement swatches (ties)
   ========================================================================== */

.bc-swatches--logo-placement {
    gap: 8px;
}

.bc-swatch--placement {
    padding: 7px 14px;
    font-size: 0.82rem;
    border-radius: 20px;
    border: 1px solid var( --bc-border );
    background: #fff;
    color: var( --bc-text );
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
}

.bc-swatch--placement:hover {
    border-color: var( --bc-accent );
    color: var( --bc-accent );
}

.bc-swatch--placement.bc-swatch--active {
    border-color: var( --bc-accent );
    background: var( --bc-accent );
    color: #fff;
}

/* ==========================================================================
   Custom-pattern prompt modal
   ========================================================================== */

.bc-modal-overlay--custom-pattern {
    position: fixed;
    inset: 0;
    background: rgba( 0, 0, 0, 0.55 );
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.bc-modal {
    background: var( --bc-white );
    border-radius: var( --bc-radius-card );
    box-shadow: 0 8px 40px rgba( 0, 0, 0, 0.22 );
    max-width: 480px;
    width: 100%;
    padding: 40px 36px 32px;
    text-align: center;
    position: relative;
}

.bc-modal__icon {
    display: block;
    font-size: 2.4rem;
    margin-bottom: 16px;
    color: var( --bc-accent );
}

.bc-modal h3 {
    font-family: var( --bc-font );
    font-size: 1.25rem;
    font-weight: 600;
    color: var( --bc-text );
    margin: 0 0 14px;
}

.bc-modal p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var( --bc-text-light );
    margin: 0 0 28px;
}

.bc-modal__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.bc-modal__actions .bc-btn {
    min-width: 120px;
}

/* -------------------------------------------------------------------------
   Pay-for-order page — standard shipping options (bespoke orders)
   ------------------------------------------------------------------------- */
.bc-shipping-options {
    margin: 16px 0 8px;
}
.bc-shipping-status {
    margin: 0;
    color: #666;
}
.bc-shipping-methods {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}
.bc-shipping-methods li {
    margin: 0 0 6px;
}
.bc-shipping-methods label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.bc-shipping-methods .bc-shipping-cost {
    margin-left: auto;
    font-weight: 600;
}
.bc-shipping-summary {
    border-top: 1px solid #e6e6e6;
    padding-top: 10px;
}
.bc-shipping-summary > div {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
}
.bc-shipping-summary .bc-shipping-total {
    font-weight: 700;
    border-top: 1px solid #e6e6e6;
    margin-top: 6px;
    padding-top: 8px;
}