/* ==========================================================================
   Shop: cart, slide out drawer, checkout.

   The cart and checkout templates are overridden in woocommerce/, so this
   file styles our own markup rather than fighting the core tables. The only
   core selectors kept are the ones WooCommerce's own scripts require:
   #customer_details, #order_review, #payment, .cart_totals, .checkout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page shell
   -------------------------------------------------------------------------- */
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce { max-width: none; }

.woocommerce-cart .woocommerce-notices-wrapper:empty,
.woocommerce-checkout .woocommerce-notices-wrapper:empty { display: none; }

.dt-shop__note {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 0 20px; padding: 15px 18px; border-radius: 14px;
  background: var(--dt-green-wash, rgba(0,153,51,.06));
  border: 1px solid rgba(0,153,51,.22);
  font-size: .875rem; line-height: 1.6; color: var(--dt-text-2);
}
.dt-shop__note svg { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 1px; color: var(--dt-accent); }
.dt-shop__note strong { color: var(--dt-black); }

/* The reassurance list, used in the summary and under the checkout form. */
.dt-str { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.dt-str li { display: flex; gap: 12px; margin: 0; }
.dt-str__i {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 11px;
  background: var(--dt-paper); border: 1px solid rgba(0,153,51,.22); color: var(--dt-accent);
}
.dt-str__i svg { width: 17px; height: 17px; }
.dt-str__b strong { display: block; font-family: var(--dt-font-body); font-size: .875rem; font-weight: 700; color: var(--dt-black); margin-bottom: 3px; }
.dt-str__b span { display: block; font-size: .8125rem; line-height: 1.55; color: var(--dt-text-3); }
.dt-str--cart { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--dt-rule); }
.dt-str--co {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 22px; margin-top: 16px; padding: 20px 22px;
  background: var(--dt-paper); border: 1px solid var(--dt-rule); border-radius: 20px;
}
.dt-str--empty {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(30px, 4vw, 48px);
}
.dt-str--empty li { flex-direction: column; gap: 10px; padding: 20px; background: var(--dt-paper); border: 1px solid var(--dt-rule); border-radius: 16px; }

/* --------------------------------------------------------------------------
   2. Cart
   -------------------------------------------------------------------------- */
.dt-ct {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  gap: clamp(20px, 2.6vw, 34px); align-items: start;
}
.dt-ct__main { min-width: 0; }
.dt-ct__side { min-width: 0; position: sticky; top: 96px; }
.woocommerce .dt-ct__form { margin: 0; }

.dt-ct__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 0 0 12px; padding: 0 4px;
}
.dt-ct__count {
  margin: 0; font-family: var(--dt-font-body); font-size: .75rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dt-text-3);
}
.woocommerce a.dt-ct__back {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--dt-font-body); font-size: .875rem; font-weight: 700;
  color: var(--dt-text-3); text-decoration: none;
}
.woocommerce a.dt-ct__back:hover { color: var(--dt-accent); }
.dt-ct__back svg { width: 15px; height: 15px; transition: transform 200ms var(--dt-ease); }
.dt-ct__back:hover svg { transform: translateX(-3px); }

.dt-ct__list {
  list-style: none; margin: 0; padding: 0;
  background: var(--dt-paper); border: 1px solid var(--dt-rule);
  border-radius: 20px 20px 0 0; overflow: hidden;
}
.dt-ct__i {
  display: grid; grid-template-columns: 104px minmax(0, 1fr) auto 34px;
  align-items: center; gap: 20px;
  margin: 0; padding: 18px 22px; border-bottom: 1px solid var(--dt-rule);
  transition: background 180ms var(--dt-ease);
}
.dt-ct__i:hover { background: var(--dt-bg-alt); }
.dt-ct__media {
  width: 104px; aspect-ratio: 4 / 3; border-radius: 13px; overflow: hidden;
  background: linear-gradient(160deg, #232321, #17171a); display: block;
}
.dt-ct__media a { display: block; width: 100%; height: 100%; }
.dt-ct__media img, .dt-ct__media svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt-ct__body { min-width: 0; }
.dt-ct__t { display: block; font-size: 1.0625rem; line-height: 1.3; margin-bottom: 5px; }
.woocommerce .dt-ct__t a {
  font-family: var(--dt-font-body); font-weight: 700; color: var(--dt-black); text-decoration: none;
}
.woocommerce .dt-ct__t a:hover { color: var(--dt-accent); }
.dt-ct__meta { display: block; margin-top: 5px; font-size: .78125rem; line-height: 1.5; color: var(--dt-text-3); }
.dt-ct__p {
  font-family: var(--dt-font-display); font-size: 1.375rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--dt-black); white-space: nowrap;
}
.dt-ct__rm { display: flex; justify-content: flex-end; }
.woocommerce a.dt-ct__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--dt-bg-alt); color: var(--dt-text-3) !important; text-decoration: none;
  transition: background 180ms var(--dt-ease), color 180ms var(--dt-ease);
}
.dt-ct__x svg { width: 15px; height: 15px; }
.woocommerce a.dt-ct__x:hover { background: #fdecea; color: #b3261e !important; }

.dt-ct__coupon {
  display: flex; gap: 10px; align-items: center;
  padding: 15px 22px; background: var(--dt-bg-alt);
  border: 1px solid var(--dt-rule); border-top: 0; border-radius: 0 0 20px 20px;
}
.woocommerce .dt-ct__code {
  flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 12px 18px;
  border: 1px solid var(--dt-rule); border-radius: var(--dt-r-full);
  background: var(--dt-paper); font-family: var(--dt-font-body); font-size: .875rem;
  color: var(--dt-black);
}
.woocommerce .dt-ct__code:focus { outline: none; border-color: var(--dt-black); }
.woocommerce button.dt-ct__apply {
  flex: 0 0 auto; min-height: 46px; padding: 12px 26px; border: 0;
  border-radius: var(--dt-r-full); background: var(--dt-black); color: #fff; cursor: pointer;
  font-family: var(--dt-font-body); font-size: .875rem; font-weight: 700;
  transition: background 180ms var(--dt-ease);
}
.woocommerce button.dt-ct__apply:hover { background: var(--dt-accent); }

/* --------------------------------------------------------------------------
   3. Summary
   -------------------------------------------------------------------------- */
.dt-sum {
  width: 100% !important; float: none !important; margin: 0;
  padding: 24px; border-radius: 20px;
  background: var(--dt-paper); border: 1px solid var(--dt-rule);
}
.dt-sum__h {
  font-family: var(--dt-font-body); font-size: .75rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dt-text-3);
  margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--dt-rule);
}
.dt-sum__rows { margin: 0; }
.dt-sum__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 7px 0; }
.dt-sum__row dt { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--dt-text-2); }
.dt-sum__row dd { margin: 0; font-size: .9375rem; color: var(--dt-text-2); text-align: right; }
.dt-sum__row--cp dd { color: var(--dt-accent); }
.dt-sum__row--cp a { font-size: .75rem; color: var(--dt-text-3); }
.dt-sum__tot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-top: 12px; padding-top: 15px; border-top: 1px solid var(--dt-rule);
}
.dt-sum__tot > span:first-child { font-size: .9375rem; font-weight: 700; color: var(--dt-black); }
.dt-sum__big, .dt-sum__big strong, .dt-sum__big .amount {
  font-family: var(--dt-font-display); font-size: 1.625rem; font-weight: 700;
  letter-spacing: -.025em; color: var(--dt-black);
}
.dt-sum__go { padding: 18px 0 0; margin: 0; }
.woocommerce .dt-sum__go a.checkout-button,
.woocommerce a.checkout-button {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 54px; padding: 15px 26px; margin: 0;
  border-radius: var(--dt-r-full); border: 0;
  background: var(--dt-accent); color: #fff; text-decoration: none;
  font-family: var(--dt-font-body); font-size: 1rem; font-weight: 800;
  box-shadow: 0 14px 34px -18px rgba(0,153,51,.9);
  transition: background 180ms var(--dt-ease);
}
.woocommerce a.checkout-button:hover { background: var(--dt-accent-hover); color: #fff; }
.dt-sum__note { margin: 12px 0 0; font-size: .78125rem; line-height: 1.55; color: var(--dt-text-3); text-align: center; }

/* --------------------------------------------------------------------------
   4. Payment marks
   -------------------------------------------------------------------------- */
.dt-pay {
  margin: 16px 0 0; padding: 16px 20px;
  border: 1px solid var(--dt-rule); border-radius: 18px; background: var(--dt-paper);
}
.dt-pay__t {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--dt-font-body); font-size: .6875rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dt-text-3);
}
.dt-pay__t svg { width: 15px; height: 15px; color: var(--dt-accent); }
.dt-pay__set { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dt-pay__set li { margin: 0; display: flex; }
.dt-mk { display: block; width: 44px; height: 28.6px; }
.dt-pay__n { margin: 12px 0 0; font-size: .78125rem; line-height: 1.6; color: var(--dt-text-3); }

/* --------------------------------------------------------------------------
   5. Empty cart
   -------------------------------------------------------------------------- */
.dt-mt { max-width: 900px; }
.dt-mt__head { margin-bottom: clamp(26px, 3.4vw, 40px); }
.dt-mt__art { display: block; width: 132px; margin: 0 0 20px; }
.dt-mt__art svg { width: 100%; height: auto; display: block; }
.dt-mt__h {
  font-family: var(--dt-font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem); font-weight: 700;
  letter-spacing: -.028em; line-height: 1.12; margin: 0 0 12px; color: var(--dt-black);
}
.dt-mt__s { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--dt-text-3); max-width: 58ch; }
.dt-mt__set { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dt-mt__set li { margin: 0; }
.woocommerce a.dt-mt__card, .woocommerce a.dt-mt__card:hover {
  display: flex; flex-direction: column; height: 100%; padding: 24px 22px;
  border-radius: 18px; background: var(--dt-paper); border: 1px solid var(--dt-rule);
  text-decoration: none; color: var(--dt-black);
  transition: border-color 220ms var(--dt-ease), transform 220ms var(--dt-ease), box-shadow 220ms var(--dt-ease);
}
.woocommerce a.dt-mt__card:hover { border-color: var(--dt-accent); transform: translateY(-4px); box-shadow: 0 24px 48px -30px rgba(24,23,22,.5); }
.dt-mt__i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: 14px; border-radius: 12px;
  background: var(--dt-bg-alt); border: 1px solid rgba(0,153,51,.22); color: var(--dt-accent);
}
.dt-mt__i svg { width: 20px; height: 20px; }
.dt-mt__t { font-family: var(--dt-font-body); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.018em; margin-bottom: 8px; }
.dt-mt__d { font-size: .875rem; line-height: 1.6; color: var(--dt-text-3); margin-bottom: 16px; }
.dt-mt__go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--dt-font-body); font-size: .8125rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--dt-accent);
}
.dt-mt__go svg { width: 15px; height: 15px; transition: transform 200ms var(--dt-ease); }
.dt-mt__card:hover .dt-mt__go svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   6. Suggestions under the cart
   -------------------------------------------------------------------------- */
