/* The basket and the checkout. Plain, quiet, and the same at any width. */
.drx-shop { max-width: 880px; margin: 0 auto; }
.drx-shop h2 { font-size: 1.2rem; margin: 28px 0 6px; }
.drx-shop-note { background: #fcf9e8; border: 1px solid #f0e6b8; border-left: 4px solid #dba617;
  border-radius: 6px; padding: 10px 14px; margin: 0 0 18px; font-size: .95rem; }
.drx-shop-help { color: #5c6167; font-size: .9rem; margin: 4px 0 12px; }
.drx-shop-sub { color: #5c6167; font-size: .85rem; }
.drx-shop-form label { display: block; font-weight: 600; margin: 10px 0 0; font-size: .92rem; }
/* Every box a person types in looks the same: the password box was left out of this list and drew
   itself in the browser's own small style beside styled neighbours. */
.drx-shop-form input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]),
.drx-shop-form select, .drx-shop-form textarea {
  display: block; width: 100%; padding: 10px 11px; margin-top: 5px; border: 1px solid #c9ccd0; border-radius: 6px;
  font: inherit; font-weight: 400; line-height: 1.35; color: #1d2327; background: #fff; box-sizing: border-box; }
.drx-shop-form select { appearance: none; -webkit-appearance: none; padding-right: 34px;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235c6167' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 11px center; }
.drx-shop-form input:focus, .drx-shop-form select:focus, .drx-shop-form textarea:focus { outline: 2px solid #b0673c; outline-offset: 1px; border-color: #b0673c; }
.drx-shop-form input::placeholder, .drx-shop-form textarea::placeholder { color: #8c8f94; font-weight: 400; }
/* the small print under a box, inside its label, in the small print's own weight */
.drx-shop-form label > .drx-shop-sub { display: block; font-weight: 400; margin-top: 4px; }
/* [hidden] must win over the block rule above, or the checkout's password box shows before it is asked for */
.drx-shop [hidden], .drx-shop-form [hidden] { display: none !important; }
.drx-shop-form input[readonly] { background: #f3f4f5; color: #5c6167; }
.drx-shop-button[disabled] { opacity: .55; cursor: default; }
.drx-shop-form input[type=checkbox], .drx-shop-form input[type=radio] { width: 18px; height: 18px; accent-color: #b0673c; }
.drx-shop-form input[type=range] { width: 100%; }
.drx-shop-form input[type=number] { max-width: 220px; }
.drx-shop-form fieldset { border: 0; padding: 0; margin: 10px 0; min-width: 0; }
.drx-shop-form legend { font-weight: 600; font-size: .92rem; padding: 0; margin: 0 0 6px; }
.drx-shop-form button.drx-shop-button, .drx-shop-form a.drx-shop-button { display: inline-block; width: auto; }
.drx-shop-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 16px; }
/* a tick box and its sentence: the rule names the form too, or the bold block-label rule above outranks it */
.drx-shop-check, .drx-shop-form label.drx-shop-check { display: flex; gap: 9px; align-items: flex-start; font-weight: 400; margin: 14px 0; line-height: 1.45; font-size: 1rem; }
.drx-shop-check input { margin-top: 3px; flex: 0 0 auto; }
.drx-shop-button { display: inline-block; margin-top: 16px; padding: 11px 20px; border: 0; border-radius: 6px;
  background: #1d2327; color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.drx-shop-button:hover { background: #2f3439; color: #fff; }
.drx-shop-button-big { padding: 14px 26px; font-size: 1.05rem; }
.drx-shop-link { background: none; border: 0; padding: 0; color: #1d2327; font: inherit;
  text-decoration: underline; cursor: pointer; }
.drx-shop-error { color: #b32d2e; font-weight: 600; margin: 10px 0 0; }
.drx-shop-warn { background: #fcf0f1; border-left: 4px solid #d63638; padding: 10px 14px; border-radius: 0 6px 6px 0; }
/* .drx-shop-warn is for something the reader must do (pay, wait for a call); good news and status lines have their own boxes */
.drx-shop-ok { background: #eef6ee; border-left: 4px solid #2e7d32; padding: 10px 14px; border-radius: 0 6px 6px 0; }
.drx-shop-info { background: #f7f3ec; border-left: 4px solid #b0673c; padding: 10px 14px; border-radius: 0 6px 6px 0; }
.drx-shop-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.drx-shop-table th, .drx-shop-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #e4e6e8; vertical-align: top; }
.drx-shop-table thead th { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: #5c6167; }
.drx-shop-num { text-align: right; font-variant-numeric: tabular-nums; }
.drx-shop-qty { width: 72px; padding: 6px 8px; border: 1px solid #c9ccd0; border-radius: 6px; font: inherit; text-align: right; }
.drx-shop-table tfoot th { font-weight: 600; }
.drx-shop-total th, .drx-shop-total td { font-size: 1.1rem; font-weight: 700; border-top: 2px solid #1d2327; }
@media (max-width: 600px) {
  .drx-shop-table thead { display: none; }
  .drx-shop-table tbody tr, .drx-shop-table tfoot tr { display: grid; grid-template-columns: 1fr auto; padding: 8px 0; }
  .drx-shop-table td, .drx-shop-table th { border: 0; padding: 3px 0; }
  .drx-shop-table tbody td:first-child, .drx-shop-table tfoot th { grid-column: 1; }
  .drx-shop-table tbody tr { border-bottom: 1px solid #e4e6e8; }
}

/* ---- Continue with Google / Facebook (includes/social-login.php) ------------------------------------ */
.drx-shop .drx-login-social { max-width: 460px; margin: 0 0 26px; }
.drx-shop .drx-login-btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 10px 16px;
  margin: 0 0 10px; border: 1px solid #cfd3d8; border-radius: 10px; background: #fff; color: #1f2328; font-weight: 600; font-size: 15px;
  line-height: 1.2; text-decoration: none; box-shadow: 0 1px 2px rgba(20, 20, 20, .05); }
.drx-shop .drx-login-btn:hover, .drx-shop .drx-login-btn:focus-visible { border-color: #9aa1a9; background: #fafaf9; color: #1f2328; text-decoration: none; }
.drx-shop .drx-login-btn svg { flex: none; }
.drx-shop .drx-login-note { margin: 2px 0 14px; font-size: 13px; color: #5c6167; }
.drx-shop .drx-login-or { display: flex; align-items: center; gap: 12px; color: #6b7177; font-size: 13px; }
.drx-shop .drx-login-or::before, .drx-shop .drx-login-or::after { content: ""; flex: 1; height: 1px; background: #e4e6e8; }