/*
Welcome to Custom CSS!

CSS (Cascading Style Sheets) is a kind of code that tells the browser how to render a web page. You may delete these comments and get started with your customizations.

By default, your stylesheet will be loaded after the theme stylesheets, which means that your rules can take precedence and override the theme CSS rules. Just write here what you want to change, you don't need to copy all your theme's stylesheet content.
*/


/* checkout buttons: */
.checkoutbtn{ /*color:;*/ /*background-color:;*/ /*border-color:;*/ }
.checkoutbtn:hover{ /*color:;*/ /*background-color:;*/ /*border-color:;*/ }


/* fixed banners: */
#fixedpanelleft{  }
#fixedpanelright{  }
#fixedpanelbottom{  }
.slogan {font-size:14pt;font-style:italic}

 @media screen and (max-width: 576px) {
/* logo */
#divHeaderLogoR {text-align:center}
#headerelem_ShoppingCart_Layer{display:grid !important;padding-right:10px;text-align:right !important;}

} /* screen 576 */

/* ==========================================================================
   BRAND THEME  -  merged 20260804_095757
   Everything ABOVE this line is the original tenant CSS and was left as-is.
   Everything BELOW brands the .dtf-* storefront hooks.
   Reference copy kept in tpl_customcss_starter.css (not served - the site
   loads this file by exact name only).
   ========================================================================== */
/* --------------------------------------------------------------------------
   STEP 1 — declare the brand ONCE. Everything else references these.
   Change a colour here and it cascades through every checkout page.
   -------------------------------------------------------------------------- */
:root{
  --df-blue:      #11569c;   /* primary brand */
  --df-blue-dark: #0d4278;   /* hover / pressed */
  --df-navy:      #0b2540;   /* headings */
  --df-sky:       #eaf2fb;   /* tinted panels */
  --df-line:      #d9e2ec;   /* borders */
  --df-ok:        #1a7f4b;   /* free / success */
  --df-radius:    10px;

  /* product-page pill hook documented in §12 — one line brands every selected pill */
  --dtf-badge:       var(--df-blue);
  --dtf-badge-text:  #fff;
}

/* --------------------------------------------------------------------------
   STEP 2 — group the four checkout pages.
   The SAME concept carries a DIFFERENT prefix per page (-order-, -ship-,
   -pay-, -confirm-). Grouping them is what makes one rule brand the whole
   flow instead of four near-identical rules that drift apart later.
   -------------------------------------------------------------------------- */

/* Summary cards ---------------------------------------------------------- */
.dtf-order-summary,
.dtf-ship-summary,
.dtf-pay-summary,
.dtf-confirm-summary{
  border:1px solid var(--df-line);
  border-radius:var(--df-radius);
  overflow:hidden;
}

.dtf-order-title,
.dtf-ship-summary-title,
.dtf-pay-summary-title,
.dtf-confirm-summary-title,
.dtf-pay-card-title,
.dtf-confirm-card-title,
.dtf-ship-step-title{
  color:var(--df-navy);
  font-weight:700;
  letter-spacing:.01em;
}

/* Cart / order lines ------------------------------------------------------ */
.dtf-order-item,
.dtf-ship-item,
.dtf-pay-item,
.dtf-confirm-item{
  border-bottom:1px solid var(--df-line);
  padding-block:.6rem;
}

/* Grand total — the number customers look for -------------------------- */
.dtf-ship-total-grand,
.dtf-pay-total-grand,
.dtf-confirm-total-grand{
  color:var(--df-navy);
  font-size:1.1rem;
  border-top:2px solid var(--df-blue);
  padding-top:.5rem;
  margin-top:.35rem;
}

/* Primary + secondary actions -------------------------------------------- */
.dtf-ship-continue,
.dtf-pay-submit{
  background:var(--df-blue);
  border-color:var(--df-blue);
  color:#fff;
  border-radius:var(--df-radius);
  padding:.6rem 1.5rem;
  font-weight:600;
}
.dtf-ship-continue:hover,
.dtf-pay-submit:hover{
  background:var(--df-blue-dark);
  border-color:var(--df-blue-dark);
  color:#fff;
}
.dtf-ship-back{
  color:var(--df-blue);
  border-radius:var(--df-radius);
}

/* Alerts — one rule covers every alert on all three later steps ---------- */
.dtf-ship-alert,
.dtf-pay-alert,
.dtf-confirm-alert{
  border-radius:var(--df-radius);
  border-left:4px solid var(--df-blue);
}

/* --------------------------------------------------------------------------
   STEP 3 — page-specific accents, using the state modifiers.
   -------------------------------------------------------------------------- */

/* Checkout step bar (renders on order → shipping → payments) */
.dtf-checkout-steps{ display:flex; gap:.5rem; flex-wrap:wrap; }
.dtf-checkout-step{ color:#7a8794; }
.dtf-checkout-step--done{ color:var(--df-ok); }
.dtf-checkout-step--current{ color:var(--df-blue); font-weight:700; }
.dtf-checkout-step--todo{ opacity:.55; }

/* Shipping: the two step cards, and free-shipping in the success colour */
.dtf-ship-step{ border:1px solid var(--df-line); border-radius:var(--df-radius); }
.dtf-ship-step-head{ background:var(--df-sky); }
.dtf-ship-total-shipping--free{ color:var(--df-ok); font-weight:600; }
.dtf-ship-total-threshold{ color:var(--df-ok); }

/* Carrier rate list — .active is added by the page JS on the chosen rate */
.dtf-rate-item{ border-radius:var(--df-radius); margin-bottom:.4rem; }
.dtf-rate-item:hover{ border-color:var(--df-blue); }
.dtf-rate-item.active{ background:var(--df-sky); border-color:var(--df-blue); color:var(--df-navy); }
.dtf-rate-price{ color:var(--df-navy); font-weight:700; }

/* Payments: saved cards */
.dtf-cc-item{ border:1px solid var(--df-line); border-radius:var(--df-radius); padding:.5rem .75rem; }

/* Confirm: the order number is the hero of this page */
.dtf-confirm-title{ color:var(--df-navy); }
.dtf-confirm-orderno{
  color:var(--df-blue);
  font-weight:700;
  font-size:1.15rem;
}

/* --------------------------------------------------------------------------
   Mobile — the shipping page stacks summary above the steps.
   -------------------------------------------------------------------------- */
@media (max-width:767.98px){
  .dtf-ship-continue,
  .dtf-pay-submit{ display:block; width:100%; text-align:center; }
  .dtf-ship-nav,
  .dtf-pay-nav,
  .dtf-confirm-nav{ gap:.5rem; }
}