.dt-sug { margin-top: clamp(34px, 4vw, 56px); }
.dt-sug__h {
  font-family: var(--dt-font-display); font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem);
  font-weight: 700; letter-spacing: -.024em; margin: 0 0 8px; color: var(--dt-black);
}
.dt-sug__s { margin: 0 0 20px; font-size: .9375rem; color: var(--dt-text-3); }
.dt-sug__set { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* --------------------------------------------------------------------------
   7. The drawer
   -------------------------------------------------------------------------- */
.dt-dw { position: fixed; inset: 0; z-index: 120; }
.dt-dw__veil { position: absolute; inset: 0; background: rgba(13,13,12,.55); opacity: 0; transition: opacity 300ms var(--dt-ease); backdrop-filter: blur(2px); }
.dt-dw.is-on .dt-dw__veil { opacity: 1; }
.dt-dw__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(430px, 92vw); display: flex; flex-direction: column;
  background: var(--dt-paper); box-shadow: -22px 0 60px -24px rgba(0,0,0,.5);
  transform: translateX(102%); transition: transform 340ms cubic-bezier(.22,1.05,.36,1);
}
.dt-dw.is-on .dt-dw__panel { transform: none; }
body.dt-dw-open { overflow: hidden; }
.dt-dw__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 22px; border-bottom: 1px solid var(--dt-rule); flex: 0 0 auto;
}
.dt-dw__t { margin: 0; font-family: var(--dt-font-body); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dt-text-3); }
.dt-dw__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--dt-bg-alt); color: var(--dt-black); transition: background 180ms var(--dt-ease);
}
.dt-dw__x:hover { background: var(--dt-black); color: #fff; }
.dt-dw__x svg { width: 16px; height: 16px; }
.dt-dw__body { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; }
.dt-dwl { list-style: none; margin: 0; padding: 16px 22px; flex: 1 1 auto; }
.dt-dwl__i {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--dt-rule);
}
.dt-dwl__i:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.dt-dwl__media { width: 72px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: linear-gradient(160deg, #232321, #17171a); display: flex; }
.dt-dwl__media img, .dt-dwl__media svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt-dwl__t { display: block; font-size: .9375rem; line-height: 1.35; margin-bottom: 5px; }
.dt-dw .dt-dwl__t a { font-family: var(--dt-font-body); font-weight: 700; color: var(--dt-black); text-decoration: none; }
.dt-dw .dt-dwl__t a:hover { color: var(--dt-accent); }
.dt-dwl__p { display: block; font-family: var(--dt-font-display); font-size: 1.0625rem; font-weight: 700; color: var(--dt-black); }
.dt-dw a.dt-dwl__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; font-size: 18px; line-height: 1;
  background: var(--dt-bg-alt); color: var(--dt-text-3) !important; text-decoration: none;
}
.dt-dw a.dt-dwl__x:hover { background: #fdecea; color: #b3261e !important; }
.dt-dw__foot { flex: 0 0 auto; padding: 20px 22px 24px; border-top: 1px solid var(--dt-rule); background: var(--dt-bg-alt); }
.dt-dw__sub { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 4px; }
.dt-dw__sub span { font-family: var(--dt-font-body); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--dt-text-3); }
.dt-dw__sub strong, .dt-dw__sub .amount { font-family: var(--dt-font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; color: var(--dt-black); }
.dt-dw__once { margin: 0 0 14px; font-size: .78125rem; line-height: 1.5; color: var(--dt-text-3); }
.dt-dw__foot .dt-dw__btn + .dt-dw__btn { margin-top: 10px; }
.dt-dw a.dt-dw__btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 14px 24px; border-radius: var(--dt-r-full);
  font-family: var(--dt-font-body); font-size: .9375rem; font-weight: 800; text-decoration: none;
  transition: background 180ms var(--dt-ease), border-color 180ms var(--dt-ease);
}
.dt-dw a.dt-dw__btn--primary { background: var(--dt-accent); color: #fff; border: 0; }
.dt-dw a.dt-dw__btn--primary:hover { background: var(--dt-accent-hover); color: #fff; }
.dt-dw a.dt-dw__btn:not(.dt-dw__btn--primary) { background: var(--dt-paper); color: var(--dt-black); border: 1px solid var(--dt-rule); }
.dt-dw a.dt-dw__btn:not(.dt-dw__btn--primary):hover { border-color: var(--dt-black); color: var(--dt-black); }
.dt-dw__legal { margin: 14px 0 0; font-size: .71875rem; line-height: 1.55; color: var(--dt-text-3); }
.dt-dw .dt-dw__legal a { color: var(--dt-text-2); text-decoration: underline; text-underline-offset: 3px; }
.dt-dw__empty { padding: 44px 24px; text-align: center; }
.dt-dw__empty p { margin: 0 0 18px; font-size: .9375rem; line-height: 1.6; color: var(--dt-text-3); }
.dt-ci__pack { display: block; font-size: .75rem; font-weight: 700; color: var(--dt-accent); }
.dt-ci__pack span { color: var(--dt-text-3); font-weight: 500; }
.dt-ci__pack span::before { content: ' \00b7 '; }
/* Astra prints its own mini cart furniture through the mini cart hook. */
.dt-dw .ast-mini-cart-empty,
.dt-dw .woocommerce-mini-cart__buttons,
.dt-dw .woocommerce-mini-cart__total,
.dt-dw .ast-mini-cart-message { display: none !important; }

/* --------------------------------------------------------------------------
   8. Checkout
   -------------------------------------------------------------------------- */
.woocommerce-checkout form.checkout {
  display: grid; grid-template-columns: minmax(0, 1fr) 400px;
  gap: clamp(20px, 2.6vw, 34px); align-items: start;
}
.dt-co__main { min-width: 0; grid-column: 1; }
.dt-co__side { min-width: 0; grid-column: 2; position: sticky; top: 96px; }
/* Core floats these at 48%; inside a grid track that halves the column. */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce-checkout .dt-co__panel {
  width: 100% !important; float: none !important; margin-left: 0; margin-right: 0;
}
.woocommerce-checkout .dt-co__panel {
  padding: 26px; border-radius: 20px;
  background: var(--dt-paper); border: 1px solid var(--dt-rule);
}
.woocommerce-checkout .dt-co__h,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-checkout #payment .dt-co__h {
  font-family: var(--dt-font-body); font-size: .75rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dt-text-3);
  margin: 0 0 18px; padding: 0 0 14px; border-bottom: 1px solid var(--dt-rule);
}
.woocommerce-checkout h2.dt-co__h { margin: 0 0 12px; padding: 0; border: 0; }
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper { width: 100%; float: none; }
.woocommerce-checkout .woocommerce-additional-fields:not(:has(.form-row)) { display: none; }
.woocommerce-checkout .woocommerce-shipping-fields { display: none; }

/* Fields */
.woocommerce-checkout .form-row { margin: 0 0 14px; padding: 0; }
.woocommerce-checkout .form-row-first, .woocommerce-checkout .form-row-last { width: 100%; float: none; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-wide,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .create-account,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .dt-shop__acct { grid-column: 1 / -1; }
.woocommerce-checkout .form-row label {
  display: block; margin-bottom: 7px; font-family: var(--dt-font-body);
  font-size: .8125rem; font-weight: 700; color: var(--dt-black);
}
.woocommerce-checkout .form-row .required { color: var(--dt-accent); text-decoration: none; }
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce-checkout .select2-selection {
  width: 100%; min-height: 52px; padding: 13px 16px;
  border: 1px solid var(--dt-rule) !important; border-radius: 12px;
  background: var(--dt-bg-alt); font-family: var(--dt-font-body); font-size: .9375rem; color: var(--dt-black);
  transition: border-color 180ms var(--dt-ease), background 180ms var(--dt-ease);
}
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
  outline: none; border-color: var(--dt-black) !important; background: var(--dt-paper);
}
.woocommerce-checkout .select2-selection__rendered { line-height: 26px !important; padding-left: 0 !important; }
.woocommerce-checkout .select2-selection__arrow { top: 13px !important; }

/* Checkboxes read as their own rows. */
.woocommerce-checkout form .form-row label.woocommerce-form__label-for-checkbox,
.woocommerce-checkout form .form-row label.woocommerce-form__label-for-checkbox.inline {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  padding: 13px 15px; border: 1px solid var(--dt-rule); border-radius: 13px;
  background: var(--dt-bg-alt); cursor: pointer;
  font-size: .8125rem; line-height: 1.55; font-weight: 600; color: var(--dt-text-2);
}
.woocommerce-checkout form .form-row label.woocommerce-form__label-for-checkbox:hover { border-color: var(--dt-grey-mid); }
.woocommerce-checkout input[type="checkbox"] {
  flex: 0 0 auto; width: 17px; height: 17px; margin: 1px 0 0;
  accent-color: var(--dt-accent); cursor: pointer;
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper { margin-top: 4px; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row { margin-bottom: 10px; }
.woocommerce-checkout .woocommerce-privacy-policy-text p { margin: 0 0 12px; font-size: .78125rem; line-height: 1.6; color: var(--dt-text-3); }
.woocommerce-checkout .woocommerce-privacy-policy-text a,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a { color: var(--dt-black); font-weight: 700; }

/* Notes above the form. */
.dt-shop__acct {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px;
  padding: 15px 18px; border-radius: 14px; background: var(--dt-paper);
  border: 1px dashed var(--dt-rule); font-size: .84375rem; line-height: 1.6; color: var(--dt-text-3);
}
.dt-shop__acct svg { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 1px; color: var(--dt-accent); }
.dt-shop__legal { margin: 14px 0 0; font-size: .75rem; line-height: 1.6; color: var(--dt-text-3); }
.woocommerce-checkout .dt-shop__legal a { color: var(--dt-black); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.woocommerce-checkout .woocommerce-info,
.woocommerce-cart .woocommerce-info {
  background: var(--dt-paper); border: 1px solid var(--dt-rule); border-radius: 14px;
  padding: 14px 18px; margin: 0 0 12px; color: var(--dt-text-2); font-size: .875rem;
}
.woocommerce-checkout .woocommerce-info::before,
.woocommerce-cart .woocommerce-info::before { display: none; }
.woocommerce-checkout .woocommerce-info a,
.woocommerce-cart .woocommerce-info a {
  color: var(--dt-black); font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
.woocommerce-checkout .woocommerce-info a:hover,
.woocommerce-cart .woocommerce-info a:hover { color: var(--dt-accent); }
.woocommerce-checkout form.checkout_coupon,
.woocommerce-checkout form.woocommerce-form-login {
  border: 1px solid var(--dt-rule); border-radius: 18px; padding: 22px;
  background: var(--dt-paper); margin: 0 0 14px;
}

/* Order review */
.dt-or__list { list-style: none; margin: 0 0 6px; padding: 0; }
.dt-or__i {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 13px; align-items: center;
  margin: 0; padding: 0 0 14px; border-bottom: 1px solid var(--dt-rule);
}
.dt-or__i + .dt-or__i { padding-top: 14px; }
.dt-or__media { width: 62px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: linear-gradient(160deg, #232321, #17171a); display: block; }
.dt-or__media img, .dt-or__media svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt-or__body { min-width: 0; }
.dt-or__t { display: block; font-family: var(--dt-font-body); font-size: .9375rem; font-weight: 700; line-height: 1.3; color: var(--dt-black); margin-bottom: 4px; }
.dt-or__p { font-family: var(--dt-font-display); font-size: 1.0625rem; font-weight: 700; color: var(--dt-black); white-space: nowrap; }
.dt-or__rows { margin: 14px 0 0; }
.dt-or__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 6px 0; }
.dt-or__row dt { margin: 0; font-size: .875rem; font-weight: 600; color: var(--dt-text-2); }
.dt-or__row dd { margin: 0; font-size: .875rem; color: var(--dt-text-2); text-align: right; }
.dt-or__row--cp dd { color: var(--dt-accent); }
.dt-or__tot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--dt-rule);
}
.dt-or__tot > span:first-child { font-size: .9375rem; font-weight: 700; color: var(--dt-black); }
.dt-or__big, .dt-or__big strong, .dt-or__big .amount {
  font-family: var(--dt-font-display); font-size: 1.5rem; font-weight: 700;
  letter-spacing: -.025em; color: var(--dt-black);
}

/* Payment block */
.woocommerce-checkout #payment { background: none !important; border-radius: 0; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--dt-rule); }
.woocommerce-checkout #payment ul.payment_methods { padding: 0; border: 0; margin: 0 0 8px; }
.woocommerce-checkout #payment ul.payment_methods li {
  list-style: none; margin: 0 0 10px; padding: 14px 16px;
  border: 1px solid var(--dt-rule); border-radius: 14px; background: var(--dt-bg-alt);
}
.woocommerce-checkout #payment ul.payment_methods li label {
  display: inline; margin: 0; font-family: var(--dt-font-body); font-size: .9375rem; font-weight: 700; color: var(--dt-black);
}
.woocommerce-checkout #payment div.payment_box { background: none !important; margin: 12px 0 0; padding: 0; font-size: .84375rem; color: var(--dt-text-3); }
.woocommerce-checkout #payment div.payment_box::before { display: none !important; }
.woocommerce-checkout #payment .place-order { padding: 16px 0 0; margin: 0; }
.woocommerce-checkout #place_order {
  width: 100%; min-height: 56px; padding: 16px 26px; border: 0; border-radius: var(--dt-r-full);
  background: var(--dt-accent); color: #fff; cursor: pointer; float: none;
  font-family: var(--dt-font-body); font-size: 1rem; font-weight: 800;
  box-shadow: 0 14px 34px -18px rgba(0,153,51,.9);
  transition: background 180ms var(--dt-ease);
}
.woocommerce-checkout #place_order:hover { background: var(--dt-accent-hover); }

/* Express buttons from Stripe sit above the form. */
#wc-stripe-payment-request-wrapper, .wc-stripe-payment-request-wrapper { margin-bottom: 8px; }
#wc-stripe-payment-request-button-separator { margin: 14px 0 20px !important; color: var(--dt-text-3); font-size: .8125rem; }

/* --------------------------------------------------------------------------
   9. Narrow screens
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .dt-ct, .woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
  .dt-ct__side, .dt-co__side { position: static; grid-column: 1; }
  .dt-co__main { grid-column: 1; }
  .dt-mt__set, .dt-sug__set { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dt-str--empty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .dt-ct__i {
    grid-template-columns: 84px minmax(0, 1fr) 34px;
    gap: 6px 14px; padding: 16px;
  }
  .dt-ct__media { width: 84px; grid-row: 1 / span 2; }
  .dt-ct__body { grid-column: 2; }
  .dt-ct__rm { grid-column: 3; grid-row: 1; align-self: start; }
  .dt-ct__p { grid-column: 2; grid-row: 2; font-size: 1.1875rem; }
  .dt-ct__t { font-size: 1rem; }
  .dt-ct__meta { display: none; }
  .dt-ct__coupon { flex-wrap: wrap; padding: 14px 16px; }
  .woocommerce .dt-ct__code { flex: 1 1 100%; }
  .woocommerce button.dt-ct__apply { flex: 1 1 100%; }
  .dt-mt__set, .dt-sug__set, .dt-str--empty, .dt-str--co { grid-template-columns: 1fr; }
  .dt-sum, .woocommerce-checkout .dt-co__panel { padding: 18px; }
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; }
  .dt-pay { padding: 14px 16px; }
  /* A percentage resolves against the page box, which a page that overflows
     sideways makes wider than the screen. The viewport unit cannot. */
  .dt-dw__panel { width: 100vw; }
}
@media (prefers-reduced-motion: reduce) {
  .dt-dw__panel, .dt-dw__veil, .dt-mt__card, .dt-mt__go svg, .dt-ct__back svg { transition: none !important; }
}

