/* =========================================
   RD HS Wizard — Base layout / Step 1
   ========================================= */

.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;
}

/* Step 1 summary line */
#rd-hsww-summary,
.rd-hsww-summary {
    margin: 0.5rem 0 1rem;
    color: #ffffff;
    font-size: 16px;
}

/* Generic empty / info state */
.rd-hsww-empty {
    padding: 12px 14px;
    background: #fff8e1;
    border: 1px solid #f1d16b;
    border-radius: 8px;
    color: #333;
}

/* =========================================
   Step 2 — Material cards
   ========================================= */

.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;
    box-sizing: border-box;

    /* 🔹 Normalised card sizing */
    max-width: 260px;
    flex: 0 0 260px;      /* fixed card width in flex containers */
    width: auto;          /* don’t force full width */
}


/* Card header: name + USP */
.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;
}

/* Card media */
.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;
}

/* Card body: specs list */
.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;
}

/* Card footer: price + CTA */
.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;
}

/* =========================================
   CTA buttons — materials, colours, splices
   ========================================= */

.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);
}

/* =========================================
   Step 3 — Colour cards
   (reuse rd-hsww-card, with minor tweaks)
   ========================================= */

/* Colours grid wrapper */
.rd-hsww-colours {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
}

/* Colour cards use the same base card layout */
.rd-hsww-card.rd-hsww-card--colour .rd-hsww-header {
    margin-top: 4px;
    margin-bottom: 8px;
}

/* Letterbox colour image */
.rd-hsww-card.rd-hsww-card--colour .rd-hsww-media img {
    width: 100%;
    height: 70px;
    object-fit: cover;
    display: block;
    border-radius: 4px;
}

/* Splice cards: use natural image height, no letterboxing */
.rd-hsww-card.rd-splice-card .rd-hsww-media img {
    width: 100%;
    height: auto;        /* override the 70px */
    object-fit: contain; /* show full splice image */
}

/* Summary material cards: letterboxed thumbnail */
.rd-hsww-card.rd-hsww-summary-card--material .rd-hsww-media img {
    width: 100%;
    height: 70px;      /* or whatever matches your colour cards */
    object-fit: cover; /* crop to fit the strip */
}

/* Summary splice cards: letterboxed thumbnail */
.rd-hsww-summary-card.rd-splice-card .rd-hsww-media img {
    width: 100%;
    height: 70px;      /* or whatever matches your colour cards */
    object-fit: cover; /* crop to fit the strip */
}

/* Summary stack layout */
.rd-hsww-summary-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 10px 0 16px;
}

/* Reset base card width inside summary */
.rd-hsww-summary-stack .rd-hsww-summary-card {
    max-width: none;
    width: auto;
}

/* Top row: Boat & Line, Material, Colour (3 columns) */
.rd-hsww-summary-card--boat,
.rd-hsww-summary-card--material,
.rd-hsww-summary-card--colour {
    flex: 1 1 calc(33.333% - 11px); /* 3 per row with gap */
}

/* Second row: Working / Tail splices (2 columns) */
.rd-hsww-summary-card--splice-working,
.rd-hsww-summary-card--splice-tail {
    flex: 1 1 calc(50% - 8px); /* 2 per row */
}

@media (max-width: 768px) {
    .rd-hsww-summary-stack .rd-hsww-summary-card {
        flex: 1 1 100%;
    }
}



/* No extra body content for colours, footer is just CTA */
.rd-hsww-card.rd-hsww-card--colour .rd-hsww-body {
    padding: 0;
}

/* OOS badge + dimmed colours */
.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%);
}

/* =========================================
   Splices step (Step 4) — layout + styling
   ========================================= */

.rd-splices {
    margin-top: 24px;
    color: #ffffff;
}

/* Splice form container */
.rd-splices form.rd-splices-form {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Splice fields span full width on desktop too */
.rd-splices form.rd-splices-form .rd-field {
    box-sizing: border-box;
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 16px;
}


/* Splice field titles */
.rd-splices .rd-field-title {
    display: block;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px;
    color: #ffffff;
    text-align: left;
}

/* Splice selects (match Step 1 selects) */
.rd-splices select {
    width: 100%;
    font-size: 14px;
    padding: 6px 8px;
    border-radius: 2px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Splices "Add to cart" CTA — reuse RopeDock pill, left aligned */
.rd-splices form.rd-splices-form button[type="submit"] {
    display: none;          /* 🔥 hidden until tail splice is picked */
    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);
}

/* =========================================
   Mobile tweaks
   ========================================= */

@media (max-width: 768px) {
    /* Step 1 grid stacks a bit nicer */
    .rd-hsww .rd-hsww-grid {
        grid-template-columns: 1fr;
    }

    /* Splices: stack fields vertically */
    .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;
    }
}


/* Hide Step 1 once we move into Step 2+ */
.rd-hsww-step1.rd-hsww-step1-hidden {
    display: none;
}

/* Step 2 heading layout */

.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;
}

/* Back button styling */
.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);
}

/* Top bar with "Change boat & line" */
.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-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);
}

/* hide the raw <select> dropdowns */
.rd-splices select {
  display: none;
}

/* Lightbox */
.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;
}

/* Highlight selected splice card */
.rd-splice-card.is-selected {
    box-shadow: 0 0 0 2px rgba(255,255,255,0.7);
}

/* Make "Choose This Splice" full-width like other CTAs if you want */
.rd-splice-card .rd-hsww-actions .button {
    width: 100%;
}

/* Hide old topbar button now that Boat & Line has its own CTA */
.rd-hsww-topbar {
    display: none;
}

/* =========================================
   Summary stack — compact cards, wrapping
   ========================================= */

.rd-hsww-summary-stack {
    margin: 8px 0 16px;
    display: flex;
    flex-direction: row;   /* ⬅ row instead of column */
    flex-wrap: wrap;       /* ⬅ allow multiple rows */
    align-items: stretch;   /* 🔹 equal heights per row */
    gap: 12px;
}

/* Keep summary cards at normal card width (no stretching) */
.rd-hsww-summary-stack .rd-hsww-summary-card {
    flex: 0 0 auto;        /* use .rd-hsww-card’s intrinsic width */
}

/* Splice card grid – left aligned like material/colour cards */
.rd-splice-card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    align-items: stretch !important;   /* 🔥 force equal height */
    gap: 16px;
    margin-top: 0.75rem;
}



/* Summary cards – remove grey footer line so they align nicely */
.rd-hsww-summary-stack .rd-hsww-summary-card .rd-hsww-footer {
    border-top: none;
    padding-top: 6px; /* a bit of breathing room above the button */
}

/* =========================================
   Mobile summary cards – compact layout
   ========================================= */
@media (max-width: 768px) {

  /* Stack summary cards vertically, tighter spacing */
  .rd-hsww-summary-stack {
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    margin-bottom: 12px;
  }

  /* Make summary cards full-width & slightly slimmer */
  .rd-hsww-summary-stack .rd-hsww-summary-card {
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
    padding: 8px 10px;
  }

  /* Slightly smaller title + body copy */
  .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;
  }

  /* Tighter footer so buttons don’t float too low */
  .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%;          /* nice big thumb target */
    font-size: 13px;
    padding: 7px 10px;
  }
}




/* === Normalise card grids for material, colour and splices === */

/* Make all three grids left-aligned */
.rd-hsww-cards,
.rd-hsww-colours,
.rd-splice-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: flex-start;
}