/* ============================================================
   DesignAxis — shared page layout scale (8.49.1)

   The public pages are separate Elementor HTML widgets, each with its own
   CSS, so every page had drifted to its own spacing: side gutters between
   14px and 19px, hero tops between 34px and 80px, content blocks ending
   between 72px and 100px. On a phone that reads as pages from different
   sites.

   This file is the single place those values live. Selectors are prefixed
   with `html` purely to out-specify the widgets' own inline <style> blocks,
   which are parsed after this file — no !important needed.

   Change a value here and every page follows.
   ============================================================ */

:root{
  --da-gutter-sm: 20px;   /* side padding, phones + small tablets */
  --da-hero-t-sm: 56px;   /* page hero top / bottom */
  --da-hero-b-sm: 40px;
  --da-wrap-t-sm: 40px;   /* main content block top / bottom */
  --da-wrap-b-sm: 72px;
  --da-sec-sm:    64px;   /* homepage section rhythm */
}


/* ---- full-bleed page roots ------------------------------------------------
   FAQ, About and Portfolio render inside WordPress's constrained-layout
   wrapper (.entry-content.is-layout-constrained), which centres their root and
   adds a 13-15px margin of its own. That margin stacked on top of the gutter
   below, so those three pages sat further in than the rest. Home and Contact
   are not inside that wrapper, which is why only some pages looked wrong.     */
html .entry-content > .da-home,
html .entry-content > .da-services,
html .entry-content > .da-portfolio,
html .entry-content > .da-mat,
html .entry-content > .da-faq,
html .entry-content > .da-about,
html .entry-content > .da-contact,
html .entry-content > .da-quote,
html .entry-content > .da-shipping{
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 820px){

  /* ---- side gutter: one value everywhere ---- */
  html .da-home > section[class],
  html .da-about > .page-hero[class],
  html .da-about > .about-wrap[class],
  html .da-about > .stats-band[class],
  html .da-faq > .page-hero[class],
  html .da-faq > .faq-wrap[class],
  html .da-portfolio > .page-hero[class],
  html .da-portfolio > .filter-bar[class],
  html .da-portfolio > .portfolio-wrap[class],
  html .da-mat > .page-hero[class],
  html .da-mat > .filter-bar[class],
  html .da-mat > .quick-pick[class],
  html .da-mat > .materials-wrap[class],
  html .da-services > .svc-hero[class],
  html .da-services > .svc-wrap[class],
  html .da-contact > .page-hero[class],
  html .da-contact > .contact-wrap[class],
  html .da-quote > .quote-hero[class]{
    padding-left: var(--da-gutter-sm);
    padding-right: var(--da-gutter-sm);
  }

  /* ---- page heroes: same height on every page ---- */
  html .da-about > .page-hero[class],
  html .da-faq > .page-hero[class],
  html .da-portfolio > .page-hero[class],
  html .da-mat > .page-hero[class],
  html .da-services > .svc-hero[class],
  html .da-contact > .page-hero[class],
  html .da-quote > .quote-hero[class]{
    padding-top: var(--da-hero-t-sm);
    padding-bottom: var(--da-hero-b-sm);
  }

  /* ---- main content blocks ---- */
  html .da-about > .about-wrap[class],
  html .da-faq > .faq-wrap[class],
  html .da-portfolio > .portfolio-wrap[class],
  html .da-mat > .materials-wrap[class],
  html .da-services > .svc-wrap[class],
  html .da-contact > .contact-wrap[class],
  html .da-quote > .quote-wrap[class]{
    padding-top: var(--da-wrap-t-sm);
    padding-bottom: var(--da-wrap-b-sm);
  }
  /* A page whose content continues in a second block keeps its own top. */
  html .da-about > .about-wrap ~ .about-wrap[class]{ padding-top: 0; }

  /* ---- filter bars sit between hero and content ---- */
  html .da-portfolio > .filter-bar[class],
  html .da-mat > .filter-bar[class]{ padding-top: 20px; padding-bottom: 20px; }
  html .da-mat > .quick-pick[class]{ padding-top: var(--da-wrap-t-sm); }

  /* ---- homepage section rhythm ---- */
  html .da-home > section[class]{
    padding-top: var(--da-sec-sm);
    padding-bottom: var(--da-sec-sm);
  }
  html .da-home > section.hero[class]{ padding-top: 56px; padding-bottom: 48px; }
  html .da-home > section.cta-section[class]{ padding-top: 72px; padding-bottom: 72px; }

  /* the quote page's form card carries its own inner padding */
  html .da-quote .form-head[class],
  html .da-quote .quote-form[class],
  html .da-quote .quote-side-panel[class]{ padding-left: var(--da-gutter-sm); padding-right: var(--da-gutter-sm); }

  html .da-about > .stats-band[class]{ padding-top: var(--da-wrap-t-sm); padding-bottom: var(--da-wrap-t-sm); }
}