/* The theme gives every list a bottom margin, which opens a seam between the
   item panel and the coupon bar that continues it. */
.woocommerce .dt-ct__list, .woocommerce .dt-or__list, .woocommerce .dt-pay__set,
.woocommerce .dt-mt__set, .woocommerce .dt-sug__set, .woocommerce .dt-str { margin-bottom: 0; }
.woocommerce .dt-ct__list > li, .woocommerce .dt-or__list > li,
.woocommerce .dt-pay__set > li, .woocommerce .dt-str > li { margin-bottom: 0; }
.dt-ct__i:last-child { border-bottom: 0; }
.dt-or__list { margin-bottom: 6px; }
.dt-or__i:last-child { border-bottom: 0; padding-bottom: 0; }
.dt-str { margin-top: 20px; }

/* WooCommerce prints the toggle sentence and its link with no space between
   them, so the question runs straight into the link. */
.woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-form-coupon-toggle .woocommerce-info a { margin-left: .35em; }

/* The drawer prints on wp_footer, outside the .woocommerce wrapper, so every
   rule for it has to be scoped to .dt-dw and nothing else. */
.dt-dwl__body { min-width: 0; }
.dt-dw__sub strong *, .dt-dw__sub .woocommerce-Price-currencySymbol { font-size: inherit; font-weight: inherit; }
.dt-dw__eh {
  font-family: var(--dt-font-display); font-size: 1.25rem; font-weight: 700;
  letter-spacing: -.02em; margin: 0 0 10px; color: var(--dt-black);
}
.dt-dw__es { margin: 0 0 20px; font-size: .9375rem; line-height: 1.6; color: var(--dt-text-3); }
.dt-dw__empty .dt-dw__btn { display: inline-flex; }

/* ==========================================================================
   Checkout, second pass.

   Three things were wrong. The login and coupon prompts were full width
   slabs; the panels had no typographic hierarchy, so every line read at the
   same weight; and the legal small print sat at body size in the wrong
   column. Fixed in that order.
   ========================================================================== */

/* The two prompts, side by side, at the height of a control rather than a
   panel. Their hidden forms drop underneath across both columns. */
