/* ═══════════════════════════════════════════════════════════════════
   Rush Hour — DTF product page design (products #4380, #161, #243)
   Theme palette: primary Blue #0067FF, hover #005EE9, headings #0F172A,
   text #364151, hairlines #D1DAE5; green #00AF37 reserved for
   free / included / success cues. Headings on Outfit / Manrope.

   - #4380 = landing takeover (no order form).
   - #161 / #243 = keep the dtf-transfer order form, append sections.
═══════════════════════════════════════════════════════════════════ */

/* ── 1. #4380 landing: break out of Astra's 2-column product layout ── */
.postid-4380 .ast-product-img-summary-wrapper{display:block !important}
.postid-4380 .woocommerce-product-gallery,
.postid-4380 .woocommerce-product-gallery__wrapper,
.postid-4380 .ast-single-product-category,
.postid-4380 .single_variation_wrap,
.postid-4380 .product_meta,
.postid-4380 .ast-sticky-add-to-cart,
.postid-4380 form.cart{display:none !important}
.postid-4380 .summary.entry-summary{
  width:100% !important;max-width:none !important;float:none !important;
  margin:0 !important;padding:0 !important
}
.postid-4380 .related.products,
.postid-4380 .up-sells.upsells,
.postid-161 .related.products,
.postid-161 .up-sells.upsells,
.postid-243 .related.products,
.postid-243 .up-sells.upsells{display:none !important}
.postid-4380 .site-content .ast-container,
.postid-161 .site-content .ast-container,
.postid-243 .site-content .ast-container{max-width:1240px}

