@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; }
}.mejs-offscreen{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal}.mejs-container{background:#000;font-family:Helvetica,Arial,serif;position:relative;text-align:left;text-indent:0;vertical-align:top}.mejs-container,.mejs-container *{box-sizing:border-box}.mejs-container video::-webkit-media-controls,.mejs-container video::-webkit-media-controls-panel,.mejs-container video::-webkit-media-controls-panel-container,.mejs-container video::-webkit-media-controls-start-playback-button{-webkit-appearance:none;display:none!important}.mejs-fill-container,.mejs-fill-container .mejs-container{height:100%;width:100%}.mejs-fill-container{background:transparent;margin:0 auto;overflow:hidden;position:relative}.mejs-container:focus{outline:none}.mejs-iframe-overlay{height:100%;position:absolute;width:100%}.mejs-embed,.mejs-embed body{background:#000;height:100%;margin:0;overflow:hidden;padding:0;width:100%}.mejs-fullscreen{overflow:hidden!important}.mejs-container-fullscreen{bottom:0;left:0;overflow:hidden;position:fixed;right:0;top:0;z-index:1000}.mejs-container-fullscreen .mejs-mediaelement,.mejs-container-fullscreen video{height:100%!important;width:100%!important}.mejs-background,.mejs-mediaelement{left:0;position:absolute;top:0}.mejs-mediaelement{height:100%;width:100%;z-index:0}.mejs-poster{background-position:50% 50%;background-repeat:no-repeat;background-size:cover;left:0;position:absolute;top:0;z-index:1}:root .mejs-poster-img{display:none}.mejs-poster-img{border:0;padding:0}.mejs-overlay{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;left:0;position:absolute;top:0}.mejs-layer{z-index:1}.mejs-overlay-play{cursor:pointer}.mejs-overlay-button{background:url(//badger.revuponline.co.uk/wp-includes/js/mediaelement/mejs-controls.svg) no-repeat;background-position:0 -39px;height:80px;width:80px}.mejs-overlay:hover>.mejs-overlay-button{background-position:-80px -39px}.mejs-overlay-loading{height:80px;width:80px}.mejs-overlay-loading-bg-img{-webkit-animation:a 1s linear infinite;animation:a 1s linear infinite;background:transparent url(//badger.revuponline.co.uk/wp-includes/js/mediaelement/mejs-controls.svg) -160px -40px no-repeat;display:block;height:80px;width:80px;z-index:1}@-webkit-keyframes a{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes a{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.mejs-controls{bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:40px;left:0;list-style-type:none;margin:0;padding:0 10px;position:absolute;width:100%;z-index:3}.mejs-controls:not([style*="display: none"]){background:rgba(255,0,0,.7);background:-webkit-linear-gradient(transparent,rgba(0,0,0,.35));background:linear-gradient(transparent,rgba(0,0,0,.35))}.mejs-button,.mejs-time,.mejs-time-rail{font-size:10px;height:40px;line-height:10px;margin:0;width:32px}.mejs-button>button{background:transparent url(//badger.revuponline.co.uk/wp-includes/js/mediaelement/mejs-controls.svg);border:0;cursor:pointer;display:block;font-size:0;height:20px;line-height:0;margin:10px 6px;overflow:hidden;padding:0;position:absolute;text-decoration:none;width:20px}.mejs-button>button:focus{outline:1px dotted #999}.mejs-container-keyboard-inactive [role=slider],.mejs-container-keyboard-inactive [role=slider]:focus,.mejs-container-keyboard-inactive a,.mejs-container-keyboard-inactive a:focus,.mejs-container-keyboard-inactive button,.mejs-container-keyboard-inactive button:focus{outline:0}.mejs-time{box-sizing:content-box;color:#fff;font-size:11px;font-weight:700;height:24px;overflow:hidden;padding:16px 6px 0;text-align:center;width:auto}.mejs-play>button{background-position:0 0}.mejs-pause>button{background-position:-20px 0}.mejs-replay>button{background-position:-160px 0}.mejs-time-rail{direction:ltr;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;height:40px;margin:0 10px;padding-top:10px;position:relative}.mejs-time-buffering,.mejs-time-current,.mejs-time-float,.mejs-time-float-corner,.mejs-time-float-current,.mejs-time-hovered,.mejs-time-loaded,.mejs-time-marker,.mejs-time-total{border-radius:2px;cursor:pointer;display:block;height:10px;position:absolute}.mejs-time-total{background:hsla(0,0%,100%,.3);margin:5px 0 0;width:100%}.mejs-time-buffering{-webkit-animation:b 2s linear infinite;animation:b 2s linear infinite;background:-webkit-linear-gradient(135deg,hsla(0,0%,100%,.4) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.4) 0,hsla(0,0%,100%,.4) 75%,transparent 0,transparent);background:linear-gradient(-45deg,hsla(0,0%,100%,.4) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.4) 0,hsla(0,0%,100%,.4) 75%,transparent 0,transparent);background-size:15px 15px;width:100%}@-webkit-keyframes b{0%{background-position:0 0}to{background-position:30px 0}}@keyframes b{0%{background-position:0 0}to{background-position:30px 0}}.mejs-time-loaded{background:hsla(0,0%,100%,.3)}.mejs-time-current,.mejs-time-handle-content{background:hsla(0,0%,100%,.9)}.mejs-time-hovered{background:hsla(0,0%,100%,.5);z-index:10}.mejs-time-hovered.negative{background:rgba(0,0,0,.2)}.mejs-time-buffering,.mejs-time-current,.mejs-time-hovered,.mejs-time-loaded{left:0;-webkit-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-transition:all .15s ease-in;transition:all .15s ease-in;width:100%}.mejs-time-buffering{-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1)}.mejs-time-hovered{-webkit-transition:height .1s cubic-bezier(.44,0,1,1);transition:height .1s cubic-bezier(.44,0,1,1)}.mejs-time-hovered.no-hover{-webkit-transform:scaleX(0)!important;-ms-transform:scaleX(0)!important;transform:scaleX(0)!important}.mejs-time-handle,.mejs-time-handle-content{border:4px solid transparent;cursor:pointer;left:0;position:absolute;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);z-index:11}.mejs-time-handle-content{border:4px solid hsla(0,0%,100%,.9);border-radius:50%;height:10px;left:-7px;top:-4px;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);width:10px}.mejs-time-rail .mejs-time-handle-content:active,.mejs-time-rail .mejs-time-handle-content:focus,.mejs-time-rail:hover .mejs-time-handle-content{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.mejs-time-float{background:#eee;border:1px solid #333;bottom:100%;color:#111;display:none;height:17px;margin-bottom:9px;position:absolute;text-align:center;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:36px}.mejs-time-float-current{display:block;left:0;margin:2px;text-align:center;width:30px}.mejs-time-float-corner{border:5px solid #eee;border-color:#eee transparent transparent;border-radius:0;display:block;height:0;left:50%;line-height:0;position:absolute;top:100%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:0}.mejs-long-video .mejs-time-float{margin-left:-23px;width:64px}.mejs-long-video .mejs-time-float-current{width:60px}.mejs-broadcast{color:#fff;height:10px;position:absolute;top:15px;width:100%}.mejs-fullscreen-button>button{background-position:-80px 0}.mejs-unfullscreen>button{background-position:-100px 0}.mejs-mute>button{background-position:-60px 0}.mejs-unmute>button{background-position:-40px 0}.mejs-volume-button{position:relative}.mejs-volume-button>.mejs-volume-slider{-webkit-backface-visibility:hidden;background:rgba(50,50,50,.7);border-radius:0;bottom:100%;display:none;height:115px;left:50%;margin:0;position:absolute;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:25px;z-index:1}.mejs-volume-button:hover{border-radius:0 0 4px 4px}.mejs-volume-total{background:hsla(0,0%,100%,.5);height:100px;left:50%;margin:0;position:absolute;top:8px;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:2px}.mejs-volume-current{left:0;margin:0;width:100%}.mejs-volume-current,.mejs-volume-handle{background:hsla(0,0%,100%,.9);position:absolute}.mejs-volume-handle{border-radius:1px;cursor:ns-resize;height:6px;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:16px}.mejs-horizontal-volume-slider{display:block;height:36px;position:relative;vertical-align:middle;width:56px}.mejs-horizontal-volume-total{background:rgba(50,50,50,.8);height:8px;top:16px;width:50px}.mejs-horizontal-volume-current,.mejs-horizontal-volume-total{border-radius:2px;font-size:1px;left:0;margin:0;padding:0;position:absolute}.mejs-horizontal-volume-current{background:hsla(0,0%,100%,.8);height:100%;top:0;width:100%}.mejs-horizontal-volume-handle{display:none}.mejs-captions-button,.mejs-chapters-button{position:relative}.mejs-captions-button>button{background-position:-140px 0}.mejs-chapters-button>button{background-position:-180px 0}.mejs-captions-button>.mejs-captions-selector,.mejs-chapters-button>.mejs-chapters-selector{background:rgba(50,50,50,.7);border:1px solid transparent;border-radius:0;bottom:100%;margin-right:-43px;overflow:hidden;padding:0;position:absolute;right:50%;visibility:visible;width:86px}.mejs-chapters-button>.mejs-chapters-selector{margin-right:-55px;width:110px}.mejs-captions-selector-list,.mejs-chapters-selector-list{list-style-type:none!important;margin:0;overflow:hidden;padding:0}.mejs-captions-selector-list-item,.mejs-chapters-selector-list-item{color:#fff;cursor:pointer;display:block;list-style-type:none!important;margin:0 0 6px;overflow:hidden;padding:0}.mejs-captions-selector-list-item:hover,.mejs-chapters-selector-list-item:hover{background-color:#c8c8c8!important;background-color:hsla(0,0%,100%,.4)!important}.mejs-captions-selector-input,.mejs-chapters-selector-input{clear:both;float:left;left:-1000px;margin:3px 3px 0 5px;position:absolute}.mejs-captions-selector-label,.mejs-chapters-selector-label{cursor:pointer;float:left;font-size:10px;line-height:15px;padding:4px 10px 0;width:100%}.mejs-captions-selected,.mejs-chapters-selected{color:#21f8f8}.mejs-captions-translations{font-size:10px;margin:0 0 5px}.mejs-captions-layer{bottom:0;color:#fff;font-size:16px;left:0;line-height:20px;position:absolute;text-align:center}.mejs-captions-layer a{color:#fff;text-decoration:underline}.mejs-captions-layer[lang=ar]{font-size:20px;font-weight:400}.mejs-captions-position{bottom:15px;left:0;position:absolute;width:100%}.mejs-captions-position-hover{bottom:35px}.mejs-captions-text,.mejs-captions-text *{background:hsla(0,0%,8%,.5);box-shadow:5px 0 0 hsla(0,0%,8%,.5),-5px 0 0 hsla(0,0%,8%,.5);padding:0;white-space:pre-wrap}.mejs-container.mejs-hide-cues video::-webkit-media-text-track-container{display:none}.mejs-overlay-error{position:relative}.mejs-overlay-error>img{left:0;max-width:100%;position:absolute;top:0;z-index:-1}.mejs-cannotplay,.mejs-cannotplay a{color:#fff;font-size:.8em}.mejs-cannotplay{position:relative}.mejs-cannotplay a,.mejs-cannotplay p{display:inline-block;padding:0 15px;width:100%}.mejs-container{clear:both;max-width:100%}.mejs-container *{font-family:Helvetica,Arial}.mejs-container,.mejs-container .mejs-controls,.mejs-embed,.mejs-embed body{background:#222}.mejs-time{font-weight:400;word-wrap:normal}.mejs-controls a.mejs-horizontal-volume-slider{display:table}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,.mejs-controls .mejs-time-rail .mejs-time-loaded{background:#fff}.mejs-controls .mejs-time-rail .mejs-time-current{background:#0073aa}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,.mejs-controls .mejs-time-rail .mejs-time-total{background:rgba(255,255,255,.33)}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total,.mejs-controls .mejs-time-rail span{border-radius:0}.mejs-overlay-loading{background:0 0}.mejs-controls button:hover{border:none;-webkit-box-shadow:none;box-shadow:none}.me-cannotplay{width:auto!important}.media-embed-details .wp-audio-shortcode{display:inline-block;max-width:400px}.audio-details .embed-media-settings{overflow:visible}.media-embed-details .embed-media-settings .setting span:not(.button-group){max-width:400px;width:auto}.media-embed-details .embed-media-settings .checkbox-setting span{display:inline-block}.media-embed-details .embed-media-settings{padding-top:0;top:28px}.media-embed-details .instructions{padding:16px 0;max-width:600px}.media-embed-details .setting .remove-setting,.media-embed-details .setting p{color:#a00;font-size:10px;text-transform:uppercase}.media-embed-details .setting .remove-setting{padding:5px 0}.media-embed-details .setting a:hover{color:#dc3232}.media-embed-details .embed-media-settings .checkbox-setting{float:none;margin:0 0 10px}.wp-video{max-width:100%;height:auto}.wp_attachment_holder .wp-audio-shortcode,.wp_attachment_holder .wp-video{margin-top:18px}.wp-video-shortcode video,video.wp-video-shortcode{max-width:100%;display:inline-block}.video-details .wp-video-holder{width:100%;max-width:640px}.wp-playlist{border:1px solid #ccc;padding:10px;margin:12px 0 18px;font-size:14px;line-height:1.5}.wp-admin .wp-playlist{margin:0 0 18px}.wp-playlist video{display:inline-block;max-width:100%}.wp-playlist audio{display:none;max-width:100%;width:400px}.wp-playlist .mejs-container{margin:0;max-width:100%}.wp-playlist .mejs-controls .mejs-button button{outline:0}.wp-playlist-light{background:#fff;color:#000}.wp-playlist-dark{color:#fff;background:#000}.wp-playlist-caption{display:block;max-width:88%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:1.5}.wp-playlist-item .wp-playlist-caption{text-decoration:none;color:#000;max-width:-webkit-calc(100% - 40px);max-width:calc(100% - 40px)}.wp-playlist-item-meta{display:block;font-size:14px;line-height:1.5}.wp-playlist-item-title{font-size:14px;line-height:1.5}.wp-playlist-item-album{font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wp-playlist-item-artist{font-size:12px;text-transform:uppercase}.wp-playlist-item-length{position:absolute;right:3px;top:0;font-size:14px;line-height:1.5}.rtl .wp-playlist-item-length{left:3px;right:auto}.wp-playlist-tracks{margin-top:10px}.wp-playlist-item{position:relative;cursor:pointer;padding:0 3px;border-bottom:1px solid #ccc}.wp-playlist-item:last-child{border-bottom:0}.wp-playlist-light .wp-playlist-caption{color:#333}.wp-playlist-dark .wp-playlist-caption{color:#ddd}.wp-playlist-playing{font-weight:700;background:#f7f7f7}.wp-playlist-light .wp-playlist-playing{background:#fff;color:#000}.wp-playlist-dark .wp-playlist-playing{background:#000;color:#fff}.wp-playlist-current-item{overflow:hidden;margin-bottom:10px;height:60px}.wp-playlist .wp-playlist-current-item img{float:left;max-width:60px;height:auto;margin-right:10px;padding:0;border:0}.rtl .wp-playlist .wp-playlist-current-item img{float:right;margin-left:10px;margin-right:0}.wp-playlist-current-item .wp-playlist-item-artist,.wp-playlist-current-item .wp-playlist-item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.wp-audio-playlist .me-cannotplay span{padding:5px 15px}