.dt-co__gates {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin: 0 0 18px;
}
.woocommerce-checkout .dt-co__gates .woocommerce-form-login-toggle,
.woocommerce-checkout .dt-co__gates .woocommerce-form-coupon-toggle { margin: 0; }
.woocommerce-checkout .dt-co__gates form { grid-column: 1 / -1; margin: 0; }
.woocommerce-checkout .dt-co__gates .woocommerce-info {
  display: flex; align-items: center; gap: 8px;
  min-height: 48px; margin: 0; padding: 12px 18px;
  border-radius: 14px; background: var(--dt-paper); border: 1px solid var(--dt-rule);
  font-size: .84375rem; color: var(--dt-text-3);
  transition: border-color 180ms var(--dt-ease);
}
.woocommerce-checkout .dt-co__gates .woocommerce-info:hover { border-color: var(--dt-grey-mid); }
.woocommerce-checkout .dt-co__gates .woocommerce-info a {
  margin-left: auto; color: var(--dt-accent); font-weight: 700;
  text-decoration: none; white-space: nowrap;
}
.woocommerce-checkout .dt-co__gates .woocommerce-info a:hover { color: var(--dt-black); text-decoration: underline; text-underline-offset: 3px; }

/* The digital download note is context, not an alert. */
.woocommerce-checkout .dt-shop__note {
  margin: 0 0 18px; padding: 13px 18px; border-radius: 14px;
  font-size: .84375rem; line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Panels and hierarchy
   -------------------------------------------------------------------------- */
.woocommerce-checkout .dt-co__panel { padding: 28px; }
.woocommerce-checkout .woocommerce-billing-fields h3 { margin-bottom: 22px; }
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper { gap: 0 16px; }
.woocommerce-checkout .form-row { margin: 0 0 18px; }
.woocommerce-checkout .form-row label { margin-bottom: 8px; font-size: .84375rem; }
.woocommerce-checkout .form-row .description,
.woocommerce-checkout .form-row span.description {
  display: block; margin: 7px 0 0; font-size: .75rem; line-height: 1.5; color: var(--dt-text-3);
}
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout .select2-selection {
  min-height: 54px; border-radius: 13px;
}
.woocommerce-checkout .select2-container .select2-selection--single { height: 54px !important; }
.woocommerce-checkout .select2-selection__rendered { line-height: 28px !important; }
.woocommerce-checkout .select2-selection__arrow { top: 15px !important; }

/* The account row reads as the recommended choice, because it is. */
.woocommerce-checkout .create-account { grid-column: 1 / -1; margin: 4px 0 0; }
.woocommerce-checkout form .form-row.create-account label.woocommerce-form__label-for-checkbox {
  padding: 15px 17px; border-radius: 14px;
  border-color: rgba(0,153,51,.28); background: var(--dt-green-wash, rgba(0,153,51,.05));
  font-size: .875rem; font-weight: 700; color: var(--dt-black);
}
.dt-co__note {
  grid-column: 1 / -1;
  margin: 10px 2px 0; font-size: .75rem; line-height: 1.6; color: var(--dt-text-3);
}
.woocommerce-checkout .woocommerce-account-fields { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   Order panel
   -------------------------------------------------------------------------- */
.woocommerce-checkout .dt-co__h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.dt-or__i { padding-bottom: 16px; }
.dt-or__i + .dt-or__i { padding-top: 16px; }
.dt-or__rows { margin-top: 16px; }

/* The payment area, including the placeholder that stands in until the
   gateway keys are live. */
.woocommerce-checkout #payment .woocommerce-notice--info,
.woocommerce-checkout #payment ul.payment_methods li.woocommerce-info,
.woocommerce-checkout #payment > .woocommerce-info {
  display: block; margin: 0; padding: 16px 18px; border-radius: 14px;
  background: var(--dt-bg-alt); border: 1px dashed var(--dt-rule);
  font-size: .8125rem; line-height: 1.6; color: var(--dt-text-3);
}
.woocommerce-checkout #payment { padding-top: 18px; margin-top: 18px; }

/* Consent. Small print, but never so small it cannot be read. */
.woocommerce-checkout .woocommerce-privacy-policy-text { margin-top: 14px; }
.woocommerce-checkout .woocommerce-privacy-policy-text p { font-size: .71875rem; line-height: 1.65; }
.woocommerce-checkout form .form-row label.woocommerce-form__label-for-checkbox,
.woocommerce-checkout form .form-row label.woocommerce-form__label-for-checkbox.inline {
  padding: 12px 14px; font-size: .75rem; line-height: 1.6; font-weight: 500; color: var(--dt-text-3);
}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper a,
.woocommerce-checkout .dt-digital-consent a { color: var(--dt-text-2); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row,
.woocommerce-checkout .dt-digital-consent .form-row { margin-bottom: 8px; }
.woocommerce-checkout .dt-digital-consent { margin-bottom: 4px; }
.woocommerce-checkout abbr.required { border: 0; text-decoration: none; }

/* The button, and the sentence that follows it. */
.woocommerce-checkout #payment .place-order { padding-top: 14px; }
.woocommerce-checkout #place_order { letter-spacing: -.005em; }
.woocommerce-checkout .dt-shop__legal {
  margin: 14px 0 0; font-size: .71875rem; line-height: 1.65; color: var(--dt-text-3); text-align: center;
}
.woocommerce-checkout .dt-shop__legal a { font-weight: 600; }

/* --------------------------------------------------------------------------
   Trust and marks, quieter than the form they sit under
   -------------------------------------------------------------------------- */
.dt-str--co { padding: 22px 24px; gap: 18px 24px; }
.dt-pay { margin-top: 14px; padding: 18px 22px; }
.dt-pay__set { gap: 9px; }
.dt-mk { width: 46px; height: 30px; }
.dt-pay__n { font-size: .71875rem; }

@media (max-width: 720px) {
  .dt-co__gates { grid-template-columns: 1fr; }
  .woocommerce-checkout .dt-co__panel { padding: 20px; }
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper { gap: 0; }
}

/* ==========================================================================
   My account.

   This is where a buyer comes back for the files in a year, so it gets the
   same treatment as the checkout rather than WooCommerce's default blue.
   ========================================================================== */
.woocommerce-account .woocommerce { max-width: none; }

/* Signed out: two panels, side by side. */
.woocommerce-account .u-columns.col2-set {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 30px); width: 100%;
}
.woocommerce-account .u-columns .col-1,
.woocommerce-account .u-columns .col-2 { width: 100%; float: none; margin: 0; }
.woocommerce-account .u-columns h2 {
  font-family: var(--dt-font-body); font-size: .75rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dt-text-3);
  margin: 0 0 14px;
}
.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register {
  margin: 0; padding: 28px; border-radius: 20px;
  background: var(--dt-paper); border: 1px solid var(--dt-rule);
}
.woocommerce-account .woocommerce-form-row { margin: 0 0 18px; }
.woocommerce-account .woocommerce-form-row label,
.woocommerce-account .form-row label {
  display: block; margin-bottom: 8px; font-family: var(--dt-font-body);
  font-size: .84375rem; font-weight: 700; color: var(--dt-black);
}
.woocommerce-account .form-row .required,
.woocommerce-account abbr.required { color: var(--dt-accent); border: 0; text-decoration: none; }
.woocommerce-account input.input-text,
.woocommerce-account input[type="password"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="text"] {
  width: 100%; min-height: 54px; padding: 13px 16px;
  border: 1px solid var(--dt-rule); border-radius: 13px;
  background: var(--dt-bg-alt); font-family: var(--dt-font-body);
  font-size: .9375rem; color: var(--dt-black);
  transition: border-color 180ms var(--dt-ease), background 180ms var(--dt-ease);
}
.woocommerce-account input.input-text:focus { outline: none; border-color: var(--dt-black); background: var(--dt-paper); }
.woocommerce-account .woocommerce-form__label-for-checkbox {
  display: flex; align-items: center; gap: 9px; margin: 0 0 16px;
  font-size: .8125rem; font-weight: 600; color: var(--dt-text-3); cursor: pointer;
}
.woocommerce-account input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: var(--dt-accent); }
.woocommerce-account .woocommerce-privacy-policy-text p,
.woocommerce-account .woocommerce-form-register p:not(.woocommerce-form-row):not(.form-row) {
  font-size: .78125rem; line-height: 1.6; color: var(--dt-text-3);
}
.woocommerce-account .woocommerce-privacy-policy-text a,
.woocommerce-account .woocommerce-LostPassword a { color: var(--dt-black); font-weight: 600; }
.woocommerce-account .woocommerce-LostPassword { margin: 14px 0 0; font-size: .8125rem; }

/* Buttons, everywhere in the account. */
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce a.button,
.woocommerce-account .woocommerce input.button,
.woocommerce-account .woocommerce button.woocommerce-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 14px 28px; border: 0; border-radius: var(--dt-r-full);
  background: var(--dt-accent); color: #fff; cursor: pointer; text-decoration: none;
  font-family: var(--dt-font-body); font-size: .9375rem; font-weight: 800;
  transition: background 180ms var(--dt-ease);
}
.woocommerce-account .woocommerce button.button:hover,
.woocommerce-account .woocommerce a.button:hover,
.woocommerce-account .woocommerce input.button:hover { background: var(--dt-accent-hover); color: #fff; }

/* Signed in: the rail and the panel beside it. */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content { width: 100%; float: none; }
.woocommerce-account.logged-in .woocommerce {
  display: grid; grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 32px); align-items: start;
}
.woocommerce-MyAccount-navigation ul {
  list-style: none; margin: 0; padding: 10px; display: grid; gap: 2px;
  background: var(--dt-paper); border: 1px solid var(--dt-rule); border-radius: 18px;
}
.woocommerce-MyAccount-navigation li { margin: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block; padding: 11px 15px; border-radius: 12px;
  font-family: var(--dt-font-body); font-size: .875rem; font-weight: 700;
  color: var(--dt-text-2); text-decoration: none;
  transition: background 160ms var(--dt-ease), color 160ms var(--dt-ease);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--dt-bg-alt); color: var(--dt-black); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--dt-black); color: #fff; }