/* ── 2. Recolor the dtf-transfer order form to the theme blue ─────── */
body.postid-161,body.postid-243,body.postid-4380{--tt-blue:#0067FF;--tt-blue-dark:#005EE9}
.postid-161 .tt-feature-icon,.postid-243 .tt-feature-icon{background:#0067FF}
.postid-161 .tt-size-tab.active,.postid-243 .tt-size-tab.active{color:#0067FF;border-bottom-color:#0067FF}

/* Hide the plugin breadcrumb + category/meta above the title */
.postid-161 .tt-breadcrumb,.postid-243 .tt-breadcrumb,
.postid-161 .product_meta,.postid-243 .product_meta{display:none !important}

/* Keep the apparel colour swatches inside the guide card (no overflow) */
.postid-161 .tt-color-selector,.postid-243 .tt-color-selector{max-width:100% !important;overflow:hidden}
.postid-161 .tt-color-swatches,.postid-243 .tt-color-swatches{flex-wrap:wrap !important;max-width:100% !important}
.postid-161 .tt-color-swatch,.postid-243 .tt-color-swatch,
.postid-161 .tt-color-swatches > *,.postid-243 .tt-color-swatches > *{flex-shrink:1}

/* Step 2 size/qty steppers: bigger, readable input + taller touch targets.
   (Plugin gives each control min-width 84px which 2× 38px buttons swallow,
   leaving the number field ~14px wide.) */
.postid-161 .tt-dimensions-controls,.postid-243 .tt-dimensions-controls{gap:12px;flex-wrap:wrap}
.postid-161 .tt-dim-control,.postid-243 .tt-dim-control{min-width:128px}
.postid-161 .tt-settings-column .tt-dim-input,
.postid-243 .tt-settings-column .tt-dim-input{
  min-width:56px !important;font-size:16px !important;min-height:46px;padding:0 8px !important
}
.postid-161 .tt-settings-column .tt-stepper-btn,
.postid-243 .tt-settings-column .tt-stepper-btn{width:42px !important;height:46px !important;font-size:20px !important}
.postid-161 .tt-settings-column .tt-dim-lock,
.postid-243 .tt-settings-column .tt-dim-lock{height:46px !important}
.postid-161 .tt-settings-column .tt-price-control .tt-price-display,
.postid-161 .tt-settings-column #tt-price-display,
.postid-161 .tt-settings-column .tt-price-total-inline,
.postid-243 .tt-settings-column .tt-price-control .tt-price-display,
.postid-243 .tt-settings-column #tt-price-display,
.postid-243 .tt-settings-column .tt-price-total-inline{height:46px !important;font-size:17px !important}
.postid-161 .tt-dim-control > label,.postid-243 .tt-dim-control > label{font-size:13px;margin-bottom:7px}

/* ── 3. Design tokens (theme palette) ─────────────────────────────── */
.rhgsb{
  --b:#0067FF;--b-dark:#005EE9;--b-tint:rgba(0,103,255,.09);
  --ok:#00AF37;--ok-dark:#008C2C;--ok-tint:rgba(0,175,55,.10);
  --ink:#0F172A;--muted:#364151;--line:#D1DAE5;--soft:#F2F7FF;--card:#fff;
  --radius:14px;
  --shadow:0 1px 2px rgba(15,23,42,.05);
  --shadow-h:0 8px 22px rgba(15,23,42,.10);
  font-family:'Manrope',system-ui,sans-serif;color:var(--muted);
  max-width:1200px;margin:0 auto;padding:8px 0 10px
}
.rhgsb *{box-sizing:border-box}
.rhgsb h1,.rhgsb h2,.rhgsb h3{font-family:'Outfit',sans-serif;color:var(--ink);letter-spacing:-.02em}

/* append-mode: separate the added sections from the order form above */
.rhgsb--append{margin-top:44px;border-top:1px solid var(--line)}
.rhgsb--append .rhgsb-sec:first-child{padding-top:48px}

/* ── 4. HERO (landing) ────────────────────────────────────────────── */
.rhgsb-hero{
  display:grid;grid-template-columns:1.05fr 1fr;gap:46px;align-items:center;
  padding:14px 0 50px;border-bottom:1px solid var(--line)
}
.rhgsb-hero-media{position:relative}
.rhgsb-hero-media img{
  width:100%;height:auto;display:block;border-radius:16px;
  border:1px solid var(--line);box-shadow:0 10px 34px rgba(15,23,42,.13)
}
.rhgsb-hero-media .rhgsb-float{
  position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(6px);
  border-radius:50px;padding:9px 16px;box-shadow:0 4px 16px rgba(15,23,42,.15);
  font-family:'Outfit',sans-serif;font-weight:800;font-size:13px;color:var(--ink)
}
.rhgsb-hero-media .rhgsb-float i{color:var(--b)}

.rhgsb-eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:'Outfit',sans-serif;
  font-weight:800;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--b);background:var(--b-tint);border-radius:50px;padding:7px 14px;margin-bottom:18px
}
.rhgsb-hero h1{font-weight:900;font-size:clamp(2rem,3.6vw,3.05rem);line-height:1.06;color:var(--ink);margin:0 0 16px}
.rhgsb-hero h1 .hl{color:var(--b)}
.rhgsb-lead{font-size:16.5px;line-height:1.7;color:var(--muted);margin:0 0 22px;max-width:520px}

.rhgsb-chips{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 24px}
.rhgsb-chip{
  display:inline-flex;align-items:center;gap:8px;font-family:'Outfit',sans-serif;
  font-weight:700;font-size:13.5px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:8px 14px
}
.rhgsb-chip i{color:var(--b);font-size:12px}

.rhgsb-value{display:flex;align-items:center;gap:14px;margin:0 0 22px;flex-wrap:wrap}
.rhgsb-price{font-family:'Outfit',sans-serif;font-weight:900;font-size:30px;color:var(--ink);line-height:1}
.rhgsb-price small{font-weight:700;font-size:14px;color:var(--muted);margin-left:4px}
.rhgsb-price .from{display:block;font-family:'Manrope',sans-serif;font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.rhgsb-freebadge{
  display:inline-flex;align-items:center;gap:7px;font-family:'Outfit',sans-serif;font-weight:800;
  font-size:12.5px;color:var(--ok-dark);background:var(--ok-tint);border-radius:8px;padding:9px 13px
}

/* primary CTA — reused in bottom band */
.rhgsb-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  width:100%;max-width:430px;cursor:pointer;border:none;
  font-family:'Outfit',sans-serif;font-weight:800;font-size:16px;letter-spacing:.3px;color:#fff;
  background:var(--b);border-radius:12px;padding:16px 26px;
  box-shadow:0 6px 18px rgba(0,103,255,.26);
  transition:background .15s ease,transform .15s ease,box-shadow .15s ease
}
.rhgsb-cta:hover{background:var(--b-dark);transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,103,255,.34);color:#fff}
.rhgsb-cta i{font-size:17px}

.rhgsb-trust{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px}
.rhgsb-trust span{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted)}
.rhgsb-trust i{color:var(--b)}

/* ── 5. Section scaffold ──────────────────────────────────────────── */
.rhgsb-sec{padding:54px 0}
.rhgsb-sec+.rhgsb-sec{border-top:1px solid var(--line)}
.rhgsb-head{text-align:center;max-width:680px;margin:0 auto 38px}
.rhgsb-kicker{font-family:'Outfit',sans-serif;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--b);margin:0 0 10px}
.rhgsb-head h2{font-weight:900;font-size:clamp(1.55rem,2.6vw,2.2rem);margin:0 0 12px}
.rhgsb-head p{font-size:15.5px;line-height:1.65;color:var(--muted);margin:0}

/* ── 6. How it works (steps) ──────────────────────────────────────── */
.rhgsb-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rhgsb-step{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 24px 26px;box-shadow:var(--shadow);
  transition:transform .2s,box-shadow .2s,border-color .2s
}
.rhgsb-step:hover{transform:translateY(-3px);box-shadow:var(--shadow-h);border-color:var(--b)}
.rhgsb-step-n{font-family:'Outfit',sans-serif;font-weight:900;font-size:13px;color:var(--b);letter-spacing:.05em}
.rhgsb-step-ic{
  width:52px;height:52px;border-radius:12px;display:grid;place-items:center;margin:12px 0 16px;
  background:var(--b-tint);color:var(--b);font-size:21px
}
.rhgsb-step h3{font-weight:800;font-size:18px;margin:0 0 8px}
.rhgsb-step p{font-size:14.5px;line-height:1.65;color:var(--muted);margin:0}
.rhgsb-step-arrow{
  position:absolute;right:-22px;top:50%;transform:translateY(-50%);z-index:2;
  width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--b);font-size:12px
}
.rhgsb-steps .rhgsb-step:last-child .rhgsb-step-arrow{display:none}