/* ---- headings: the page heroes share one size; home stays the big one ---- */
@media (min-width: 821px){
  html .da-faq .page-hero h1{ font-size: 58px; }   /* was 42px — odd one out */
}


/* ============================================================
   Material -> shop strips (8.53.0)

   Rendered by DA_Material_Links into the Materials page. The page's own
   variables (--cyan, --card2, --border) are declared on :root inside the
   page markup, so they resolve here; the fallbacks after each var() keep
   the strip legible anywhere else it might be used.

   `html` prefixes out-specify the page's inline <style> block, same as
   the layout scale above.
   ============================================================ */

/* --- bucket header: one line of text, never a link (the whole header is
       itself the expand/collapse click target) --- */
html .da-mat .da-shop-line{
  font-family:'Rajdhani',sans-serif;
  font-size:12px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--cyan,#00a8e8);
  margin-top:7px;
}
html .da-mat .da-shop-line.is-quote{ color:var(--muted,#93a3b8); }

/* --- variant card footer: buy, or ask us to print it --- */
html .da-mat .da-shop-strip{
  margin-top:auto;                 /* cards are flex columns — pin to the bottom
                                      so every strip in a row lines up */
  padding:16px 22px 20px;
  border-top:1px solid var(--border,rgba(0,160,230,.14));
  background:var(--card2,#101828);
  display:flex;
  flex-direction:column;
  gap:12px;
}
html .da-mat .da-shop-meta{
  font-family:'Rajdhani',sans-serif;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--cyan,#00a8e8);
}
html .da-mat .da-shop-strip.is-quote .da-shop-meta{
  text-transform:none;
  letter-spacing:.01em;
  font-size:13px;
  color:rgba(238,242,255,.6);
}
html .da-mat .da-shop-acts{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

html .da-mat .da-shop-btn{
  box-sizing:border-box;
  font-family:'Rajdhani',sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:10px 18px;
  background:var(--cyan,#00a8e8);
  color:#04121c;
  text-decoration:none;
  border:1px solid var(--cyan,#00a8e8);
  transition:background .2s,color .2s;
}
html .da-mat .da-shop-btn:hover{ background:transparent; color:var(--cyan,#00a8e8); }

html .da-mat .da-shop-alt{
  font-family:'Rajdhani',sans-serif;
  font-weight:600;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(238,242,255,.62);
  text-decoration:none;
  border-bottom:1px solid rgba(0,168,232,.35);
  padding-bottom:2px;
  transition:color .2s,border-color .2s;
}
html .da-mat .da-shop-alt:hover{ color:var(--cyan,#00a8e8); border-color:var(--cyan,#00a8e8); }

/* --- closing band, shared by Materials and FAQ --- */
html .da-cta-band{
  background:var(--card,#0c1220);
  border-top:1px solid var(--border,rgba(0,160,230,.14));
  border-bottom:1px solid var(--border,rgba(0,160,230,.14));
  padding:64px 5%;
  text-align:center;
}
html .da-cta-band h2{
  font-family:'Rajdhani',sans-serif;
  font-weight:700;
  font-size:34px;
  letter-spacing:.02em;
  color:#eef2ff;
  margin:0 0 12px;
}
html .da-cta-band p{
  font-family:'Open Sans',sans-serif;   /* the band sits outside the page's own
                                           scoped rules, so it inherits the
                                           browser's serif unless we say so */
  color:rgba(238,242,255,.62);
  max-width:560px;
  margin:0 auto 26px;
  line-height:1.65;
  font-size:15px;
}
html .da-cta-band .da-cta-acts{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
html .da-cta-band .da-cta-primary,
html .da-cta-band .da-cta-secondary{
  box-sizing:border-box;          /* this file ships on its own — never assume
                                     the host page reset its box model */
  font-family:'Rajdhani',sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:14px 30px;
  text-decoration:none;
  border:1px solid var(--cyan,#00a8e8);
  transition:background .2s,color .2s;
}
html .da-cta-band .da-cta-primary{ background:var(--cyan,#00a8e8); color:#04121c; }
html .da-cta-band .da-cta-primary:hover{ background:transparent; color:var(--cyan,#00a8e8); }
html .da-cta-band .da-cta-secondary{ background:transparent; color:var(--cyan,#00a8e8); }
html .da-cta-band .da-cta-secondary:hover{ background:var(--cyan,#00a8e8); color:#04121c; }

@media (max-width: 820px){
  html .da-cta-band{ padding:56px var(--da-gutter-sm) 56px; }
  html .da-cta-band h2{ font-size:27px; }
  html .da-mat .da-shop-strip{ padding-left:var(--da-gutter-sm); padding-right:var(--da-gutter-sm); }
  html .da-cta-band .da-cta-acts{ flex-direction:column; }
  html .da-cta-band .da-cta-primary,
  html .da-cta-band .da-cta-secondary{ width:100%; }
}

/* ---- Materials: the variant grid used to be wider than the phone ----------
   .variants-grid is repeat(auto-fill, minmax(360px, 1fr)) with no breakpoint.
   auto-fill cannot shrink a track below its minimum, so on a 375px screen the
   360px column plus the page gutters came to 481px and the whole page slid
   sideways by 106px. One column below the breakpoint; minmax(0,1fr) rather
   than plain 1fr so a long unbroken word in a card cannot re-inflate it.     */
@media (max-width: 820px){
  html .da-mat .variants-grid[class]{ grid-template-columns: minmax(0, 1fr); }
}

/* ---- Materials: the bucket header row was wider than the phone too --------
   .bucket-header is a flex row (toggle · icon · name+description · badge).
   The name column is flex:1 but keeps the default min-width:auto, so it can
   never shrink below its longest word — "Polyethylene Terephthalate Glycol"
   at 20px — and the FDM/SLA badge on the end was pushed off the screen,
   taking the page width with it. min-width:0 lets the column shrink and the
   words wrap, which is what should have happened all along.                  */
@media (max-width: 820px){
  html .da-mat .bucket-header[class]{ gap:12px; padding-left:16px; padding-right:16px; }
  html .da-mat .bucket-info[class]{ min-width:0; }
  html .da-mat .bucket-name[class],
  html .da-mat .bucket-desc[class]{ overflow-wrap:anywhere; }
  html .da-mat .bucket-name[class]{ font-size:17px; line-height:1.25; }
}
@media (max-width: 520px){
  /* Below this the badge is the first thing that has to give: the FDM / SLA
     label is already said by the filter bar above and the card tags below. */
  html .da-mat .bucket-badge[class]{ display:none; }
}


/* ============================================================
   8.64.2 — courier tracking widget in the site's own colours.

   Bob Go ships its tracking widget as a white card with grey controls, which
   sat on the dark Shipping page (and on its own Track Your Order page) as a
   white box. These rules restyle every state the widget has — the search
   form, the loading spinner, the error line, and the result view with its
   status steps and checkpoints — so it matches wherever it is placed.

   Selectors mirror the widget's own stylesheet one for one; nothing here
   reaches outside .bobgo-tracking.
   ============================================================ */
html .bobgo-tracking{ color:#eef2ff; font-family:'Open Sans',sans-serif; }
html .bobgo-tracking .bobgo-card{
  background-color:#0c1220; border:1px solid rgba(0,160,230,.18); border-radius:4px; color:#eef2ff;
}
html .bobgo-tracking .bobgo-card :is(h1,h2,h3,h4,h5),
html .bobgo-tracking .section-heading .section-heading-header,
html .bobgo-tracking .checkpoint-wrapper .checkpoint-row .checkpoint-status{
  color:#eef2ff !important;
}
html .bobgo-tracking .bobgo-card :is(h1,h2,h3){
  font-family:'Rajdhani',sans-serif; font-weight:700; letter-spacing:.02em;
}
html .bobgo-tracking .bobgo-card h2{ font-size:22px; line-height:1.3; }
html .bobgo-tracking div#mc-search-container input{
  background-color:#050914; color:#eef2ff; border:1px solid rgba(0,168,232,.3); border-radius:0;
  min-height:44px; padding:0 14px; outline:none; box-shadow:none;
}
html .bobgo-tracking div#mc-search-container input::placeholder{ color:rgba(238,242,255,.4); }
html .bobgo-tracking div#mc-search-container input:focus{
  border-color:#00a8e8; box-shadow:0 0 0 1px rgba(0,168,232,.4);
}
html .bobgo-tracking .btn-track,
html .bobgo-tracking .primary-color{ background-color:#00a8e8; color:#001018; }
html .bobgo-tracking .btn-track{
  border:0; border-radius:0; min-height:42px; padding:0 26px; cursor:pointer;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  transition:background-color .2s;
}
html .bobgo-tracking .btn-track:hover{ background-color:#eef2ff; color:#001018; }
html .bobgo-tracking .sk-circle .sk-child::before{ background-color:#00a8e8; }
html .bobgo-tracking .mc-error{ color:#ff6b6b; }
html .bobgo-tracking .steps-events .horizontal-line{ border-top-color:rgba(0,160,230,.3); }
html .bobgo-tracking .vertical-line,
html .bobgo-tracking .checkpoints-line{ border-left-color:rgba(0,160,230,.3); }
html .bobgo-tracking .steps-events .steps-grid .step-container .step-text-container .text-flex-container .step-text-container-time{ color:#93a3b8; }
html .bobgo-tracking .status-badge{ background-color:rgba(0,168,232,.14); color:#9fdcf5; }
html .bobgo-tracking .directions-link,
html .bobgo-tracking .location-support-link,
html .bobgo-tracking .location-support-link:hover{ color:#00a8e8; }
html .bobgo-tracking .directions-link-icon{ fill:#00a8e8; }