.woocommerce-MyAccount-content {
  padding: 28px; border-radius: 20px;
  background: var(--dt-paper); border: 1px solid var(--dt-rule);
}
.woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
.woocommerce-MyAccount-content h2, .woocommerce-MyAccount-content h3 {
  font-family: var(--dt-font-body); font-size: .75rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dt-text-3);
  margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid var(--dt-rule);
}

/* Tables: orders and downloads. */
.woocommerce-account table.shop_table {
  width: 100%; border: 0; border-collapse: collapse; margin: 0;
}
.woocommerce-account table.shop_table thead th {
  border: 0; border-bottom: 1px solid var(--dt-rule); padding: 0 12px 12px 0;
  font-family: var(--dt-font-body); font-size: .6875rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dt-text-3); text-align: left;
}
.woocommerce-account table.shop_table tbody td {
  border: 0; border-bottom: 1px solid var(--dt-rule); padding: 15px 12px 15px 0;
  font-size: .875rem; color: var(--dt-text-2); background: none;
}
.woocommerce-account table.shop_table tbody tr:last-child td { border-bottom: 0; }
.woocommerce-account table.shop_table td.download-product a,
.woocommerce-account table.shop_table td.woocommerce-orders-table__cell-order-number a {
  font-weight: 700; color: var(--dt-black); text-decoration: none;
}
.woocommerce-account table.shop_table td.download-product a:hover { color: var(--dt-accent); }
.woocommerce-account table.shop_table td.download-file a.button,
.woocommerce-account table.shop_table td.woocommerce-orders-table__cell-order-actions a.button {
  min-height: 40px; padding: 9px 20px; font-size: .8125rem;
}
.woocommerce-account .woocommerce-Message,
.woocommerce-account .woocommerce-info {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  padding: 18px 20px; margin: 0 0 18px; border-radius: 16px;
  background: var(--dt-bg-alt); border: 1px solid var(--dt-rule);
  font-size: .9375rem; color: var(--dt-text-2);
}
.woocommerce-account .woocommerce-Message::before,
.woocommerce-account .woocommerce-info::before { display: none; }
.woocommerce-account .woocommerce-Message a.button { margin-left: auto; }

@media (max-width: 900px) {
  .woocommerce-account .u-columns.col2-set { grid-template-columns: 1fr; }
  .woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; }
  .woocommerce-MyAccount-navigation ul { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
  .woocommerce-account form.woocommerce-form-login,
  .woocommerce-account form.woocommerce-form-register,
  .woocommerce-MyAccount-content { padding: 20px; }
  .woocommerce-account table.shop_table thead { display: none; }
  .woocommerce-account table.shop_table tbody tr {
    display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--dt-rule);
  }
  .woocommerce-account table.shop_table tbody td { border: 0; padding: 0; }
  .woocommerce-account table.shop_table tbody td::before {
    content: attr(data-title) ": "; font-weight: 700; color: var(--dt-text-3);
  }
  .woocommerce-account table.shop_table tbody td.download-file::before,
  .woocommerce-account table.shop_table tbody td.woocommerce-orders-table__cell-order-actions::before { content: none; }
}

/* The float clearfix pseudo-elements on these wrappers become grid items the
   moment the wrapper is a grid, which pushes the first real column into the
   second track and the second column onto a new row. */
.woocommerce-account .u-columns.col2-set::before,
.woocommerce-account .u-columns.col2-set::after,
.woocommerce-account.logged-in .woocommerce::before,
.woocommerce-account.logged-in .woocommerce::after,
.woocommerce-cart .dt-ct::before, .woocommerce-cart .dt-ct::after,
.woocommerce-checkout form.checkout::before, .woocommerce-checkout form.checkout::after { display: none; }

/* Core sizes .form-row-first and .form-row-last at 47% with a selector that
   includes the form element, so it outranks a two-class reset. Inside a grid
   that leaves each field at 47% of a track it should fill. */
.woocommerce-checkout form.checkout .form-row-first,
.woocommerce-checkout form.checkout .form-row-last,
.woocommerce-checkout form.checkout .form-row-wide,
.woocommerce-account form .form-row-first,
.woocommerce-account form .form-row-last { width: auto; float: none; }


/* ==========================================================================
   Phone checkout: the order, collapsed, at the top.
   ========================================================================== */
.dt-msum { display: none; }
.dt-msum__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; margin: 0; padding: 15px 18px;
  border: 1px solid var(--dt-rule); border-radius: 16px;
  background: var(--dt-paper); cursor: pointer; text-align: left;
}
.dt-msum__lbl {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--dt-font-body); font-size: .875rem; font-weight: 700; color: var(--dt-black);
}
.dt-msum__lbl svg { width: 15px; height: 15px; color: var(--dt-text-3); transition: transform 280ms var(--dt-ease); }
.dt-msum__bar[aria-expanded="true"] .dt-msum__lbl svg { transform: rotate(180deg); }
.dt-msum__tot, .dt-msum__tot .amount {
  font-family: var(--dt-font-display); font-size: 1.25rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--dt-black);
}
.dt-msum__wrap {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 340ms cubic-bezier(.4,0,.2,1);
}
.dt-msum__wrap.is-open { grid-template-rows: 1fr; }
.dt-msum__in { overflow: hidden; min-height: 0; }
.woocommerce .dt-msum__list {
  list-style: none; margin: 0; padding: 14px 4px 0;
}
.dt-msum__i {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--dt-rule);
}
.dt-msum__i:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.dt-msum__media {
  width: 54px; aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden;
  background: linear-gradient(160deg, #232321, #17171a); display: block;
}
.dt-msum__media img, .dt-msum__media svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt-msum__b { min-width: 0; }
.dt-msum__n {
  display: block; font-family: var(--dt-font-body); font-size: .875rem;
  font-weight: 700; line-height: 1.3; color: var(--dt-black); margin-bottom: 3px;
}
.dt-msum__p { font-family: var(--dt-font-display); font-size: 1rem; font-weight: 700; color: var(--dt-black); }
.dt-msum__note { margin: 12px 4px 0; font-size: .75rem; line-height: 1.55; color: var(--dt-text-3); }

/* ==========================================================================
   Payment rows: the marks sit on the choice, the way a card row reads
   everywhere else.
   ========================================================================== */
.woocommerce-checkout #payment ul.payment_methods li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--dt-accent);
}
.woocommerce-checkout #payment ul.payment_methods li label { flex: 1 1 auto; margin: 0; cursor: pointer; }
.dt-gw__marks { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; }
.dt-gw__marks .dt-mk { width: 34px; height: 22px; }
.woocommerce-checkout #payment ul.payment_methods li img { max-height: 22px; width: auto; margin: 0 0 0 4px; }
.woocommerce-checkout #payment div.payment_box { flex: 1 1 100%; }
.woocommerce-checkout #payment ul.payment_methods li.is-selected,
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
  border-color: var(--dt-accent); background: var(--dt-green-wash, rgba(0,153,51,.05));
}

/* Stripe's express buttons, when the keys are live, lead the panel. */
.woocommerce-checkout #wc-stripe-payment-request-wrapper,
.woocommerce-checkout .wc-stripe-payment-request-wrapper { margin: 0 0 6px; }
.woocommerce-checkout #wc-stripe-payment-request-button-separator {
  margin: 4px 0 16px !important; font-size: .75rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--dt-text-3); text-align: center;
}

@media (max-width: 1080px) {
  .dt-msum { display: block; margin: 0 0 16px; }
}
@media (max-width: 720px) {
  .dt-msum__bar { padding: 14px 16px; }
  .dt-msum__tot, .dt-msum__tot .amount { font-size: 1.125rem; }
}


/* ==========================================================================
   Checkout, third pass.

   Payment moved into the wide column. Stripe's element is a form in its own
   right; nesting it inside a panel inside a 400px rail was what made the old
   page feel packed. The summary keeps the rail, and the discount code sits
   inside it, next to the total it changes.
   ========================================================================== */

/* The login prompt is on its own now the coupon lives in the summary. */
.dt-co__gates { grid-template-columns: minmax(0, 1fr); max-width: 520px; }

/* --------------------------------------------------------------------------
   Payment panel
   -------------------------------------------------------------------------- */
.dt-co__pay { margin-top: 16px; }
.woocommerce-checkout .dt-co__ph {
  font-family: var(--dt-font-body); font-size: .75rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dt-text-3);
  margin: 0 0 18px; padding: 0 0 14px; border-bottom: 1px solid var(--dt-rule);
}
.woocommerce-checkout .dt-co__pay #payment {
  background: none !important; border: 0; margin: 0; padding: 0;
}
.woocommerce-checkout .dt-co__pay #payment ul.payment_methods { margin: 0; padding: 0; border: 0; }

/* One gateway means the radio is noise: the row is a heading, not a choice. */
.woocommerce-checkout #payment ul.payment_methods li:only-child { border: 0; background: none; padding: 0; margin: 0; }
.woocommerce-checkout #payment ul.payment_methods li:only-child > input[type="radio"] { display: none; }
.woocommerce-checkout #payment ul.payment_methods li:only-child > label {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 14px 16px; border: 1px solid var(--dt-rule); border-radius: 14px 14px 0 0;
  background: var(--dt-bg-alt); font-size: .9375rem; font-weight: 700; color: var(--dt-black);
}
.woocommerce-checkout #payment ul.payment_methods li:only-child > label .dt-gw__marks { margin-left: auto; }
.woocommerce-checkout #payment ul.payment_methods li:only-child > .payment_box {
  margin: 0; padding: 20px 18px; border: 1px solid var(--dt-rule); border-top: 0;
  border-radius: 0 0 14px 14px; background: var(--dt-paper);
}
.woocommerce-checkout #payment ul.payment_methods li:only-child > .payment_box > p:first-child {
  margin: 0 0 16px; font-size: .8125rem; line-height: 1.6; color: var(--dt-text-3);
}

