@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;
} .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; --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;
} .bc-configurator {
font-family: var( --bc-font );
font-size: 15px;
isolation: isolate; letter-spacing: 0.01em;
color: var( --bc-text );
max-width: 1140px; margin: 0 auto;
padding: 0 16px 48px;
box-sizing: border-box;
}
.bc-configurator *,
.bc-configurator *::before,
.bc-configurator *::after {
box-sizing: inherit;
} .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;
} .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;
} .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 );
} .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;
} .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 );
} .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;
} .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;
} .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;
} .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;
} .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 );
} .bc-field-group > .bc-char-counter {
padding: 0 20px 10px;
text-align: right;
font-size: 0.72rem;
color: var( --bc-text-light );
} .bc-field-group > .bc-field-label .bc-required {
margin-left: 4px;
} .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;
} .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;
} .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 );
} .bc-step,
.bc-tab-nav,
.bc-form-messages,
.bc-configurator {
scroll-margin-top: var( --bc-scroll-margin, 100px );
} .bc-configure-layout {
display: grid;
grid-template-columns: 420px 1fr;
gap: 40px;
align-items: start;
margin-bottom: 32px;
} .bc-step--tie .bc-configure-layout {
grid-template-columns: 280px 1fr;
}
.bc-configure-left {
position: sticky;
top: 130px; }
@media ( max-width: 860px ) {
.bc-configure-layout {
grid-template-columns: 1fr;
}
.bc-configure-left {
position: static;
}
} .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;
} .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;
} .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;
} .bc-font-search-results {
position: fixed;
z-index: 9999;
background: #ffffff;
border: 1px solid #d3d3d3;
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;
} .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;
} .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;
} .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, #cbcbcb );
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;
} .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;
} .bc-swatches {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 4px;
} .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;
} .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;
} .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 );
} .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 ); } .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 );
} .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;
} .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;
} .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 );
} .bc-preview-stack {
position: relative;
width: 100%;
aspect-ratio: 1;
min-height: 200px; background: #f5f5f5;
border-radius: var( --bc-radius );
overflow: hidden;
container-type: inline-size; } .bc-preview-stack::before,
.bc-preview-stack::after {
content: none;
} .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;
} .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;
} .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;
} .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;
} .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 );
} .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;
} .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;
} .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;
} .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; mix-blend-mode: multiply;
}
.bc-preview-logo-layer.bc-preview-active {
display: flex;
}
.bc-preview-logo-img { display: block;
width: 100%;
height: auto;
object-fit: contain; filter: grayscale( 1 ) contrast( 1.6 );
transition: width 0.25s, height 0.25s; pointer-events: none;
-webkit-user-drag: none;
user-drag: none;
} .bc-personalisation--photo .bc-preview-logo-layer,
.bc-preview-stack--photo .bc-preview-logo-layer {
mix-blend-mode: normal;
} .bc-personalisation--photo .bc-preview-logo-img,
.bc-preview-stack--photo .bc-preview-logo-img {
filter: none;
object-fit: cover;
width: 100%;
height: 100%;
} .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: 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;
} .bc-preview-stack--has-text .bc-layer-inner--logo {
width: 33%;
} .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;
} .bc-preview-text-content {
font-size: 0.65rem; 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;
} .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%;
} .bc-bespoke-guide {
background: #faf7f2;
border: 1px solid #dfdfdf;
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: #f8f8f8;
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: #f7f7f7;
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;
} .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; 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; }
.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; }
.bc-journey-tile:hover .bc-journey-tile__cta {
background: var( --bc-accent-hover );
} .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;
} .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;
} .bc-step-back-row {
margin: 0;
} .bc-section-header--with-back {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
}
.bc-section-header--with-back h2 {
margin: 0;
}  .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%; transition: width 0.2s;
}
.bc-layer-inner--text {
width: max-content;
max-width: 80%;
text-align: center;
} .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;
} .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;
} .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 );
} .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 );
} .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;
} .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;
}  .bc-personalisation--photo .bc-preview-logo-layer,
.bc-preview-stack--photo .bc-preview-logo-layer {
overflow: visible;
} .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;
} .bc-photo-inner { position: relative;
width: 100%;
height: auto;
transform-origin: center center;
pointer-events: none;
} .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%;
} .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;
} .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;
} .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;
} .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;
} .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;
} .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;
} .bc-final-combined-preview {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0 0 24px;
gap: 0;
user-select: none;
} .bc-final-pair {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
gap: 24px;
} .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 );
} .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;
} .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: #e0e0e0 !important;
overflow: hidden !important;
} .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;
} .bc-final-clasp-face {
position: relative;
width: 100%;
aspect-ratio: 1;
} .bc-3d-shimmer {
position: absolute;
inset: 5%; 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; }
} .bc-3d-back-plate {
position: absolute;
inset: 5%; display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
overflow: hidden;
} .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;
} .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;
} .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;
} .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%;
} .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;
} .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;
}
} .bc-step--tie .bc-preview-stack {
aspect-ratio: 3 / 5;
background: #e0e0e0; }  .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;
} .bc-preview-stack[data-preview="ties"] .bc-preview-shape-border {
display: none;
} .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;
} .bc-preview-stack[data-preview="ties"] .bc-preview-face,
.bc-preview-stack[data-preview="ties"] .bc-preview-logo-layer {
clip-path: polygon(
30% 0%, 70% 0%, 75% 4%, 66% 9%, 60% 14%, 72% 94%, 50% 100%, 28% 94%, 40% 14%, 34% 9%, 25% 4% );
} .bc-preview-stack[data-preview="ties"] .bc-preview-face {
background: linear-gradient( 155deg, #20304a 0%, #182538 55%, #0e1828 100% );
} .bc-preview-stack[data-preview="ties"] .bc-preview-face::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba( 0,   0,   0,   0.10 ) 0%,
rgba( 0,   0,   0,   0.10 ) 13%,
transparent 17%
), linear-gradient(
to bottom,
transparent 11.5%,
rgba( 0,   0,   0,   0.40 ) 13%,
rgba( 0,   0,   0,   0.20 ) 15%,
transparent 18%
), linear-gradient(
to right,
rgba( 255, 255, 255, 0.10 ) 0%,
transparent 22%,
transparent 74%,
rgba( 0,   0,   0,   0.08 ) 100%
), 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;
} .bc-preview-stack[data-preview="ties"] .bc-preview-face::after {
background: none;
} .bc-preview-stack[data-preview="ties"] .bc-preview-logo-layer {
mix-blend-mode: normal;
} .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;
} .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, #dadada );
}
.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%;
} .bc-tab-progress {
font-size: 0.72rem;
color: var( --bc-text-light );
font-style: italic;
flex: 1;
} .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;
} .bc-field--error {
border-color: #c0392b !important;
box-shadow: 0 0 0 3px rgba( 192, 57, 43, 0.12 );
} .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 );
} .bc-step-nav {
display: flex;
align-items: center;
gap: 16px;
padding-top: 24px;
border-top: 1px solid var( --bc-border );
} .bc-step--quote {
padding-top: 32px;
}
.bc-final-header {
margin-bottom: 24px;
} .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;
} .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;
} .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; 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;
} .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;
} .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;
} .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: #e4e4e4; color: #922b21; } .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;
} .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;
} @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;
}
} .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;
} .bc-swatch__tie-face {
display: block;
width: 44px;
height: 44px;
background: #b8b4b0;
border-radius: 4px;
flex-shrink: 0;
} .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;
} .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;
} .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 );
}  .bc-tie-type-tile__preview {
display: block;
margin: 0 auto 0;
background: var( --bc-border );
height: 96px; clip-path: polygon(
30% 0%, 70% 0%, 75% 8%, 62% 16%, 72% 96%, 50% 100%, 28% 96%, 38% 16%, 25% 8% );
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 );
} .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%;
} .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 );
} .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;
} .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;
} .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;
} .bc-configure-layout > p,
.bc-configurator .bc-step > p:empty { display: none !important; }.bc-configurator {
--bc-primary:       #262626;
--bc-primary-hover: #000000;
--bc-accent:        #262626;
--bc-accent-hover:  #000000;
--bc-dark:          #0d0d0d;
--bc-border:        #e2e2e2;
--bc-border-focus:  #000000;
--bc-bg:            #f4f4f4;
--bc-card-header:   #f1f1f1;
--bc-white:         #ffffff;
--bc-text:          #000000;
--bc-text-light:    #666666;
--bc-radius:        0;
--bc-radius-sm:     0;
--bc-radius-card:   0;
--bc-shadow:        none;
--bc-font:          'Jost', 'Helvetica Neue', Arial, sans-serif;
--bc-display:       'Cormorant Garamond', Georgia, 'Times New Roman', serif;
max-width: 1280px;
font-size: 15px;
letter-spacing: 0;
line-height: 1.7;
}
.bc-configurator a { color: #000000; }
.bc-configurator a:hover { color: #5e3e1c; } .bc-configurator .bc-section-header h2,
.bc-configurator .bc-quote-form-title,
.bc-configurator .bc-guided-journey__title,
.bc-configurator .bc-type-card h3 {
font-family: var( --bc-display );
font-weight: 400;
font-size: clamp( 2rem, 1.4rem + 2vw, 3rem );
line-height: 1.1;
letter-spacing: 0;
text-transform: none;
color: var( --bc-text );
}
.bc-configurator .bc-section-header { text-align: center; margin-bottom: 40px; }
.bc-configurator .bc-section-intro,
.bc-configurator .bc-page-subtitle { color: #555555; font-weight: 300; font-size: 1rem; max-width: 640px; margin-left: auto; margin-right: auto; }
.bc-configurator .bc-page-header { border-bottom: 0; text-align: center; padding: 8px 0 0; margin-bottom: 24px; } .bc-configurator .bc-btn {
border-radius: 0;
min-height: 48px;
padding: 0 28px;
font-family: var( --bc-font );
font-size: 0.71875rem;
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.bc-configurator .bc-btn--primary { background: #5e3e1c; border-color: #5e3e1c; color: #fff; box-shadow: inset 0 2px 0 #8a6640; }
.bc-configurator .bc-btn--primary:hover { background: #5e3e1c; border-color: #5e3e1c; color: #fff; box-shadow: inset 0 2px 0 #a07a52, 0 7px 20px -9px rgba( 0, 0, 0, 0.6 ); }
.bc-configurator .bc-btn--secondary { background: #fff; border: 1px solid #000000; color: #000000; }
.bc-configurator .bc-btn--secondary:hover { background: #000000; border-color: #000000; color: #fff; }
.bc-configurator .bc-btn--upload { background: #f4f4f4; border: 1px dashed #c8c8ca; color: #000000; min-height: 52px; }
.bc-configurator .bc-btn--upload:hover { border-color: #000000; background: #fff; color: #000000; } .bc-configurator .bc-journey-choice,
.bc-configurator .bc-personalisation-choice {
gap: 2px;
background: #e2e2e2;
border: 1px solid #e2e2e2;
}
.bc-configurator .bc-journey-tile,
.bc-configurator .bc-personalisation-tile {
border: 0;
border-radius: 0;
background: #fff;
padding: 40px 32px;
align-items: flex-start;
text-align: left;
box-shadow: none;
transform: none;
outline: 2px solid transparent;
outline-offset: -2px;
transition: background 0.2s, outline-color 0.2s;
}
.bc-configurator .bc-journey-tile:hover,
.bc-configurator .bc-personalisation-tile:hover { background: #f4f4f4; transform: none; box-shadow: none; outline-color: #262626; }
.bc-configurator .bc-journey-tile__icon,
.bc-configurator .bc-personalisation-tile__icon { height: auto; font-size: 1.5rem; color: #5e3e1c; justify-content: flex-start; }
.bc-configurator .bc-journey-tile strong,
.bc-configurator .bc-personalisation-tile strong { font-family: var( --bc-display ); font-weight: 500; font-size: 1.875rem; line-height: 1.1; }
.bc-configurator .bc-journey-tile__features { text-align: left; gap: 8px; }
.bc-configurator .bc-journey-tile__features li { font-size: 0.875rem; color: #555555; padding-left: 24px; position: relative; text-align: left; }
.bc-configurator .bc-journey-tile__features li::before { content: ''; position: absolute; left: 0; top: 0.8em; width: 14px; height: 1px; background: #5e3e1c; }
.bc-configurator .bc-journey-tile__moq { font-size: 0.75rem; color: #5e3e1c; margin: 0; }
.bc-configurator .bc-journey-tile__cta {
display: inline-flex; align-items: center; height: 44px; padding: 0 24px;
background: #262626; color: #fff; font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase;
}
.bc-configurator .bc-personalisation-tile__desc { color: #555555; font-size: 0.875rem; } .bc-configurator .bc-configure-left { background: #f4f4f4; padding: 28px; }
.bc-configurator .bc-preview-hint,
.bc-configurator .bc-preview-disclaimer { color: #666666; font-size: 0.78rem; }
.bc-configurator .bc-tabs { border: 1px solid #e2e2e2; border-radius: 0; background: #fff; box-shadow: none; }
.bc-configurator .bc-tab-nav { background: #fff; border-bottom: 1px solid #e2e2e2; }
.bc-configurator .bc-tab-btn {
font-weight: 400; font-size: 0.6875rem; letter-spacing: 0.2em; color: #666666;
border-right: 0; padding: 16px 10px;
}
.bc-configurator .bc-tab-btn:hover,
.bc-configurator .bc-tab-btn:focus { background: #f4f4f4; color: #000000; }
.bc-configurator .bc-tab-btn--active { color: #000000; background: #fff; box-shadow: inset 0 -2px 0 #262626; }
.bc-configurator .bc-tab-panel { padding: 28px; }
.bc-configurator .bc-field-label { font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 400; color: #000000; }
.bc-configurator .bc-required { color: #5e3e1c; }
.bc-configurator .bc-input,
.bc-configurator .bc-textarea,
.bc-configurator .bc-select,
.bc-configurator .bc-font-search-input {
border-radius: 0; border: 1px solid #c8c8ca; font-family: var( --bc-font ); font-size: 0.9375rem; color: #000000; background: #fff;
}
.bc-configurator .bc-input,
.bc-configurator .bc-select,
.bc-configurator .bc-font-search-input { min-height: 48px; }
.bc-configurator .bc-input:focus,
.bc-configurator .bc-textarea:focus,
.bc-configurator .bc-select:focus,
.bc-configurator .bc-font-search-input:focus { border-color: #000000; box-shadow: none; outline: none; } .bc-configurator .bc-swatch { border-radius: 0; border: 1px solid #e2e2e2; background: #fff; color: #000000; }
.bc-configurator .bc-swatch:hover { border-color: #000000; color: #000000; }
.bc-configurator .bc-swatch--active { border: 1.5px solid #5e3e1c; background: #f4f4f4; color: #000000; }
.bc-configurator .bc-swatch__shape { background: #c8c8ca; }
.bc-configurator .bc-font-preset-btn { border-radius: 0; border: 1px solid #e2e2e2; background: #fff; color: #000000; }
.bc-configurator .bc-font-preset-btn:hover { border-color: #000000; }
.bc-configurator .bc-font-preset-btn--active,
.bc-configurator .bc-font-preset-btn--active:hover { background: #5e3e1c; border-color: #5e3e1c; color: #fff; }
.bc-configurator .bc-font-search-results { border-radius: 0; border: 1px solid #000000; box-shadow: 0 18px 30px -18px rgba( 0, 0, 0, 0.35 ); }
.bc-configurator .bc-font-result,
.bc-configurator .bc-font-result:hover { color: #000000; }
.bc-configurator .bc-font-result:hover { background: #f1f1f1; }
.bc-configurator .bc-repeat-count-btn { border-radius: 0; } .bc-configurator .bc-layer-inner.bc-layer--selected { outline-color: #262626; }
.bc-configurator .bc-sel-handle,
.bc-configurator .bc-rot-handle { border-color: #262626; }
.bc-configurator .bc-rot-handle::before { color: #262626; } .bc-configurator .bc-examples-label { text-align: center; font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase; color: #5e3e1c; margin-top: 56px; }
.bc-configurator .bc-examples-label strong { font-weight: 400; }
.bc-configurator .bc-examples-grid { gap: 2px; }
.bc-configurator .bc-examples-grid img { border-radius: 0; }
.bc-configurator .bc-help-footer { background: #f4f4f4; border: 0; border-radius: 0; text-align: center; color: #555555; padding: 22px; }
.bc-configurator .bc-help-footer a { border-bottom: 1px solid #000000; text-decoration: none; } .bc-configurator .bc-quote-form-wrap { background: #f4f4f4; padding: clamp( 24px, 4vw, 44px ); border: 0; border-radius: 0; }
.bc-configurator .bc-final-preview { background: #fff; border: 1px solid #e2e2e2; border-radius: 0; } .bc-design-anchor .bc-journey-choice { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; background: none !important; padding: 0 !important; border: 0 !important; max-width: 1080px; margin: 0 auto !important; align-items: stretch !important; }
.bc-design-anchor .bc-journey-choice .bc-journey-tile { width: 100% !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; height: auto !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 0 !important; padding: 40px 40px 36px !important; background: #fff !important; border: 1px solid #e4e4e4 !important; border-radius: 0 !important; box-shadow: none !important; text-align: left !important; color: #0d0d0d !important; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; font: inherit !important; line-height: 1.5 !important; text-transform: none !important; letter-spacing: normal !important; }
.bc-design-anchor .bc-journey-choice .bc-journey-tile:hover { border-color: #000000 !important; box-shadow: 0 14px 30px -20px rgba(0,0,0,.45) !important; }
.bc-design-anchor .bc-journey-tile__icon { font-size: 1.25rem !important; color: #5e3e1c !important; margin: 0 0 18px !important; line-height: 1 !important; }
.bc-design-anchor .bc-journey-tile > strong { display: block; font-family: 'Cormorant Garamond', serif !important; font-weight: 400 !important; font-size: 2rem !important; line-height: 1.1 !important; margin: 0 0 18px !important; color: #0d0d0d !important; }
.bc-design-anchor .bc-journey-tile__features { list-style: none !important; margin: 0 0 20px !important; padding: 0 !important; display: flex; flex-direction: column; gap: 8px; }
.bc-design-anchor .bc-journey-tile__features li { margin: 0 !important; font-size: .9375rem !important; color: #444444 !important; }
.bc-design-anchor .bc-journey-tile__moq { margin: 0 0 20px !important; }
.bc-design-anchor .bc-journey-tile__cta { margin-top: auto !important; }
@media (max-width: 760px) {
.bc-design-anchor .bc-journey-choice { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
.bc-design-anchor .bc-journey-choice .bc-journey-tile { padding: 28px 24px !important; }
.bc-design-anchor .bc-journey-tile > strong { font-size: 1.625rem !important; }
}