/*
 * EASY THEME CONTROLS
 * Change these variables to recolor the whole calculator.
 */
.dpd-pen-calc{
  --dpd-bg:#050505;
  --dpd-panel:#0b0b0b;
  --dpd-panel-2:#111111;
  --dpd-text:#ffffff;
  --dpd-muted:#a7a7a7;
  --dpd-line:#333333;
  --dpd-input:#151515;
  --dpd-active-bg:#ffffff;
  --dpd-active-text:#000000;
  width:100%;
  max-width:var(--dpd-max-width,560px);
  margin:var(--dpd-top-space,24px) 0 18px;
  color:var(--dpd-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  box-sizing:border-box;
}
.dpd-pen-calc *{box-sizing:border-box}
.dpd-pen-calc__heading{text-align:center;margin-bottom:20px}
.dpd-pen-calc__eyebrow{font-size:10px;font-weight:700;letter-spacing:2.4px;color:var(--dpd-muted);margin-bottom:8px}
.dpd-pen-calc__heading h2{margin:0!important;color:var(--dpd-text)!important;font-size:28px!important;line-height:1.2!important;font-weight:650!important;letter-spacing:-.5px}
.dpd-pen-calc__card{background:var(--dpd-bg);border:1px solid var(--dpd-line);border-radius:22px;padding:24px;box-shadow:0 20px 45px rgba(0,0,0,.16)}
.dpd-pen-calc__label{display:block;font-size:13px;font-weight:550;color:#f3f3f3;margin:0 0 8px}
.dpd-pen-calc__product{font-size:19px;font-weight:600;line-height:1.3;margin-bottom:12px;color:#fff}
.dpd-pen-calc__meta{display:flex;flex-wrap:wrap;gap:4px 6px;padding:12px 14px;margin-bottom:18px;border:1px solid #242424;border-radius:11px;background:var(--dpd-panel-2);font-size:12px;color:#d5d5d5}
.dpd-pen-calc__variation-note{font-size:10px;color:#9c9c9c;margin:-10px 0 16px;padding-left:2px}
.dpd-pen-calc__tabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;margin-bottom:18px;border:1px solid var(--dpd-line);border-radius:13px;background:var(--dpd-panel)}
.dpd-pen-calc button.dpd-pen-calc__tab{appearance:none!important;border:0!important;box-shadow:none!important;background:transparent!important;color:#bdbdbd!important;border-radius:9px!important;padding:12px 8px!important;margin:0!important;font:inherit!important;font-size:14px!important;font-weight:550!important;text-transform:none!important;letter-spacing:0!important;cursor:pointer!important}
.dpd-pen-calc button.dpd-pen-calc__tab.is-active{background:var(--dpd-active-bg)!important;color:var(--dpd-active-text)!important}
.dpd-pen-calc__input-wrap{display:flex;overflow:hidden;margin-bottom:20px;border:1px solid var(--dpd-line);border-radius:13px;background:var(--dpd-input)}
.dpd-pen-calc input.dpd-pen-calc__input{flex:1;min-width:0;width:100%!important;height:auto!important;margin:0!important;padding:14px 15px!important;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;color:#fff!important;font:inherit!important;font-size:16px!important}
.dpd-pen-calc__input-unit{min-width:85px;padding:0 14px;border-left:1px solid var(--dpd-line);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:650}
.dpd-pen-calc__result{overflow:hidden;border:1px solid #343434;border-radius:18px;padding:27px 18px 16px;text-align:center;background:linear-gradient(180deg,#101010 0%,#050505 100%)}
.dpd-pen-calc__result-title{font-size:12px;color:#b7b7b7;margin-bottom:8px;letter-spacing:.3px}
.dpd-pen-calc__big-row{display:flex;align-items:baseline;justify-content:center;gap:7px;color:#fff}
.dpd-pen-calc__big-number{font-size:60px;line-height:1;font-weight:600;letter-spacing:-2px}
.dpd-pen-calc__big-unit{font-size:23px;font-weight:500;color:#d8d8d8}
.dpd-pen-calc__subresult{margin-top:9px;font-size:13px;color:#bcbcbc}
.dpd-pen-calc__pen-wrap{margin:17px auto 0;max-width:700px}
.dpd-pen-calc__pen{display:block;width:100%;height:auto;overflow:visible;user-select:none;-webkit-user-select:none}
.dpd-pen-calc__handle{filter:drop-shadow(0 1px 3px rgba(255,255,255,.13));pointer-events:none}
.dpd-pen-calc__barrel-fill{pointer-events:none;opacity:.92}
.dpd-pen-calc__drag-hint{margin-top:-1px;font-size:10px;color:#888}
.dpd-pen-calc__dose-count{text-align:center;font-size:11px;color:#999;margin-top:15px}
.dpd-pen-calc__dose-count strong{color:#fff}
.dpd-pen-calc__disclaimer{max-width:560px;margin:17px auto 0;text-align:center;font-size:10px;line-height:1.5;color:#868686}
.dpd-pen-calc__ticks text{font-size:11px;fill:#9b9b9b;text-anchor:middle}
.dpd-pen-calc__ticks line{stroke:#777;stroke-width:2}
.dpd-pen-calc__ticks line.minor{stroke:#555;stroke-width:1;opacity:.85}
.dpd-pen-calc__drag-hit:focus{outline:none}
.dpd-pen-calc__drag-hit:focus-visible + *{outline:none}

/* Compact layout for placement beneath Add to cart */
.dpd-pen-calc--compact .dpd-pen-calc__heading{margin-bottom:12px;text-align:left}
.dpd-pen-calc--compact .dpd-pen-calc__eyebrow{font-size:9px;letter-spacing:1.8px;margin-bottom:4px}
.dpd-pen-calc--compact .dpd-pen-calc__heading h2{font-size:20px!important}
.dpd-pen-calc--compact .dpd-pen-calc__card{padding:16px;border-radius:16px}
.dpd-pen-calc--compact .dpd-pen-calc__label{font-size:11px;margin-bottom:5px}
.dpd-pen-calc--compact .dpd-pen-calc__product{font-size:16px;margin-bottom:8px}
.dpd-pen-calc--compact .dpd-pen-calc__meta{font-size:10px;padding:9px 10px;margin-bottom:12px;border-radius:9px}
.dpd-pen-calc--compact .dpd-pen-calc__variation-note{margin:-5px 0 10px;font-size:9px}
.dpd-pen-calc--compact .dpd-pen-calc__tabs{margin-bottom:12px}
.dpd-pen-calc--compact button.dpd-pen-calc__tab{padding:9px 6px!important;font-size:11px!important}
.dpd-pen-calc--compact .dpd-pen-calc__input-wrap{margin-bottom:12px;border-radius:10px}
.dpd-pen-calc--compact input.dpd-pen-calc__input{padding:10px 11px!important;font-size:13px!important}
.dpd-pen-calc--compact .dpd-pen-calc__input-unit{min-width:62px;font-size:11px;padding:0 9px}
.dpd-pen-calc--compact .dpd-pen-calc__result{padding:17px 10px 10px;border-radius:14px}
.dpd-pen-calc--compact .dpd-pen-calc__result-title{font-size:10px;margin-bottom:5px}
.dpd-pen-calc--compact .dpd-pen-calc__big-number{font-size:44px}
.dpd-pen-calc--compact .dpd-pen-calc__big-unit{font-size:17px}
.dpd-pen-calc--compact .dpd-pen-calc__subresult{font-size:10px;margin-top:5px}
.dpd-pen-calc--compact .dpd-pen-calc__pen-wrap{margin-top:8px;max-width:520px}
.dpd-pen-calc--compact .dpd-pen-calc__drag-hint{font-size:9px}
.dpd-pen-calc--compact .dpd-pen-calc__dose-count{margin-top:10px;font-size:10px}
.dpd-pen-calc--compact .dpd-pen-calc__disclaimer{font-size:8px;margin-top:10px;max-width:520px}

@media(max-width:600px){
  .dpd-pen-calc{width:100%;max-width:100%;margin-top:var(--dpd-top-space,20px)}
  .dpd-pen-calc__card{padding:17px 13px;border-radius:17px}
  .dpd-pen-calc__heading h2{font-size:24px!important}
  .dpd-pen-calc__big-number{font-size:50px}
  .dpd-pen-calc__big-unit{font-size:20px}
  .dpd-pen-calc button.dpd-pen-calc__tab{font-size:12px!important}
  .dpd-pen-calc__input-unit{min-width:70px}
  .dpd-pen-calc__result{padding-left:7px;padding-right:7px}
  .dpd-pen-calc__drag-hint{font-size:9px}
}

/* v2.4 — wide bottom split layout: interactive pen/result on the left, controls on the right. */
.dpd-pen-calc--split{
  width:calc(100% - 32px);
  max-width:var(--dpd-max-width,1100px);
  margin:var(--dpd-top-space,60px) auto 26px;
}
.dpd-pen-calc--split .dpd-pen-calc__heading{
  text-align:center;
  margin-bottom:18px;
}
.dpd-pen-calc--split .dpd-pen-calc__card{
  padding:22px;
}
.dpd-pen-calc--split .dpd-pen-calc__layout{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(330px,.7fr);
  gap:26px;
  align-items:stretch;
}
.dpd-pen-calc--split .dpd-pen-calc__visual,
.dpd-pen-calc--split .dpd-pen-calc__controls{
  min-width:0;
}
.dpd-pen-calc--split .dpd-pen-calc__visual{
  display:flex;
  flex-direction:column;
}
.dpd-pen-calc--split .dpd-pen-calc__result{
  flex:1;
  min-height:330px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:24px 18px 16px;
}
.dpd-pen-calc--split .dpd-pen-calc__pen-wrap{
  width:100%;
  max-width:none;
  margin-top:16px;
}
.dpd-pen-calc--split .dpd-pen-calc__controls{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:8px 2px;
}
.dpd-pen-calc--split .dpd-pen-calc__meta{
  margin-bottom:20px;
}
.dpd-pen-calc--split .dpd-pen-calc__tabs{
  margin-bottom:18px;
}
.dpd-pen-calc--split .dpd-pen-calc__input-wrap{
  margin-bottom:0;
}
.dpd-pen-calc--split .dpd-pen-calc__dose-count{
  margin-top:12px;
}
.dpd-pen-calc--split .dpd-pen-calc__disclaimer{
  max-width:900px;
}

/* Compact density still works, but the layout remains side-by-side on desktop. */
.dpd-pen-calc--split.dpd-pen-calc--compact .dpd-pen-calc__heading{
  text-align:center;
  margin-bottom:14px;
}
.dpd-pen-calc--split.dpd-pen-calc--compact .dpd-pen-calc__card{
  padding:18px;
}
.dpd-pen-calc--split.dpd-pen-calc--compact .dpd-pen-calc__layout{
  gap:20px;
}
.dpd-pen-calc--split.dpd-pen-calc--compact .dpd-pen-calc__result{
  min-height:285px;
  padding:18px 12px 10px;
}
.dpd-pen-calc--split.dpd-pen-calc--compact .dpd-pen-calc__pen-wrap{
  max-width:none;
}

@media(max-width:850px){
  .dpd-pen-calc--split{
    width:100%;
    max-width:100%;
  }
  .dpd-pen-calc--split .dpd-pen-calc__layout{
    grid-template-columns:1fr;
    gap:18px;
  }
  .dpd-pen-calc--split .dpd-pen-calc__visual{
    order:2;
  }
  .dpd-pen-calc--split .dpd-pen-calc__controls{
    order:1;
    padding:0;
  }
  .dpd-pen-calc--split .dpd-pen-calc__result{
    min-height:0;
  }
}


/* v2.8 — keep the exact working v2.5 layout while removing the visible title.
   The explicit clear is important: some WooCommerce themes float the product
   gallery/summary, and the old H2 was implicitly clearing those floats. */
.dpd-pen-calc--split{
  clear:both !important;
  float:none !important;
  position:relative;
  display:block;
}
.dpd-pen-calc--split .dpd-pen-calc__heading{
  clear:both !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  visibility:hidden !important;
}
.dpd-pen-calc--split .dpd-pen-calc__heading *{
  margin:0 !important;
  padding:0 !important;
  height:0 !important;
  line-height:0 !important;
}


/* v2.9 — full-width alignment with the WooCommerce product tabs/content.
   Remove the previous 16px side inset and max-width cap so the calculator
   uses the exact available width of the same single-product content area. */
.dpd-pen-calc--split{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
}