/** Shopify CDN: Minification failed

Line 434:13 Unexpected "("
Line 613:0 Expected ")" to go with "("

**/
/* =========================================================
   RRA THEME CSS (unified buttons + layout polish)
   ========================================================= */

/* ---- Brand tokens ---- */
:root{
  --brand: #39b1af;          /* dark turquoise (hover/active) */
  --brand-light: #eaf7f6;    /* light turquoise (default)    */
  --ink: #0b1f1a;            /* near-black text              */
  --line: rgba(0,0,0,.08);   /* subtle borders               */
}

/* Also align Dawn color-scheme tokens (many components use these) */
:root,
[class*="color-"]{
  --color-button: 57,177,175;              /* rgb of #39b1af   */
  --color-button-text: 255,255,255;        /* white            */
  --color-secondary-button: 234,247,246;   /* rgb of #eaf7f6   */
  --color-secondary-button-text: 11,31,26; /* rgb of --ink     */
}

/* ---- Global layout fixes ---- */
html,body{height:100%;overflow-x:clip}
body{
  min-height:100dvh;
  display:grid;
  grid-template-rows:auto 1fr auto !important;
  margin:0;
}

/* Keep space below header */
#rra-header + main{padding-top:18px}

/* Normalize widths across header/content/footer */
:root{--rra-max:1180px;--rra-gutter:14px}
#rra-header .wrap,
#rra-footer .wrap,
#MainContent>.shopify-section>.page-width,
#MainContent>.shopify-section>.wrap,
.content-for-layout .page-width{
  max-width:var(--rra-max);
  margin:0 auto;
  padding-left:var(--rra-gutter);
  padding-right:var(--rra-gutter);
}

/* =========================================================
   HEADER / FOOTER polish
   ========================================================= */
.header{border-bottom:1px solid var(--line)!important}
#rra-header .wrap{display:flex;align-items:center;gap:14px;padding:10px 14px}
#rra-header nav{display:flex;flex-wrap:wrap;gap:10px}
#rra-header nav a{padding:8px 10px;border-radius:12px;line-height:1;white-space:nowrap}
#rra-header nav a:hover{background:rgba(57,177,175,.09)}
#rra-header .cta{padding:9px 14px;border-radius:9999px;font-weight:600}

#rra-footer{background:#f6fbfb}
#rra-footer .grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:22px}
#rra-footer .legal{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
@media (max-width:980px){#rra-footer .grid{grid-template-columns:1fr}}

/* =========================================================
   HOME (namespaced to #rraHome / .rra-home)
   ========================================================= */
:root{--page-width:144rem}
.page-width{max-width:1440px!important}
#rraHome,.rra-home{--wrap:1440px}
#rraHome .wrap,.rra-home .row{max-width:var(--wrap);margin:0 auto;padding:clamp(12px,2.2vw,24px)}
#rraHome h1{font-size:clamp(28px,3.2vw,44px);letter-spacing:-.02em;margin:8px 0 6px}
#rraHome .hero{padding-bottom:8px}
#rraHome .pills{margin:10px 0 6px}
#rraHome .cta-row{margin-top:8px}
#rraHome .small{font-size:14px;opacity:.85}
#rraHome{padding-bottom:8px;margin-top:0;margin-bottom:8px}
#rraHome .wrap{padding-bottom:8px}
#rraHome section+section{margin-top:14px}
#rraHome .row,.rra-home .row{padding:16px 0}
#rraHome .row:first-child,.rra-home .row:first-child{padding-bottom:8px}

/* Pills container */
#rraHome .pills,.rra-home .pills{
  display:flex;gap:8px;align-items:center;flex-wrap:wrap;max-width:100%;
  scrollbar-width:none
}
#rraHome .pills::-webkit-scrollbar,.rra-home .pills::-webkit-scrollbar{display:none}
@media (min-width:990px){#rraHome .pills,.rra-home .pills{flex-wrap:nowrap}}

/* Card grids */
#rraHome .list,.rra-home .list{
  display:grid;gap:16px;grid-template-columns:repeat(4,minmax(260px,1fr));grid-auto-rows:1fr;margin:10px 0 18px
}
#rraHome .list>.card,.rra-home .list>.card{
  grid-column:span 4;min-height:180px;display:flex;flex-direction:column;height:100%;background:#fff;
  transition:background .15s ease,transform .15s ease
}
@media (max-width:1000px){#rraHome .list>.card{grid-column:span 6}}
@media (max-width:640px){#rraHome .list>.card{grid-column:span 12}}

.rra-home .rra-cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.rra-home .rra-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.04);padding:14px;min-width:260px;
  transition:background .15s ease,transform .15s ease
}
.rra-home .rra-card .body{flex:1}