/* ── 7. Why (feature grid) ────────────────────────────────────────── */
.rhgsb-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rhgsb-feat-item{
  display:flex;gap:14px;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  box-shadow:var(--shadow);transition:box-shadow .2s,border-color .2s
}
.rhgsb-feat-item:hover{box-shadow:var(--shadow-h);border-color:var(--b)}
.rhgsb-feat-item i{
  flex:none;width:38px;height:38px;border-radius:9px;display:grid;place-items:center;
  background:var(--b);color:#fff;font-size:15px
}
.rhgsb-feat-item h3{font-weight:800;font-size:15.5px;margin:2px 0 5px}
.rhgsb-feat-item p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0}

/* ── 8. Perfect for (chips) ───────────────────────────────────────── */
.rhgsb-tags{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;max-width:880px;margin:0 auto}
.rhgsb-tag{
  display:inline-flex;align-items:center;gap:9px;font-family:'Outfit',sans-serif;font-weight:700;
  font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:50px;padding:11px 18px;transition:border-color .2s,color .2s,box-shadow .2s
}
.rhgsb-tag:hover{border-color:var(--b);color:var(--b);box-shadow:var(--shadow)}
.rhgsb-tag i{color:var(--b);font-size:13px}
.rhgsb-note{text-align:center;font-family:'Outfit',sans-serif;font-weight:800;font-size:15px;color:var(--ink);margin:26px 0 0}
.rhgsb-note span{color:var(--b)}

/* ── 9. Details accordion (native <details>) ──────────────────────── */
.rhgsb-acc{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.rhgsb-acc details{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);transition:border-color .2s
}
.rhgsb-acc details[open]{border-color:var(--b)}
.rhgsb-acc summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;
  padding:17px 20px;font-family:'Outfit',sans-serif;font-weight:700;font-size:15.5px;color:var(--ink)
}
.rhgsb-acc summary::-webkit-details-marker{display:none}
.rhgsb-acc summary .ic{
  flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--b-tint);color:var(--b);font-size:13px
}
.rhgsb-acc summary .tx{flex:1}
.rhgsb-acc summary .ch{margin-left:auto;color:var(--muted);font-size:13px;transition:transform .2s}
.rhgsb-acc details[open] summary .ch{transform:rotate(180deg)}
.rhgsb-acc .rhgsb-acc-body{padding:2px 20px 20px 68px;font-size:14px;line-height:1.75;color:var(--muted)}
.rhgsb-acc .rhgsb-acc-body p{margin:0 0 10px}
.rhgsb-acc .rhgsb-acc-body ul{margin:0 0 10px 18px;padding:0}
.rhgsb-acc .rhgsb-acc-body li{margin:0 0 5px}
.rhgsb-acc .rhgsb-acc-body strong{color:var(--ink)}

/* ── 10. Bottom CTA band ──────────────────────────────────────────── */
.rhgsb-band{
  margin:8px 0 6px;text-align:center;color:#fff;border-radius:18px;
  padding:52px 28px;background:linear-gradient(135deg,#0067FF,#005EE9);position:relative;overflow:hidden
}
.rhgsb-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(680px 280px at 50% -40%,rgba(255,255,255,.22),transparent 70%)
}
.rhgsb-band>*{position:relative}
.rhgsb-band h2{color:#fff;font-weight:900;font-size:clamp(1.6rem,2.8vw,2.3rem);margin:0 0 12px}
.rhgsb-band p{color:rgba(255,255,255,.88);font-size:16px;margin:0 auto 26px;max-width:560px;line-height:1.6}
.rhgsb-band .rhgsb-cta{margin:0 auto;max-width:380px;background:#fff;color:var(--b);box-shadow:0 8px 24px rgba(15,23,42,.20)}
.rhgsb-band .rhgsb-cta:hover{background:#eef3ff;color:var(--b-dark)}
.rhgsb-band-alt{display:inline-block;margin-top:16px;font-family:'Outfit',sans-serif;font-weight:700;font-size:14px;color:rgba(255,255,255,.9);text-decoration:none}
.rhgsb-band-alt:hover{color:#fff}
.rhgsb-band-alt i{margin-right:7px}

/* ── 11. Responsive ───────────────────────────────────────────────── */
@media(max-width:900px){
  .rhgsb-hero{grid-template-columns:1fr;gap:30px;padding-bottom:38px}
  .rhgsb-hero-media{order:-1}
  .rhgsb-cta{max-width:none}
  .rhgsb-steps{grid-template-columns:1fr}
  .rhgsb-step-arrow{display:none !important}
  .rhgsb-feat{grid-template-columns:1fr}
  .rhgsb-acc .rhgsb-acc-body{padding-left:20px}
}
@media(max-width:600px){
  .rhgsb-sec{padding:40px 0}
  .rhgsb-trust{gap:12px}
}