.rd-hsww .rd-hsww-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin-bottom: 8px;
}
.rd-hsww label {
display: block;
color: #ffffff;
font-weight: 600;
font-size: 15px;
margin-bottom: 4px;
}
.rd-hsww select {
width: 100%;
font-size: 14px;
padding: 6px 8px;
border-radius: 2px;
border: 1px solid #ccc;
box-sizing: border-box;
} #rd-hsww-summary,
.rd-hsww-summary {
margin: 0.5rem 0 1rem;
color: #ffffff;
font-size: 16px;
} .rd-hsww-empty {
padding: 12px 14px;
background: #fff8e1;
border: 1px solid #f1d16b;
border-radius: 8px;
color: #333;
} .rd-hsww-cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 10px;
}
.rd-hsww-card {
background: #ffffff;
color: #111111;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 10px 12px;
display: flex;
flex-direction: column;
width: 100%;
max-width: 260px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
box-sizing: border-box;
} .rd-hsww-card .rd-hsww-header {
margin-bottom: 6px;
}
.rd-hsww-card .rd-hsww-header h4 {
font-size: 15px;
margin: 0 0 2px;
color: #111111;
}
.rd-hsww-card .rd-hsww-usp {
margin: 0;
color: #444;
font-style: italic;
font-size: 13px;
} .rd-hsww-card .rd-hsww-media {
margin-bottom: 8px;
}
.rd-hsww-card .rd-hsww-media img {
max-width: 100%;
width: 100%;
height: auto;
display: block;
border-radius: 4px;
} .rd-hsww-card .rd-hsww-body {
padding: 0;
}
.rd-hsww-card .rd-hsww-specs {
margin: 0;
padding-left: 18px;
list-style: disc;
font-size: 13px;
}
.rd-hsww-card .rd-hsww-specs li {
margin-bottom: 3px;
} .rd-hsww-card .rd-hsww-footer {
padding-top: 10px;
border-top: 1px solid #eee;
display: flex;
flex-direction: column;
gap: 8px;
margin-top: auto;
}
.rd-hsww-card .rd-hsww-price {
font-size: 13px;
line-height: 1.3;
text-align: left;
}
.rd-hsww-card .rd-hsww-price .total {
font-weight: 600;
display: block;
} .rd-hsww-card .rd-hsww-actions {
text-align: center;
}
.rd-hsww-card .rd-hsww-actions .button,
.rd-hsww-card .rd-hsww-actions .button-primary {
display: inline-block;
margin: 0 auto;
text-align: center;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 8px 14px;
border-radius: 999px;
background: #ffffff;
border: none;
color: #1B3039;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
font-size: 13px;
}
.rd-hsww-card .rd-hsww-actions .button:hover,
.rd-hsww-card .rd-hsww-actions .button-primary:hover {
background: #991A1E;
color: #ffffff;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
.rd-hsww-card .rd-hsww-actions .button:active,
.rd-hsww-card .rd-hsww-actions .button-primary:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}  .rd-hsww-colours {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 10px;
} .rd-hsww-card.rd-hsww-card--colour .rd-hsww-header {
margin-top: 4px;
margin-bottom: 8px;
} .rd-hsww-card.rd-hsww-card--colour .rd-hsww-media img {
width: 100%;
height: 70px;
object-fit: cover;
display: block;
border-radius: 4px;
} .rd-hsww-card.rd-splice-card .rd-hsww-media img {
width: 100%;
height: auto; object-fit: contain; } .rd-hsww-card.rd-hsww-summary-card--material .rd-hsww-media img {
width: 100%;
height: 70px; object-fit: cover; } .rd-hsww-summary-card.rd-splice-card .rd-hsww-media img {
width: 100%;
height: 70px; object-fit: cover; } .rd-hsww-summary-stack {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin: 10px 0 16px;
} .rd-hsww-summary-stack .rd-hsww-summary-card {
max-width: none;
width: auto;
} .rd-hsww-summary-card--boat,
.rd-hsww-summary-card--material,
.rd-hsww-summary-card--colour {
flex: 1 1 calc(33.333% - 11px); } .rd-hsww-summary-card--splice-working,
.rd-hsww-summary-card--splice-tail {
flex: 1 1 calc(50% - 8px); }
@media (max-width: 768px) {
.rd-hsww-summary-stack .rd-hsww-summary-card {
flex: 1 1 100%;
}
} .rd-hsww-card.rd-hsww-card--colour .rd-hsww-body {
padding: 0;
} .rd-hsww .rd-hsww-oos-badge {
display: inline-block;
background: #fbe9e7;
border: 1px solid #ff8a65;
border-radius: 6px;
padding: 6px 10px;
font-weight: 600;
font-size: 12px;
color: #1B3039;
}
.rd-hsww-card.rd-hsww-card--colour.rd-hsww-oos {
opacity: 0.6;
filter: grayscale(100%);
} .rd-splices {
margin-top: 24px;
color: #ffffff;
} .rd-splices form.rd-splices-form {
display: flex;
flex-wrap: wrap;
gap: 16px;
} .rd-splices form.rd-splices-form .rd-field {
box-sizing: border-box;
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 16px;
} .rd-splices .rd-field-title {
display: block;
font-weight: 600;
font-size: 16px;
margin-bottom: 4px;
color: #ffffff;
text-align: left;
} .rd-splices select {
width: 100%;
font-size: 14px;
padding: 6px 8px;
border-radius: 2px;
border: 1px solid #ccc;
box-sizing: border-box;
} .rd-splices form.rd-splices-form button[type="submit"] {
display: none; align-self: flex-start;
margin-top: 12px;
text-align: center;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 8px 14px;
border-radius: 999px;
background: #ffffff;
border: none;
color: #1B3039;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
font-size: 13px;
}
.rd-splices form.rd-splices-form button[type="submit"]:hover {
background: #991A1E;
color: #ffffff;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
.rd-splices form.rd-splices-form button[type="submit"]:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
} @media (max-width: 768px) { .rd-hsww .rd-hsww-grid {
grid-template-columns: 1fr;
} .rd-hsww-card {
max-width: 100%;
} .rd-splices form.rd-splices-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.rd-splices form.rd-splices-form .rd-field {
flex: 0 0 auto;
max-width: 100%;
width: 100%;
margin-bottom: 0;
}
.rd-splices form.rd-splices-form button[type="submit"] {
margin-top: 8px;
}
} .rd-hsww-step1.rd-hsww-step1-hidden {
display: none;
} .rd-hsww-step2-inner h3 {
margin: 12px 0;
color: #ffffff;
text-align: left;
}
.rd-hsww-step2-inner .rd-hsww-step-heading h3 {
margin: 0;
color: #ffffff;
} .rd-hsww-back-step1 {
background: transparent;
border: 1px solid rgba(255,255,255,0.5);
border-radius: 999px;
padding: 4px 10px;
color: #ffffff;
font-size: 13px;
cursor: pointer;
}
.rd-hsww-back-step1:hover {
background: rgba(255,255,255,0.08);
} .rd-hsww-topbar {
display: flex;
justify-content: flex-start;
margin-bottom: 8px;
}
.rd-hsww-back-step1 {
background: transparent;
border: 1px solid rgba(255,255,255,0.5);
border-radius: 999px;
padding: 4px 10px;
color: #ffffff;
font-size: 13px;
cursor: pointer;
}
.rd-hsww-back-step1:hover {
background: rgba(255,255,255,0.08);
}
.rd-hsww-step1.rd-hsww-step1-hidden {
display: none;
}
.rd-splice-card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 0.75rem;
background: #fff;
cursor: pointer;
text-align: left;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.rd-splice-card-img img {
max-width: 100%;
height: auto;
display: block;
}
.rd-splice-card.is-selected {
border-color: #0073aa;
box-shadow: 0 0 0 2px rgba(0,115,170,0.2);
}
.rd-splice-card-label {
display: block;
margin-bottom: 0.25rem;
} .rd-splices select {
display: none;
}
.rd-splice-card.rd-hsww-colour-card {
padding: 1rem;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.rd-splice-card-img img {
max-width: 100%;
height: auto;
display: block;
}
.rd-splice-card-footer {
margin-top: 0.75rem;
}
.rd-splice-card-label {
display: block;
margin-bottom: 0.25rem;
}
.rd-splice-card.is-selected {
box-shadow: 0 0 0 2px rgba(255,255,255,0.6);
} .rd-splices select {
display: none;
} .rd-splice-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
}
.rd-splice-lightbox-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.7);
}
.rd-splice-lightbox-inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 90vw;
max-height: 90vh;
}
.rd-splice-lightbox-inner img {
max-width: 100%;
max-height: 100%;
display: block;
} .rd-splice-card.is-selected {
box-shadow: 0 0 0 2px rgba(255,255,255,0.7);
} .rd-splice-card .rd-hsww-actions .button {
width: 100%;
} .rd-hsww-topbar {
display: none;
} .rd-hsww-summary-stack {
margin: 8px 0 16px;
display: flex;
flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 12px;
} .rd-hsww-summary-stack .rd-hsww-summary-card {
flex: 0 0 auto; } .rd-splice-card-grid {
display: flex;
flex-wrap: wrap;
justify-content: flex-start !important;
align-items: stretch !important; gap: 16px;
margin-top: 0.75rem;
} .rd-splice-card {
max-width: 260px;
width: 100%;
} .rd-hsww-summary-stack .rd-hsww-summary-card .rd-hsww-footer {
border-top: none;
padding-top: 6px; } @media (max-width: 768px) { .rd-hsww-summary-stack {
flex-direction: column;
gap: 8px;
margin-top: 4px;
margin-bottom: 12px;
} .rd-hsww-summary-stack .rd-hsww-summary-card {
flex: 1 1 auto;
max-width: 100%;
width: 100%;
padding: 8px 10px;
} .rd-hsww-summary-stack .rd-hsww-header h4 {
font-size: 14px;
}
.rd-hsww-summary-stack .rd-hsww-body,
.rd-hsww-summary-stack .rd-hsww-body p {
font-size: 13px;
line-height: 1.3;
margin: 0;
} .rd-hsww-summary-stack .rd-hsww-footer {
padding-top: 6px;
}
.rd-hsww-summary-stack .rd-hsww-actions .button,
.rd-hsww-summary-stack .rd-hsww-actions .button-primary {
width: 100%; font-size: 13px;
padding: 7px 10px;
}
}form.product-search-form input.product-search-field,form.product-search-form input.product-filter-field{box-sizing:border-box;padding:calc(.667em+2px);border-radius:.25rem;border:1px solid #949494}div.product-search-results div.product-search-results-content{box-sizing:border-box}div.product-search-results div.wps_add_to_cart a.add_to_cart_button,div.product-search-results div.wps_add_to_cart>a.button{box-sizing:border-box;display:inline-block}div.product-search-form span.product-search-field-clear{left:unset;right:unset;top:unset;bottom:unset;padding:0;margin:0;height:auto;position:absolute;transform:translate(-150%,-50%);top:50%}.product-search-filter-extras input[type="checkbox"].product-search-filter-extra{margin:0 1px;vertical-align:middle}.product-search-filter-extras a.product-search-filter-extra{margin:0 4px;vertical-align:middle}input[type="text"].product-search-filter-price-field{border-radius:.25rem;border:1px solid #949494;padding:calc(.667em+2px)}form.product-search-filter-price-form div.product-search-filter-price-slider{font-size:18px}.product-search-filter-items div.selectize-input{border-radius:.25rem;border:1px solid #949494;box-shadow:none}