@media (min-width:1000px){
  .rra-row{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(240px,1fr))}
  #rraHome .grid .col-9>.list{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
  #rraHome .grid .col-9>.list>.card{grid-column:span 3!important}
  #rraHome section .list>.card{grid-column:span 3!important}
}
.rra-home .grid,#rraHome .grid{align-items:stretch}
.rra-home .grid .card,#rraHome .grid .card{height:100%;display:flex;flex-direction:column}
#rraHome .grid>.col-6 .card,.rra-home .grid>.col-6 .card{
  position:relative;overflow:visible;padding-top:28px;margin-top:28px;height:100%;display:flex;flex-direction:column
}

/* Card hover */
#rraHome .list a.card:hover,
.rra-home .list a.card:hover,
.rra-home .rra-card:hover{
  background:var(--brand)!important;color:#fff!important;transform:translateY(-2px)
}
#rraHome .list a.card:hover p,
.rra-home .list a.card:hover p,
.rra-home .rra-card:hover p{color:#fff!important}
#rraHome .list a.card:active,
.rra-home .list a.card:active,
.rra-home .rra-card:active{transform:translateY(2px)!important}

/* =========================================================
   GLOBAL BUTTON / PILL / DROPDOWN / ACCORDION SYSTEM
   (light turquoise default → dark turquoise on hover)
   ========================================================= */

/* Base pill (your small chips) */
.pill{
  background:var(--brand-light);
  color:var(--ink);
  border:1px solid var(--brand);
  border-radius:999px;
  padding:6px 12px;
  font-size:13px;
  line-height:1.2;
  text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem;
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s;
  box-shadow:0 1px 2px rgba(0,0,0,.04)
}
.pill:hover,.pill:focus-visible{
  background:var(--brand)!important;color:#fff!important;border-color:var(--brand);box-shadow:0 2px 6px rgba(0,0,0,.08);outline:none
}

/* Unify ALL buttons/toggles across Dawn + custom */
:where(
  .button, button, [type="button"], [type="submit"],
  .btn, a.btn,
  .acc-btn, summary.acc-btn,                 /* your accordions */
  .accordion__title, .collapsible-trigger,   /* Dawn accordions/collapsibles */
  .disclosure__button, .dropdown__toggle,    /* Dawn disclosures/dropdowns   */
  .facets__button,                           /* filter buttons (Dawn)        */
  .shopify-payment-button__button--unbranded,
  .product-form__submit,
  .cart__checkout-button
){
  background:var(--brand-light);
  color:var(--ink);
  border:1px solid var(--brand);
  border-radius:999px;
  padding:.55rem .95rem;
  line-height:1.2;
  text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem;
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s;
  box-shadow:0 1px 2px rgba(0,0,0,.04)
}

/* Hover / focus / expanded states */
:where(
  .button, button, [type="button"], [type="submit"],
  .btn, a.btn,
  .acc-btn, summary.acc-btn,
  .accordion__title, .collapsible-trigger, .disclosure__button, .dropdown__toggle,
  .facets__button,
  .shopify-payment-button__button--unbranded,
  .product-form__submit,
  .cart__checkout-button
):is(:hover,:focus-visible),
:where(.acc-btn,summary.acc-btn,[aria-expanded])[aria-expanded="true"]{
  background:var(--brand)!important;
  color:#fff!important;
  border-color:var(--brand)!important;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  outline:none
}

/* Inner text/icons flip to white too */
:where(
  .btn, .pill, .acc-btn, summary.acc-btn,
  .accordion__title, .collapsible-trigger, .disclosure__button, .dropdown__toggle,
  .facets__button,
  .shopify-payment-button__button--unbranded,
  .product-form__submit,
  .cart__checkout-button
):is(:hover,:focus-visible,[aria-expanded="true"]) *{color:#fff!important}

/* Disabled */
:where(.button,button,[type="submit"],.btn)[disabled],
:where(.button,button,[type="submit"],.btn).disabled{
  opacity:.55;cursor:not-allowed;background:var(--brand-light);color:var(--ink);border-color:var(--brand);box-shadow:none
}

/* Dawn named variants kept in family */
.button--primary{background:rgb(var(--color-button))!important;color:rgb(var(--color-button-text))!important;border-color:rgb(var(--color-button))!important}
.button--secondary{background:rgb(var(--color-secondary-button))!important;color:rgb(var(--color-secondary-button-text))!important;border-color:rgb(var(--color-button))!important}
.button--secondary:is(:hover,:focus-visible){background:rgb(var(--color-button))!important;color:#fff!important}

/* Remove underline on link-style buttons */
a.btn, a.button{text-decoration:none}

/* =========================================================
   Misc.
   ========================================================= */
#MainContent .rra-panel,#MainContent .card,#MainContent .box{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;
  box-shadow:0 1px 0 rgba(16,24,40,.04)
}
/* ==== RRA: Global dropdown (accordion) rows ====
   Light turquoise by default → dark turquoise on hover/open
   Targets native <summary> and Dawn collapsible triggers
=================================================== */

/* Base */
#MainContent details > summary,
#MainContent .collapsible-trigger{
  appearance: none;
  background: var(--brand-light) !important;   /* light turquoise */
  color: var(--ink) !important;                /* black text      */
  border: 1px solid var(--brand) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  line-height: 1.25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  text-decoration: none;
}

/* Hover / focus-visible / OPEN state */
#MainContent details > summary:is(:hover, :focus-visible),
#MainContent details[open] > summary,
#MainContent .collapsible-trigger:is(:hover, :focus-visible),
#MainContent .collapsible-trigger[aria-expanded="true"]{
  background: var(--brand) !important;         /* dark turquoise  */
  color: #fff !important;                       /* white text      */
  border-color: var(--brand) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  outline: none;
}