/* Two or more gateways: rows that open, the way people expect a card list. */
.woocommerce-checkout #payment ul.payment_methods li:not(:only-child) {
  border-radius: 14px; margin-bottom: 10px; background: var(--dt-paper);
}

/* Stripe's own element: let it breathe, and stop our panel styling doubling
   the boxes it already draws. */
.woocommerce-checkout .wc-stripe-upe-element,
.woocommerce-checkout #wc-stripe-upe-element,
.woocommerce-checkout .wc-stripe-elements-field {
  margin: 0; padding: 0; border: 0; background: none; min-height: 0;
}
.woocommerce-checkout #payment .payment_box::before { display: none !important; }
.woocommerce-checkout #payment .wc-stripe-error, .woocommerce-checkout .woocommerce-SavedPaymentMethods { margin: 12px 0 0; }

/* Express buttons lead the panel, the way "instant pay" reads elsewhere. */
.woocommerce-checkout #wc-stripe-payment-request-wrapper,
.woocommerce-checkout .wc-stripe-payment-request-wrapper { margin: 0 0 10px; }
.woocommerce-checkout #wc-stripe-payment-request-button-separator {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 18px !important; padding: 0;
  font-size: .6875rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dt-text-3);
}
.woocommerce-checkout #wc-stripe-payment-request-button-separator::before,
.woocommerce-checkout #wc-stripe-payment-request-button-separator::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--dt-rule);
}

/* Consent and the button, now at the foot of the payment panel. */
.woocommerce-checkout .dt-co__pay .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout .dt-co__pay .dt-digital-consent { margin-top: 16px; }
.woocommerce-checkout .dt-co__pay #place_order { margin-top: 4px; }
.woocommerce-checkout .dt-co__pay .dt-shop__legal { text-align: left; }

/* --------------------------------------------------------------------------
   Order summary: the code goes where the total is
   -------------------------------------------------------------------------- */
.dt-cpn { margin: 4px 0 0; border-top: 1px solid var(--dt-rule); }
.dt-cpn__t {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 14px 0; margin: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--dt-font-body); font-size: .84375rem; font-weight: 700; color: var(--dt-black);
  text-align: left;
}
.dt-cpn__t:hover { color: var(--dt-accent); }
.dt-cpn__t svg { width: 14px; height: 14px; color: var(--dt-text-3); transition: transform 260ms var(--dt-ease); }
.dt-cpn__t[aria-expanded="true"] svg { transform: rotate(180deg); }
.dt-cpn__wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms cubic-bezier(.4,0,.2,1); }
.dt-cpn__wrap.is-open { grid-template-rows: 1fr; }
.dt-cpn__in { overflow: hidden; min-height: 0; }
.dt-cpn__row { display: flex; gap: 8px; padding: 0 0 14px; }
.woocommerce-checkout input.dt-cpn__code {
  flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 12px 15px;
  border: 1px solid var(--dt-rule) !important; border-radius: 12px;
  background: var(--dt-bg-alt); font-family: var(--dt-font-body); font-size: .875rem;
}
.dt-cpn__go {
  flex: 0 0 auto; min-height: 46px; padding: 12px 20px; border: 0; border-radius: 12px;
  background: var(--dt-black); color: #fff; cursor: pointer;
  font-family: var(--dt-font-body); font-size: .875rem; font-weight: 700;
  transition: background 180ms var(--dt-ease);
}
.dt-cpn__go:hover { background: var(--dt-accent); }
.dt-cpn__go:disabled { opacity: .6; cursor: default; }
.dt-cpn__msg { margin: 0 0 14px; font-size: .78125rem; line-height: 1.5; }
.dt-cpn__msg.is-bad { color: #b3261e; }
.dt-cpn__msg.is-ok { color: var(--dt-accent); }

.dt-or__m { display: block; margin-top: 4px; font-size: .71875rem; line-height: 1.5; color: var(--dt-text-3); }
.woocommerce .dt-or__str {
  list-style: none; margin: 16px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--dt-rule); display: grid; gap: 8px;
}
.woocommerce .dt-or__str li {
  position: relative; margin: 0; padding-left: 22px;
  font-size: .75rem; line-height: 1.5; color: var(--dt-text-3);
}
.dt-or__str li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--dt-accent); opacity: .16;
}
.dt-or__str li::after {
  content: ""; position: absolute; left: 4px; top: 7px; width: 5px; height: 2.5px;
  border-left: 2px solid var(--dt-accent); border-bottom: 2px solid var(--dt-accent);
  transform: rotate(-45deg);
}

/* The password field the account needs. */
.woocommerce-checkout .woocommerce-account-fields .create-account > .form-row { grid-column: 1 / -1; margin-top: 14px; }
.woocommerce-checkout #account_password_field { grid-column: 1 / -1; }

@media (max-width: 1080px) {
  .dt-co__gates { max-width: none; }
}
@media (max-width: 720px) {
  .woocommerce-checkout #payment ul.payment_methods li:only-child > .payment_box { padding: 16px 14px; }
  .dt-cpn__row { flex-wrap: wrap; }
  .woocommerce-checkout input.dt-cpn__code, .dt-cpn__go { flex: 1 1 100%; }
}

/* UPE writes its own generic label and ignores both the title setting and
   the gateway filters, so the panel heading carries the name and the marks
   instead, and the row label is hidden. */
.woocommerce-checkout .dt-co__ph { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.woocommerce-checkout .dt-co__ph .dt-gw__marks { margin: 0; }
.woocommerce-checkout .dt-co__ph .dt-mk { width: 34px; height: 22px; }
.woocommerce-checkout #payment ul.payment_methods li:only-child > label { display: none; }
.woocommerce-checkout #payment ul.payment_methods li:only-child > .payment_box { border-radius: 14px; border-top: 1px solid var(--dt-rule); }


/* ==========================================================================
   Checkout, fourth pass: three grid children.

   Column one carries the details and then the payment panel; column two holds
   the summary across both rows. On a phone the grid collapses and the DOM
   order does the rest, which puts the summary between the details and the
   payment instead of below the pay button.
   ========================================================================== */
.woocommerce-checkout form.checkout { align-items: start; }
.dt-co__main { grid-column: 1; grid-row: 1; }
.dt-co__payw { grid-column: 1; grid-row: 2; min-width: 0; }
.dt-co__side { grid-column: 2; grid-row: 1 / span 2; }
.dt-co__pay { margin-top: 16px; }

/* The collapsed bar is a phone control; the wide layout uses the heading. */
.dt-co__sumbar { display: none; }
.dt-co__sumwrap { display: block; }
.dt-co__sumin { min-height: 0; }

@media (max-width: 1080px) {
  .dt-co__main, .dt-co__payw, .dt-co__side { grid-column: 1; grid-row: auto; }
  .dt-co__side { position: static; }
  .woocommerce-checkout h2#order_review_heading { display: none; }

  .dt-co__sumbar {
    display: flex; align-items: center; gap: 12px; width: 100%;
    margin: 0; padding: 15px 18px; text-align: left; cursor: pointer;
    border: 1px solid var(--dt-rule); border-radius: 16px; background: var(--dt-paper);
  }
  .dt-co__sumlbl {
    font-family: var(--dt-font-body); font-size: .875rem; font-weight: 700; color: var(--dt-black);
  }
  .dt-co__sumtot, .dt-co__sumtot .amount {
    margin-left: auto; font-family: var(--dt-font-display); font-size: 1.1875rem;
    font-weight: 700; letter-spacing: -.02em; color: var(--dt-black);
  }
  .dt-co__sumbar svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--dt-text-3); transition: transform 280ms var(--dt-ease); }
  .dt-co__sumbar[aria-expanded="true"] svg { transform: rotate(180deg); }

  .dt-co__sumwrap {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 320ms cubic-bezier(.4,0,.2,1);
  }
  .dt-co__sumwrap.is-open { grid-template-rows: 1fr; }
  .dt-co__sumin { overflow: hidden; }
  .woocommerce-checkout .dt-co__sumwrap #order_review { margin-top: 10px; }
}

/* The Stripe element renders in an iframe that can run a hair wide. */
.woocommerce-checkout #payment .payment_box { overflow: hidden; }
.woocommerce-checkout #payment iframe { max-width: 100%; }


/* ==========================================================================
   Checkout, fifth pass.

   The summary heading moved inside its card, so the column is one clean box
   rather than a heading floating above a second outline. The four promises
   and the payment marks follow it down the rail, compact.
   ========================================================================== */

/* --- summary card ------------------------------------------------------- */
.woocommerce-checkout .dt-co__side > .dt-co__sumwrap { margin: 0; }
.woocommerce-checkout #order_review { padding: 22px 24px 24px; }
.woocommerce-checkout h2.dt-or__h,
.woocommerce-checkout #order_review_heading.dt-or__h {
  display: block; width: auto; float: none;
  font-family: var(--dt-font-body); font-size: .6875rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dt-text-3);
  margin: 0 0 16px; padding: 0 0 14px; border: 0;
  border-bottom: 1px solid var(--dt-rule); background: none;
}
.dt-or__list { margin: 0; }
.dt-or__note {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--dt-rule);
  font-size: .75rem; line-height: 1.55; color: var(--dt-text-3);
}
.dt-or__note svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; color: var(--dt-accent); }
.dt-or__note strong { color: var(--dt-black); font-weight: 700; }

