/* rr-setting-journey — the PDP dressed as the builder's step 2.

   Every value below is measured on the demo's own step-2 page,
   rockrush.com/apps/ring-creator/rb-setting-details?in_journey=true&ring_stock_num=...

     Select Setting   <a>      #217346 bg, #fff text, 1px solid #217346, radius 4px, 18px/400, 176x48
     Add to Cart      <button> #fff bg, #217346 text, 1px solid #217346, radius 4px, 18px/400, 176x48
     Change Setting   <a>      #217346, 16px/500, no border
     rail             the same .rr-rs__steps chevrons the builder list page uses

   Nothing here applies unless rr-setting-journey.js has put .rr-sj on <html>, so a normal
   PDP visit is untouched. */

.rr-sj__railwrap {
  max-width: 120rem;
  margin: 0 auto 2.4rem;
  padding: 0 1.5rem;
}

@media screen and (min-width: 750px) {
  .rr-sj__railwrap { padding: 0 5rem; }
}

/* The rail markup is the settings page's, so it inherits those chevrons; it only needs
   the shadow the builder pages give their container. */
.rr-sj__steps {
  border-radius: 8px;
}

.rr-sj__back {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.6rem;
  color: #217346;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}
.rr-sj__back:hover { text-decoration: underline; }
.rr-sj__back span { font-size: 20px; line-height: 1; }

.rr-sj__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin: 0 0 1.6rem;
}

/* 176x48 with a 4px radius — the demo's exact box for both buttons. */
.rr-sj__select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 176px;
  height: 48px;
  padding: 0 1.6rem;
  box-sizing: border-box;
  background: #217346;
  border: 1px solid #217346;
  border-radius: 4px;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.rr-sj__select:hover { opacity: .92; }

/* In journey mode the demo's primary action is Select Setting and the buy button is the
   quieter outline one beside it, so restyle the theme's own submit rather than adding a
   second cart button that could drift out of step with product-form.js. */
.rr-sj .product-form__buttons .product-form__submit {
  min-width: 176px;
  height: 48px;
  padding: 0 1.6rem;
  background: #fff;
  border: 1px solid #217346;
  border-radius: 4px;
  color: #217346;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
}

/* "Buy it now" is not part of the demo's step 2 — there the only two actions are
   Select Setting and Add to Cart. */
.rr-sj .product-form__buttons .shopify-payment-button { display: none; }

@media screen and (max-width: 749px) {
  .rr-sj__actions { gap: 1.2rem; }
  .rr-sj__select,
  .rr-sj .product-form__buttons .product-form__submit { min-width: 100%; }
}