/* Make inner icons/text flip too */
#MainContent details > summary *,
#MainContent .collapsible-trigger *{
  color: inherit !important;
}
#MainContent details > summary svg,
#MainContent .collapsible-trigger svg{
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Optional: keep the panel body clean */
#MainContent details{
  border-radius: 12px;
}
#MainContent details[open]{
  background: transparent;
}
/* ==== RRA: Accordion/Dropdown rows (global) ====
   Default = light turquoise + dark text
   Hover / Open = dark turquoise + white text
================================================== */

:root{
  --brand:#39b1af;          /* dark turquoise */
  --brand-light:#eaf7f6;    /* light turquoise */
  --ink:#0b1f1a;            /* black-ish text */
}

/* TARGET all common patterns: native <details>, Dawn accordions/collapsibles */
#MainContent :is(details, .accordion, .collapsible-content)
  > :is(summary, .accordion__title, .collapsible-trigger){
  background: var(--brand-light) !important;
  color: var(--ink) !important;
  border: 1px solid var(--brand) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  line-height: 1.25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

/* HOVER / FOCUS / OPENED */
#MainContent :is(details[open], .accordion[open])
  > :is(summary, .accordion__title, .collapsible-trigger),
#MainContent :is(details, .accordion, .collapsible-content)
  > :is(summary, .accordion__title, .collapsible-trigger):is(:hover, :focus-visible){
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  outline: none;
}

/* Ensure icons/text inside the header follow the color flip */
#MainContent :is(details, .accordion, .collapsible-content)
  > :is(summary, .accordion__title, .collapsible-trigger) *{
  color: inherit !important;
}
#MainContent :is(details, .accordion, .collapsible-content)
  > :is(summary, .accordion__title, .collapsible-trigger) svg{
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* Optional: keep the body clean and rounded when open */
#MainContent details{ border-radius:12px; }
#MainContent details[open]{ background: transparent; }

/* ==== RRA: Packet step headers (Start My Packet accordions) ====
   Default = light turquoise + dark text
   Hover/Open = dark turquoise + white text
================================================================= */

/* Base — target native <summary> AND button toggles with aria-controls */
#MainContent :is(
  summary,
  button[aria-controls],
  [role="button"][aria-controls]
){
  background: var(--brand-light) !important;   /* light turquoise */
  color: var(--ink) !important;                /* dark text       */
  border: 1px solid var(--brand) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  line-height: 1.25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

/* Hover / focus-visible / OPEN state */
#MainContent :is(
  summary,
  button[aria-controls],
  [role="button"][aria-controls]
):is(:hover, :focus-visible),
#MainContent details[open] > summary,
#MainContent :is(button[aria-controls],[role="button"][aria-controls])[aria-expanded="true"]{
  background: var(--brand) !important;         /* dark turquoise  */
  color: #fff !important;                       /* white text      */
  border-color: var(--brand) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  outline: none;
}