/* --- the four promises, compact, under the card ------------------------- */
.woocommerce-checkout .dt-str--co {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px; margin: 14px 0 0; padding: 18px 20px;
  background: var(--dt-paper); border: 1px solid var(--dt-rule); border-radius: 20px;
}
.woocommerce-checkout .dt-str--co li { gap: 10px; }
.woocommerce-checkout .dt-str--co .dt-str__i { width: 30px; height: 30px; border-radius: 9px; }
.woocommerce-checkout .dt-str--co .dt-str__i svg { width: 15px; height: 15px; }
.woocommerce-checkout .dt-str--co .dt-str__b strong { font-size: .8125rem; margin-bottom: 2px; }
.woocommerce-checkout .dt-str--co .dt-str__b span {
  font-size: .71875rem; line-height: 1.45; color: var(--dt-text-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.woocommerce-checkout .dt-co__side .dt-pay { margin-top: 14px; padding: 16px 20px; }
.woocommerce-checkout .dt-co__side .dt-pay__n { margin-top: 10px; }

/* --- the button --------------------------------------------------------- */
.woocommerce-checkout button#place_order.dt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
}
.dt-btn__i {
  position: relative; flex: 0 0 auto;
  width: 27px; height: 27px; border-radius: 50%; overflow: hidden;
  display: inline-grid; place-items: center;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.3), 0 0 14px rgba(125,255,176,.55);
}
.dt-btn__i::before {
  content: ""; position: absolute; inset: -60%;
  background: conic-gradient(from 0deg, #00e050, #b6ffd2, #00993e, #7dffb0, #00e050);
  filter: blur(3px);
  animation: dt-liquid 3.6s linear infinite;
}
.dt-btn__i svg { position: relative; z-index: 1; width: 14px; height: 14px; color: #0b2d16; }
@keyframes dt-liquid { to { transform: rotate(1turn); } }
.dt-btn__t { font-weight: 800; }
.woocommerce-checkout button#place_order.dt-btn:hover .dt-btn__i { box-shadow: 0 0 0 1.5px rgba(255,255,255,.45), 0 0 20px rgba(125,255,176,.8); }

/* --- breathing room around the small print ------------------------------ */
.woocommerce-checkout .dt-co__pay .dt-shop__legal { margin: 18px 0 2px; padding: 0 2px; line-height: 1.7; }
.woocommerce-checkout .dt-co__pay #payment .place-order { padding-top: 18px; }

@media (max-width: 1080px) {
  .woocommerce-checkout h2.dt-or__h { display: none; }
  .woocommerce-checkout .dt-str--co, .woocommerce-checkout .dt-co__side .dt-pay { margin-top: 12px; }
}
@media (max-width: 560px) {
  .woocommerce-checkout .dt-str--co { grid-template-columns: 1fr; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .dt-btn__i::before { animation: none; }
}

/* ==========================================================================
   The pay button's mark.

   Both WooCommerce and the Stripe plugin reset this button's label from its
   data-value attribute, so anything nested inside it is wiped on the first
   totals refresh. The disc and the arrow are drawn on the button's own two
   pseudo-elements, which nothing can overwrite.
   ========================================================================== */
.woocommerce-checkout button#place_order.dt-btn {
  position: relative;
  display: block;
  padding-left: 58px;
  text-align: center;
}
.woocommerce-checkout button#place_order.dt-btn::before {
  content: "";
  position: absolute; left: 20px; top: 50%;
  width: 27px; height: 27px; margin-top: -13.5px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #00e050, #d4ffe6, #00993e, #7dffb0, #00e050);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.32), 0 0 16px rgba(125,255,176,.6);
  animation: dt-liquid 3.6s linear infinite;
}
.woocommerce-checkout button#place_order.dt-btn::after {
  content: "";
  position: absolute; left: 26.5px; top: 50%;
  width: 14px; height: 14px; margin-top: -7px;
  background: #0b2d16;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='m7.5 11 4.5 4.5 4.5-4.5'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='m7.5 11 4.5 4.5 4.5-4.5'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.woocommerce-checkout button#place_order.dt-btn:hover::before {
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.5), 0 0 22px rgba(125,255,176,.85);
}
@keyframes dt-liquid { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .woocommerce-checkout button#place_order.dt-btn::before { animation: none; }
}

/* Astra paints a 2px box and heavy padding on #order_review_heading with
   !important, which drew a second outline on top of the summary card. */
.woocommerce-checkout #order_review_heading.dt-or__h {
  border: 0 !important; border-bottom: 1px solid var(--dt-rule) !important;
  padding: 0 0 14px !important; margin: 0 0 16px !important; background: none !important;
}

/* ==========================================================================
   Quick corrections.
   ========================================================================== */

/* Astra paints a background on every button:hover, which turned the discount
   toggle into a blue bar. Our bare buttons stay bare. */
.woocommerce-checkout button.dt-cpn__t,
.woocommerce-checkout button.dt-cpn__t:hover,
.woocommerce-checkout button.dt-cpn__t:focus,
.woocommerce-checkout button.dt-cpn__t:active,
.woocommerce-checkout button.dt-co__sumbar:hover,
.woocommerce-checkout button.dt-co__sumbar:focus,
.woocommerce-checkout button.dt-co__sumbar:active {
  background-color: transparent;
  box-shadow: none;
}
.woocommerce-checkout button.dt-co__sumbar,
.woocommerce-checkout button.dt-co__sumbar:hover { background-color: var(--dt-paper); }
.woocommerce-checkout button.dt-cpn__t:focus-visible,
.woocommerce-checkout button.dt-co__sumbar:focus-visible {
  outline: 2px solid var(--dt-accent); outline-offset: 3px; border-radius: 8px;
}
.dt-cpn__t:hover span:first-child { color: var(--dt-accent); }

/* iOS zooms the page whenever a focused field is under 16px. Nothing else
   stops it, and blocking pinch zoom in the viewport tag is not an option. */
@media (max-width: 900px) {
  .woocommerce input.input-text,
  .woocommerce textarea,
  .woocommerce select,
  .woocommerce input[type="text"],
  .woocommerce input[type="email"],
  .woocommerce input[type="tel"],
  .woocommerce input[type="password"],
  .woocommerce input[type="number"],
  .woocommerce .select2-selection,
  .woocommerce .select2-search__field,
  .select2-container .select2-search__field,
  .dt-cpn__code, .dt-ct__code {
    font-size: 16px !important;
  }
  .woocommerce .select2-selection__rendered { font-size: 16px !important; }
}

/* The cart's lede, under the page title. */
.dt-ct__lede {
  margin: -6px 0 22px; font-size: 1rem; line-height: 1.6; color: var(--dt-text-3);
}

/* ==========================================================================
   Thank you page.
   ========================================================================== */
.dt-ty { max-width: var(--dt-w-wide, 1260px); margin: 0 auto; }
.dt-ty__plain { font-size: 1.0625rem; color: var(--dt-text-2); }

.dt-ty__head { max-width: 62ch; margin: 0 0 clamp(24px, 3vw, 36px); }
.dt-ty__tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin: 0 0 18px; border-radius: 50%;
  background: var(--dt-green-wash, rgba(0,153,51,.08));
  border: 1px solid rgba(0,153,51,.3); color: var(--dt-accent);
}
.dt-ty__tick svg { width: 24px; height: 24px; }
.dt-ty__eyebrow {
  margin: 0 0 8px; font-family: var(--dt-font-body); font-size: .6875rem;
  font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--dt-accent);
}
.dt-ty__h {
  font-family: var(--dt-font-display);
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.08; margin: 0 0 14px; color: var(--dt-black);
}
.dt-ty__s { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--dt-text-3); }
.dt-ty__head--bad .dt-ty__h { color: #b3261e; }

.dt-ty__panel {
  padding: clamp(20px, 2.4vw, 30px); border-radius: 22px;
  background: var(--dt-paper); border: 1px solid var(--dt-rule);
}
.dt-ty__ph {
  font-family: var(--dt-font-body); font-size: .6875rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dt-text-3);
  margin: 0 0 18px; padding: 0 0 14px; border-bottom: 1px solid var(--dt-rule);
}
.dt-ty__files { margin-bottom: 16px; border-color: rgba(0,153,51,.32); }
.dt-ty__cols {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 16px; align-items: start;
}