/* Ensure any icons/text inside the header flip with the state */
#MainContent :is(
  summary,
  button[aria-controls],
  [role="button"][aria-controls]
) *{
  color: inherit !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
/* ==== RRA — UNIVERSAL ACCORDION / DROPDOWN ROWS (FINAL) ====
   Default = light turquoise + dark text
   Hover/Focus/Open = dark turquoise + white text
   Works for: <summary>, button[aria-controls], role="button"[aria-controls],
   Dawn .accordion/.collapsible, and custom “step” wrappers with aria-expanded.
================================================================ */

/* 1) The toggle/header itself (handles most cases) */
#MainContent :is(
  summary,
  button[aria-controls],
  [role="button"][aria-controls],
  .accordion__title,
  .accordion__button,
  .collapsible-trigger,
  .disclosure__button,
  .dropdown__toggle,
  .rra-step__toggle,
  .rra-accordion__header
){
  background: var(--brand-light) !important;
  color: var(--ink) !important;
  border: 1px solid var(--brand) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  line-height: 1.25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  text-decoration: none;
}

/* 2) Hover / focus / open WHEN THE ATTRIBUTE IS ON THE TOGGLE */
#MainContent :is(
  summary,
  button[ari]()
/* === RRA: make ALL accordion/step rows turquoise by default === */
/* Works for Start-My-Packet wizard + other accordions site-wide */

/* 1) Row container gets the background/border */
#MainContent :is(.rra-step, .rra-accordion, .accordion, details){
  background: var(--brand-light) !important;     /* light turquoise */
  border: 1px solid var(--brand) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

/* 2) Kill inner white backgrounds so the container color shows through */
#MainContent :is(
  .rra-step__head,
  .rra-step__toggle,
  .rra-accordion__header,
  .accordion__header,
  .accordion__title,
  .collapsible-trigger,
  details > summary
){
  background: transparent !important;
  border: 0 !important;
  color: var(--ink) !important;                   /* black-ish text */
}

/* 3) Hover / focus-within / OPEN (when the wrapper is open) */
#MainContent :is(.rra-step, .rra-accordion, .accordion, details):is(:hover, :focus-within),
#MainContent :is(.rra-step, .rra-accordion, .accordion):has([aria-expanded="true"]),
#MainContent details[open]{
  background: var(--brand) !important;            /* dark turquoise */
  color: #fff !important;
  border-color: var(--brand) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* 4) Ensure the header text/icons flip to white in the active states */
#MainContent :is(.rra-step, .rra-accordion, .accordion, details):is(:hover, :focus-within)
  :is(.rra-step__toggle, .rra-accordion__header, .accordion__title, .collapsible-trigger, details > summary),
#MainContent :is(.rra-step, .rra-accordion, .accordion):has([aria-expanded="true"])
  :is(.rra-step__toggle, .rra-accordion__header, .accordion__title, .collapsible-trigger),
#MainContent details[open] > summary{
  color: #fff !important;
}

/* 5) Icons follow the text color */
#MainContent :is(.rra-step__toggle, .rra-accordion__header, .accordion__title, .collapsible-trigger, details > summary) svg{
  fill: currentColor !important;
  stroke: currentColor !important;
}
/* Keep the OUTER box neutral */
#rra-faq details{
  background:#fff !important;
  border:1px solid #e5e7eb !important;
  color:var(--ink) !important;
}

/* Do NOT recolor the outer box on hover/focus */
#rra-faq details:has(> summary:hover),
#rra-faq details:has(> summary:focus-visible),
#rra-faq details.hovered{
  background:#fff !important;
  border-color:#e5e7eb !important;
  color:var(--ink) !important;
}

/* Style ONLY the INNER summary “button” */
#rra-faq summary{
  cursor:pointer;
  font-weight:400;
  list-style:none;
  background: var(--pill);
  color: var(--ink);
  border: 1px solid var(--brand);
  border-radius: 10px;
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
#rra-faq summary::-webkit-details-marker{ display:none; }
#rra-faq summary:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }

/* Hover / focus / OPEN = inner button turns dark turquoise */
#rra-faq summary:is(:hover,:focus-visible),
#rra-faq details[open] > summary{
  background: var(--brand) !important;
  color:#fff !important;
  border-color: var(--brand) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Make any icons/text inside the summary follow the color */
#rra-faq summary *{ color:inherit !important; fill:currentColor !important; stroke:currentColor !important; }

/* Keep the answer text/link colors unchanged */
#rra-faq .a{ color: var(--muted) !important; }
#rra-faq .a a{ color: var(--brand) !important; }

/* ==== RRA single-active rows (packets/accordions) ==== */
/* Base: light turquoise for all row containers */
#MainContent :is(details, .rra-step, .accordion, .collapsible-content, .accordion__item){
  background: var(--brand-light) !important;
  border: 1px solid var(--brand) !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

/* make inner header surfaces transparent so the container color shows through */
#MainContent :is(details, .rra-step, .accordion, .collapsible-content, .accordion__item)
  > :is(summary, .rra-step__toggle, .accordion__title, .collapsible-trigger, button[aria-controls], [role="button"][aria-controls]){
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
}

/* Only the ACTIVE row goes dark turquoise */
#MainContent :is(details, .rra-step, .accordion, .collapsible-content, .accordion__item).rra-active{
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* Make header text/icons inside the ACTIVE row white */
#MainContent :is(details, .rra-step, .accordion, .collapsible-content, .accordion__item).rra-active
  :is(summary, .rra-step__toggle, .accordion__title, .collapsible-trigger, button[aria-controls], [role="button"][aria-controls]) *{
  color: #fff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
/* ---- Single-active row system ---- */

/* 0) Neutralize the global "aria-expanded=true turns dark" on these headers */
#MainContent :is(summary, .accordion__title, .collapsible-trigger, .acc-btn)[aria-expanded="true"]{
  background: var(--brand-light) !important;
  color: var(--ink) !important;
  border-color: var(--brand) !important;
}

/* 1) Light turquoise for all row CONTAINERS by default */
#MainContent :is(details, .rra-step, .accordion, .collapsible-content, .accordion__item){
  background: var(--brand-light) !important;
  color: var(--ink) !important;
  border: 1px solid var(--brand) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}

/* make inner header surface transparent so the container color shows through */
#MainContent :is(details, .rra-step, .accordion, .collapsible-content, .accordion__item)
  > :is(summary, .accordion__title, .collapsible-trigger, .acc-btn, button[aria-controls], [role="button"][aria-controls]){
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
}

/* 2) Only the ACTIVE row (script adds .rra-active) turns dark */
#MainContent :is(details, .rra-step, .accordion, .collapsible-content, .accordion__item).rra-active{
  background: var(--brand) !important;
  color: #fff !important;
  border-color: var(--brand) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

/* 3) Header text/icons inside the ACTIVE row flip to white */
#MainContent :is(details, .rra-step, .accordion, .collapsible-content, .accordion__item).rra-active
  :is(summary, .accordion__title, .collapsible-trigger, .acc-btn, button[aria-controls], [role="button"][aria-controls]) *{
  color:#fff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}