/* --- files -------------------------------------------------------------- */
.woocommerce .dt-fl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dt-fl__i {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px; align-items: center; margin: 0;
  padding: 14px 16px; border-radius: 16px;
  background: var(--dt-bg-alt); border: 1px solid var(--dt-rule);
}
.dt-fl__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--dt-paper); border: 1px solid rgba(0,153,51,.24); color: var(--dt-accent);
}
.dt-fl__ico svg { width: 20px; height: 20px; }
.dt-fl__b { min-width: 0; }
.dt-fl__n {
  display: block; font-family: var(--dt-font-body); font-size: .9375rem;
  font-weight: 700; line-height: 1.35; color: var(--dt-black); word-break: break-word;
}
.dt-fl__m { display: block; margin-top: 3px; font-size: .75rem; color: var(--dt-text-3); }
.woocommerce a.dt-fl__go {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  min-height: 44px; padding: 12px 22px; border-radius: var(--dt-r-full);
  background: var(--dt-accent); color: #fff; text-decoration: none;
  font-family: var(--dt-font-body); font-size: .875rem; font-weight: 800;
  transition: background 180ms var(--dt-ease);
}
.woocommerce a.dt-fl__go:hover { background: var(--dt-accent-hover); color: #fff; }
.dt-fl__go svg { width: 15px; height: 15px; }
.dt-fl__note { margin: 16px 0 0; font-size: .8125rem; line-height: 1.6; color: var(--dt-text-3); }

/* --- receipt ------------------------------------------------------------ */
.dt-ty__rows { margin: 0 0 18px; }
.dt-ty__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 8px 0;
}
.dt-ty__row dt { margin: 0; font-size: .875rem; color: var(--dt-text-3); }
.dt-ty__row dd { margin: 0; font-size: .875rem; font-weight: 600; color: var(--dt-black); text-align: right; }
.dt-ty__row--tot { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--dt-rule); }
.dt-ty__row--tot dd, .dt-ty__row--tot dd .amount {
  font-family: var(--dt-font-display); font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em;
}
.woocommerce .dt-ty__items { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--dt-rule); display: grid; gap: 12px; }
.dt-ty__items li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 0; }
.dt-ty__im { width: 52px; aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; background: linear-gradient(160deg, #232321, #17171a); display: block; }
.dt-ty__im img, .dt-ty__im svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt-ty__it { font-size: .875rem; font-weight: 700; color: var(--dt-black); }
.dt-ty__ip { font-size: .875rem; color: var(--dt-text-2); white-space: nowrap; }
.dt-ty__fine { margin: 18px 0 0; font-size: .75rem; line-height: 1.6; color: var(--dt-text-3); }

/* --- account ------------------------------------------------------------ */
.dt-ty__p { margin: 0 0 18px; font-size: .9375rem; line-height: 1.65; color: var(--dt-text-2); }
.woocommerce .dt-ty__steps { list-style: none; counter-reset: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.dt-ty__steps li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start;
  margin: 0; font-size: .875rem; line-height: 1.55; color: var(--dt-text-2);
}
.dt-ty__steps li span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--dt-bg-alt); border: 1px solid var(--dt-rule);
  font-family: var(--dt-font-body); font-size: .75rem; font-weight: 800; color: var(--dt-black);
}
.dt-ty__steps li b { color: var(--dt-black); font-weight: 700; }
.dt-ty__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.woocommerce a.dt-ty__go {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 30px; border-radius: var(--dt-r-full);
  background: var(--dt-black); color: #fff; text-decoration: none;
  font-family: var(--dt-font-body); font-size: .9375rem; font-weight: 800;
  transition: background 180ms var(--dt-ease);
}
.woocommerce a.dt-ty__go:hover { background: var(--dt-accent); color: #fff; }
.woocommerce a.dt-ty__alt {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 26px; margin-left: 14px;
  font-family: var(--dt-font-body); font-size: .875rem; font-weight: 700;
  color: var(--dt-text-3); text-decoration: none;
}
.woocommerce a.dt-ty__alt:hover { color: var(--dt-accent); }

@media (max-width: 900px) {
  .dt-ty__cols { grid-template-columns: 1fr; }
  .dt-fl__i { grid-template-columns: 44px minmax(0, 1fr); gap: 12px 14px; }
  .woocommerce a.dt-fl__go { grid-column: 1 / -1; width: 100%; }
  .woocommerce a.dt-ty__go, .woocommerce a.dt-ty__alt { width: 100%; margin-left: 0; }
  .dt-ty__acts { flex-direction: column; }
}

/* The bold words inside a numbered step were becoming a grid item of their
   own, which broke the line into single letters. Take the row out of grid
   and hang the number in the margin instead. */
.woocommerce .dt-ty__steps li { display: block; position: relative; padding-left: 38px; }
.woocommerce .dt-ty__steps li > span { position: absolute; left: 0; top: -1px; }

/* ==========================================================================
   Log in and sign up.

   One card, centred, on a tinted ground. The theme's page title is emptied on
   these two URLs so the card's own heading is the page's single h1.
   ========================================================================== */
.dt-auth-page .site-content { background: var(--dt-green-wash, #f2f8f4); }
.dt-auth-page .entry-header,
.dt-auth-page h1:empty,
.dt-auth-page .entry-title:empty { display: none; }
.dt-auth-page .woocommerce > .woocommerce-notices-wrapper { max-width: 460px; margin: 0 auto; }

.dt-auth {
  max-width: 460px;
  margin: 0 auto;
  padding: clamp(8px, 2vw, 24px) 0 clamp(24px, 4vw, 48px);
}
.dt-auth__card {
  padding: clamp(26px, 3.4vw, 40px);
  border-radius: 22px;
  background: var(--dt-paper);
  border: 1px solid var(--dt-rule);
  box-shadow: 0 24px 60px -40px rgba(24, 23, 22, .35);
}
.dt-auth__h {
  font-family: var(--dt-font-display);
  font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
  margin: 0 0 10px; color: var(--dt-black); text-align: center;
}
.dt-auth__s {
  margin: 0 0 26px; font-size: .875rem; line-height: 1.6;
  color: var(--dt-text-3); text-align: center;
}
.woocommerce .dt-auth__form { margin: 0; border: 0; padding: 0; background: none; }

.dt-auth__row { margin: 0 0 16px; }
.woocommerce .dt-auth__row label {
  display: block; margin: 0 0 7px;
  font-family: var(--dt-font-body); font-size: .8125rem; font-weight: 700; color: var(--dt-black);
}
.dt-auth__opt {
  margin-left: 6px; font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dt-text-3);
}
.woocommerce .dt-auth__row input.input-text,
.woocommerce .dt-auth__row input[type="text"],
.woocommerce .dt-auth__row input[type="email"],
.woocommerce .dt-auth__row input[type="tel"],
.woocommerce .dt-auth__row input[type="password"] {
  width: 100%; min-height: 52px; padding: 13px 16px;
  border: 1px solid var(--dt-rule); border-radius: 13px;
  background: var(--dt-bg-alt);
  font-family: var(--dt-font-body); font-size: .9375rem; color: var(--dt-black);
  transition: border-color 180ms var(--dt-ease), background 180ms var(--dt-ease);
}
.woocommerce .dt-auth__row input:focus {
  outline: none; border-color: var(--dt-black); background: var(--dt-paper);
}
.woocommerce .dt-auth__row input::placeholder { color: #a9a6a0; }

/* WooCommerce wraps password fields to hang its eye button on the end. */
.dt-auth__row .woocommerce-password-hint { display: block; margin-top: 7px; font-size: .75rem; color: var(--dt-text-3); }
.dt-auth__row .password-input { position: relative; display: block; }
.dt-auth .show-password-input {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--dt-text-3); cursor: pointer;
}
.dt-auth .show-password-input::after { font-size: 15px; }

.dt-auth__lost { margin: -6px 0 18px; text-align: right; }
.woocommerce .dt-auth__lost a {
  font-family: var(--dt-font-body); font-size: .8125rem; font-weight: 700;
  color: var(--dt-accent); text-decoration: none;
}
.woocommerce .dt-auth__lost a:hover { color: var(--dt-black); text-decoration: underline; text-underline-offset: 3px; }

.dt-auth__keep, .dt-auth__terms { margin: 0 0 20px; }
.woocommerce .dt-auth__check {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer;
  font-family: var(--dt-font-body); font-size: .8125rem; line-height: 1.55; font-weight: 500;
  color: var(--dt-text-3);
}
.woocommerce .dt-auth__check input[type="checkbox"] {
  flex: 0 0 auto; width: 17px; height: 17px; margin: 1px 0 0;
  accent-color: var(--dt-accent); cursor: pointer;
}
.woocommerce .dt-auth__check a { color: var(--dt-text-2); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.woocommerce .dt-auth__check a:hover { color: var(--dt-accent); }

.dt-auth__go { margin: 0; }
.woocommerce .dt-auth__card button.dt-auth__btn {
  display: block; width: 100%; min-height: 54px; padding: 15px 26px;
  border: 0; border-radius: var(--dt-r-full); cursor: pointer;
  background: var(--dt-accent); color: #fff;
  font-family: var(--dt-font-body); font-size: 1rem; font-weight: 800;
  box-shadow: 0 14px 34px -18px rgba(0, 153, 51, .9);
  transition: background 180ms var(--dt-ease);
}
.woocommerce .dt-auth__card button.dt-auth__btn:hover { background: var(--dt-accent-hover); }

.dt-auth__alt {
  margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--dt-rule);
  text-align: center; font-size: .875rem; color: var(--dt-text-3);
}
.woocommerce .dt-auth__alt a { color: var(--dt-accent); font-weight: 800; text-decoration: none; }
.woocommerce .dt-auth__alt a:hover { color: var(--dt-black); text-decoration: underline; text-underline-offset: 3px; }

.dt-auth__fine {
  margin: 20px auto 0; max-width: 42ch;
  font-size: .75rem; line-height: 1.6; color: var(--dt-text-3); text-align: center;
}

/* The privacy sentence WooCommerce prints inside the register form. */
.dt-auth .woocommerce-privacy-policy-text p {
  margin: 0 0 18px; font-size: .75rem; line-height: 1.6; color: var(--dt-text-3);
}

@media (max-width: 480px) {
  .dt-auth { padding-top: 0; }
  .dt-auth__card { padding: 22px 18px; border-radius: 18px; }
}

/* WooCommerce core boxes form.login and form.register with a border and its
   own padding, at a specificity a two-class reset cannot reach. */
.woocommerce form.dt-auth__form, .woocommerce form.login.dt-auth__form, .woocommerce form.register.dt-auth__form {
  border: 0; padding: 0; margin: 0; background: none; border-radius: 0;
}

/* On a phone the account rail is a scroller, and a grid item keeps a
   min-width of auto, so the row of pills was dragging the whole page
   sideways instead of scrolling inside itself. */
@media (max-width: 900px) {
  .woocommerce-account.logged-in .woocommerce { grid-template-columns: minmax(0, 1fr); }
  .woocommerce-account.logged-in .woocommerce > * { min-width: 0; }
  .woocommerce-MyAccount-navigation { min-width: 0; max-width: 100%; }
  .woocommerce-MyAccount-navigation ul { min-width: 0; scrollbar-width: none; }
  .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
  .woocommerce-MyAccount-content { min-width: 0; overflow-x: auto; }
}