/* ==========================================================================
   THE ALIDROPSHIP SHELL — every brittle selector on the site, in one file.

   Two customer-facing pages are rendered by AliDropship, not by this theme:
   the standalone login at /userlogin/ and the cart/checkout at /cart/. Their
   markup and their CSS are the plugin's, and the plugin is ionCube-encoded, so
   neither can be edited. Left alone they were the loudest breaks in the design
   system:

     login "Log in"          #444 grey, 3px radius, bold, 40px fixed height
     login inputs            square, #dfdfdf hairline, 14px, grey label
     checkout "Continue"     #ff8d38 ORANGE — the single most important
                             commerce button on the site, in a colour that
                             appears nowhere else in the brand
     checkout steps          #2a7bae blue links
     checkout fields         3px radius, #bdbdbd border, 40px min-height

   WHY THIS FILE EXISTS SEPARATELY

   Everything here targets class names owned by somebody else's plugin. They
   can change in any AliDropship update without notice, and when they do these
   rules stop applying — the pages revert to the plugin's own look, which is
   ugly but not broken. Keeping them in one quarantined file means that risk is
   inspectable in one place, and a maintainer diagnosing "the checkout button
   went orange again" has exactly one file to open.

   Nothing in this file invents a value. Every colour, radius, weight and
   duration comes from tokens.css, so the shell moves with the system rather
   than being a second design system that happens to look similar today.

   ==========================================================================
   THREE THINGS THAT MUST NOT BE TOUCHED, AND WHY
   ==========================================================================

   1. THE SMARTLABEL HORIZONTAL PADDING.
      AliDropship floats the <label> over the input:
          .smartlabel div label   { position: absolute; left: 15px; }
          .smartlabel div > input { padding: 0 14px; }
      14px of padding plus a 1px border is the 15px the label sits at. Change
      the input's left padding and every placeholder on the login page comes
      unstuck from its field. Vertical padding is equally load-bearing — the
      filled state sets `padding-top: 10px; padding-bottom: 0` to make room for
      the shrunken label. So this file changes the SURFACE of those inputs and
      never their box.

   2. THE CHECKOUT FIELD PADDINGS, for the same reason:
          .checkout-main .field       { padding: 0 8px; }
          .checkout-main .field input { padding: 17px 26px 0 0; }
          .checkout-main .field label { left: 2px; padding: 0 8px; }
      The label transform (`scale(.75) translateY(-12px)`) is calibrated to
      those numbers.

   3. ANYTHING THE PLUGIN'S JAVASCRIPT READS.
      .is-focus, .is-not-empty, .error-empty, .js-valid, .current, .active and
      .move-step are set and read by their scripts. They are styled here and
      never renamed, reordered or removed.

   ========================================================================== */

/* ==========================================================================
   1. THE STANDALONE LOGIN  —  /userlogin/
   Scoped to .wrapper, which is AliDropship's own page container, so none of
   this can reach a theme surface.
   ========================================================================== */

/*
 * CLEARING THE APPLICATION BAR.
 *
 * The theme's nav is position:fixed and AliDropship's login page starts its
 * content at the top of the document, so "Returning customer" was rendering
 * UNDER the bar — the heading half-hidden behind the logo at every width. It
 * predates this pass and is not caused by it; it is fixed here because this is
 * the file that owns how their page sits inside our chrome.
 *
 * --ka-nav-clear is the theme's own measurement of that bar, so the two cannot
 * drift apart.
 */
/* .halfer.complexlogin is what the page actually renders. .loginpage_cont
 * exists in account.css and is NOT in this markup — targeting it produced a
 * rule that matched nothing and a heading that stayed under the bar through
 * two deploys. Both are listed so the file keeps working if a future release
 * switches back. */
.wrapper .complexlogin,
.wrapper .register_cont,
.wrapper .loginpage_cont,
.wrapper .content-userlogin {
  padding-top: var(--ka-nav-clear, 92px);
  background: hsl(var(--ka-background));
  color: hsl(var(--ka-foreground));
  font-family: var(--ka-font-body);
}
/* No mobile override: --ka-nav-clear already steps down to 82px at 760px in
   experience.css, so the clearance follows the bar it is clearing. A literal
   here would be a second measurement of the same thing, and the first one to
   go stale. */

/* The two columns become panels rather than halves of a bare page. The rule
   between them was a hard 1px at full strength; a warm hairline is the
   language the rest of the site separates things with. */
.wrapper .complexlogin > div,
.wrapper .loginpage_cont > div { border-color: hsl(var(--ka-border)); }

.wrapper .loginform_cont h1,
.wrapper .register_cont h1,
.wrapper .newcustomer_cont h2 {
  font-family: var(--ka-font-display);
  font-size: var(--ka-type-h3);
  font-weight: var(--ka-weight-medium);
  letter-spacing: -0.015em;
  color: hsl(var(--ka-foreground));
}
.wrapper .newcustomer_cont p,
.wrapper .newcustomer_cont li {
  font-family: var(--ka-font-body);
  color: hsl(var(--ka-muted-foreground));
  font-size: var(--ka-type-sm);
  line-height: var(--ka-leading-body);
}

/* ------------------------------------------------------------ the fields */

/*
 * SURFACE ONLY. See note 1 at the top of this file — the box is theirs.
 */
html .wrapper .smartlabel div > input,
html .wrapper .smartlabel div > select,
html .wrapper .smartlabel div > textarea {
  border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-sm);
  background: hsl(var(--ka-card));
  color: hsl(var(--ka-foreground));
  font-family: var(--ka-font-body);
  font-size: var(--ka-type-body);
  transition: border-color var(--ka-dur) var(--ka-ease);
}
.wrapper .smartlabel div > input:hover { border-color: hsl(var(--ka-border-strong)); }

/*
 * A REAL FOCUS RING, where there was none.
 *
 * account.css sets `outline: none !important` on these inputs and replaces it
 * with nothing at all — so a keyboard user tabbing the login form got no
 * indication of where they were. The !important below exists only to answer
 * theirs; it is not decoration, and it is the only one in this file that
 * fights a declaration rather than an accident of order.
 */
.wrapper .smartlabel div > input:focus,
.wrapper .smartlabel div > select:focus,
.wrapper .smartlabel div > textarea:focus {
  outline: var(--ka-focus-width) solid hsl(var(--ka-focus)) !important;
  outline-offset: var(--ka-focus-offset);
  border-color: hsl(var(--ka-primary) / 0.5);
}

.wrapper .smartlabel div label { color: hsl(var(--ka-muted-foreground)); font-family: var(--ka-font-body); }
.wrapper .smartlabel div > input:focus + label { color: hsl(var(--ka-primary)); }

.wrapper .remember_cont label.checkbox,
.wrapper .remember_cont span {
  color: hsl(var(--ka-muted-foreground));
  font-family: var(--ka-font-body);
  font-size: var(--ka-type-sm);
}
/* The register page's "Already have an account? Click here!" was the browser
 * default blue-and-underlined — the only stock link left in the auth flow. */
.wrapper .register_cont a,
.wrapper .registerform ~ a,
.wrapper .forgot_link a {
  color: hsl(var(--ka-primary));
  font-family: var(--ka-font-body);
  font-size: var(--ka-type-sm);
  text-underline-offset: 3px;
}

/* ----------------------------------------------------------- the buttons */

/*
 * Espresso primary, warm secondary — the same two buttons as the rest of the
 * site, on the same tokens.
 *
 * The selector list mirrors theirs exactly (`.wrapper .btn-black`,
 * `.wrapper button[type=submit]`, `.wrapper button.btn`) because a narrower
 * one would leave whichever of the three they used on a given control still
 * grey. `color` carries !important solely because theirs does.
 *
 * height:40px becomes min-height, so a wrapped or translated label grows the
 * button instead of overflowing it — the rule the whole control system obeys.
 */
/*
 * SPECIFICITY, WRITTEN OUT ON PURPOSE.
 *
 * `html` and the doubled class are not decoration. AliDropship's button rule
 * is a four-selector list at (0,2,1) in a sheet that prints before this one,
 * so equal specificity plus later source order should have been enough — and
 * on the page it was not: the button stayed #444 with a 3px corner through
 * three deploys. Rather than escalate to !important on eight declarations, the
 * selector is raised once, here, so the whole block wins cleanly and the
 * reason is visible at the point of use.
 *
 * If a future AliDropship release renames .btn-black, these stop matching and
 * the buttons revert to the plugin's grey. That is the failure mode this file
 * is designed to have: ugly, obvious, and harmless.
 */
html .wrapper .btn-black.btn-black,
html .wrapper button[type="submit"],
html .wrapper input[type="submit"],
html .wrapper button.btn {
  min-height: 2.75rem;
  height: auto;
  padding: var(--ka-control-pad-y) var(--ka-control-pad-x);
  border: 1px solid hsl(var(--ka-espresso));
  border-radius: var(--ka-radius-pill);
  background: hsl(var(--ka-espresso));
  color: hsl(var(--ka-espresso-foreground)) !important;
  font-family: var(--ka-font-body);
  font-size: var(--ka-type-control);
  font-weight: var(--ka-weight-medium);
  line-height: var(--ka-leading-snug);
  transition: background-color var(--ka-dur) var(--ka-ease);
}
html .wrapper .btn-black.btn-black:hover,
html .wrapper .btn-black.btn-black:active,
html .wrapper button[type="submit"]:hover,
html .wrapper button.btn:hover {
  background: hsl(var(--ka-espresso) / 0.88);
  border-color: hsl(var(--ka-espresso) / 0.88);
  color: hsl(var(--ka-espresso-foreground)) !important;
}

html .wrapper .btn-white.btn-white {
  min-height: 2.75rem;
  height: auto;
  padding: var(--ka-control-pad-y) var(--ka-control-pad-x);
  border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-pill);
  background: hsl(var(--ka-card));
  color: hsl(var(--ka-foreground)) !important;
  font-family: var(--ka-font-body);
  font-size: var(--ka-type-control);
  font-weight: var(--ka-weight-medium);
  text-decoration: none;
}
html .wrapper .btn-white.btn-white:hover,
html .wrapper .btn-white.btn-white:active {
  border-color: hsl(var(--ka-primary) / 0.45);
  background: hsl(var(--ka-secondary) / 0.7);
  color: hsl(var(--ka-foreground)) !important;
}

html .wrapper .btn-black:focus-visible,
html .wrapper .btn-white:focus-visible,
html .wrapper button.btn:focus-visible,
html .wrapper button[type="submit"]:focus-visible {
  outline: var(--ka-focus-width) solid hsl(var(--ka-focus)) !important;
  outline-offset: var(--ka-focus-offset);
}

/* The error block on the recover-password form. It was unstyled body text. */
.wrapper .error-message-block p {
  margin: 0;
  color: hsl(var(--ka-danger));
  font-family: var(--ka-font-body);
  font-size: var(--ka-type-sm);
}

/* ==========================================================================
   2. THE CART AND CHECKOUT  —  /cart/
   Scoped to .checkout-main / .checkout-container, AliDropship's own
   containers. VISUAL ONLY: not one rule here changes a total, a step, a
   validation state or a request.
   ========================================================================== */

/*
 * NO BLANKET font-family ON THE CONTAINER, and this is a bug I put here and
 * took back out.
 *
 * Setting it on .checkout-main inherits into TWELVE pseudo-elements that draw
 * their glyph from the `fontello` icon font — the step separators, the
 * move-step chevron, the checkbox tick, the mobile summary caret, the discount
 * mark, the spinner. `font-family` on the parent wins over the icon font on
 * the child, so every one of those became a missing-glyph box while still
 * reporting the right colour. Caught on the mobile order summary, where the
 * cart glyph stopped being a cart.
 *
 * The face is therefore applied to TEXT elements by name. It is longer and it
 * is the only version that does not quietly break their icons.
 */
.checkout-container,
.checkout-main { color: hsl(var(--ka-foreground)); }

.checkout-main h1,
.checkout-main h2,
.checkout-main h3,
.checkout-main p,
.checkout-main label,
.checkout-main input,
.checkout-main textarea,
.checkout-main select,
.checkout-main button,
.checkout-main a,
.checkout-main .field,
.checkout-main .order,
.checkout-main .box-informer-cart,
.checkout-main .inner-step .link-step li,
.mobile-summary .value,
.mobile-summary .show,
.mobile-summary .hide { font-family: var(--ka-font-body); }

/* And the icons keep theirs, explicitly, so a future rule higher up cannot
   take it away again by accident. */
.box-check .check:before,
.checkout-main .bs-searchbox:after,
.checkout-main .dropdown-menu > li > a .check-mark:before,
.checkout-main .inner-step .link-step li:before,
.checkout-main .move-box .move-step:before,
.checkout-main .move-step-link:before,
.checkout-main .step-3 .discount-apply span:before,
.checkout-spinner:after,
.inner-step div.js-valid:not(.bootstrap-select):before,
.mobile-summary .name:after,
form#form_delivery .btn-processed[name="ads_checkout"]:after,
form#form_delivery.loading [name="ads_checkout"]:after { font-family: fontello; }

/* ------------------------------------------------------ the input fields */

/* Surface only — see note 2 at the top of this file. */
html .checkout-main .field {
  border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-sm);
  background: hsl(var(--ka-card));
  transition: border-color var(--ka-dur) var(--ka-ease);
}
.checkout-main .field:hover { border-color: hsl(var(--ka-border-strong)); }
.checkout-main .field label { color: hsl(var(--ka-muted-foreground)); font-family: var(--ka-font-body); }
.checkout-main .field input,
.checkout-main .field textarea,
.checkout-main .field input.form-control {
  color: hsl(var(--ka-foreground));
  font-family: var(--ka-font-body);
}

/*
 * .is-focus is THEIR class, set by THEIR script when a field is focused. It is
 * styled here and never touched otherwise — the border colour changes, the
 * class contract does not.
 */
.checkout-main .field.is-focus { border-color: hsl(var(--ka-primary) / 0.5); }
.checkout-main .field.is-focus,
.checkout-main .field:focus-within {
  outline: var(--ka-focus-width) solid hsl(var(--ka-focus));
  outline-offset: var(--ka-focus-offset);
}

/* Their validation red, on the shared danger token. The STATE is theirs; only
   the colour of it is ours. */
.checkout-main .field.error-empty,
.checkout-main .field.hasSelect.error-empty { border-color: hsl(var(--ka-danger)); }

/* ------------------------------------------------------ THE ORANGE BUTTON */

/*
 * #ff8d38 was the loudest colour on the site and it sat on the button that
 * moves a customer through checkout. It appears nowhere else in the brand —
 * not in the nav, not on a product page, not on a price.
 *
 * min-width:200px is kept: this control should be large and confident, and
 * that is a commerce decision rather than a stylistic one. What changes is
 * the colour, the corner and the weight.
 */
html .checkout-main .move-box .btn-checkout,
html .checkout-main .move-box button.btn-checkout {
  border-radius: var(--ka-radius-pill);
  background: hsl(var(--ka-espresso));
  color: hsl(var(--ka-espresso-foreground));
  font-family: var(--ka-font-body);
  font-size: var(--ka-type-control);
  font-weight: var(--ka-weight-medium);
  transition: background-color var(--ka-dur) var(--ka-ease);
}
.checkout-main .move-box .btn-checkout:hover,
.checkout-main .move-box .btn-checkout:focus {
  background: hsl(var(--ka-espresso) / 0.88);
}
.checkout-main .move-box .btn-checkout:focus-visible {
  outline: var(--ka-focus-width) solid hsl(var(--ka-focus));
  outline-offset: var(--ka-focus-offset);
}

/* ------------------------------------------------------------- the steps */

/* Their step rail was #2a7bae blue on #858585 grey — a second accent nobody
   chose. The STATES stay exactly as they are; only their colours move. */
.checkout-main .inner-step .link-step li,
.checkout-main .inner-step .link-step li a { color: hsl(var(--ka-muted-foreground)); }
.checkout-main .inner-step .link-step li.active,
.checkout-main .inner-step .link-step li.active a { color: hsl(var(--ka-primary)); }
.checkout-main .inner-step .link-step li.current,
.checkout-main .inner-step .link-step li.current a {
  color: hsl(var(--ka-foreground));
  font-weight: var(--ka-weight-medium);
}
.checkout-main .move-box .move-step,
.checkout-main .move-box .move-step:before { color: hsl(var(--ka-primary)); }

/*
 * EVERY REMAINING #2a7bae, collected.
 *
 * Their blue turns up in nine more places the step rail does not cover: the
 * "Already have an account? Log in" prompt, the order-summary Edit links, the
 * mobile summary toggle, the two footers, and — the one that matters most —
 * the SELECTED RADIO for shipping method and payment method. A customer
 * choosing how their order ships was being shown the selection in a colour
 * that exists nowhere else on the site.
 *
 * The radio's :checked state is theirs and is untouched. Only the colour it
 * paints with moves onto the accent.
 */
.checkout-main .link-login a,
.checkout-main .box-informer-cart .edit a,
.checkout-main .order .footer a,
.checkout-main .mobile-summary .name,
.checkout-main .mobile-summary .name:after,
.footer-no a,
.footer-mobile a { color: hsl(var(--ka-primary)); }

.checkout-main .box-radio input[type="radio"]:checked ~ .check { border-color: hsl(var(--ka-primary)); }
.checkout-main .box-radio input[type="radio"]:checked ~ .check:before { background: hsl(var(--ka-primary)); }

/* Their focus border on a field was #3386c1 — a third blue. The shared focus
   ring is already applied above; this stops the border underneath it from
   disagreeing with the ring drawn on top of it. */
html .checkout-main .field.is-focus { border-color: hsl(var(--ka-primary) / 0.5); }

/* The checkbox that keeps a customer signed up, and the one that says "same
   as shipping". Same treatment as the radio: state theirs, colour ours. */
.checkout-main .box-check input[type="checkbox"]:checked ~ .check { border-color: hsl(var(--ka-primary)); }
.checkout-main .box-check input[type="checkbox"]:checked ~ .check:before { color: hsl(var(--ka-primary)); }

/* --------------------------------------------------- the state dropdown */

/*
 * bootstrap-select, which the country and state fields use, ships Bootstrap's
 * own #337ab7 for the highlighted option — a FOURTH blue, from a vendor
 * stylesheet neither AliDropship nor this theme wrote. Opening the state list
 * mid-checkout was the one moment the customer saw stock Bootstrap.
 *
 * Only the two highlight states are touched. The widget's behaviour, its
 * markup and its live-search are entirely its own.
 */
.checkout-main .bootstrap-select .dropdown-menu li a:hover,
.checkout-main .bootstrap-select .dropdown-menu li.active > a,
.checkout-main .bootstrap-select .dropdown-menu li.selected > a {
  background: hsl(var(--ka-espresso));
  color: hsl(var(--ka-espresso-foreground));
}
.checkout-main .bootstrap-select .dropdown-menu {
  border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-sm);
  background: hsl(var(--ka-card));
  box-shadow: var(--ka-shadow-panel);
}
.checkout-main .bootstrap-select .bs-searchbox input {
  border: 1px solid hsl(var(--ka-border));
  border-radius: var(--ka-radius-sm);
  font-family: var(--ka-font-body);
}
.checkout-main .move-box .move-step:focus-visible {
  outline: var(--ka-focus-width) solid hsl(var(--ka-focus));
  outline-offset: var(--ka-focus-offset);
}

/* The empty-cart screen: a hard 50/50 white-to-grey gradient behind an orange
   basket glyph. Warm surfaces and the brand accent instead. */
.checkout-container-no { background: hsl(var(--ka-background)); }
.checkout-container-no .no-orders .cart-box-radius { background: hsl(var(--ka-card)); }
.checkout-container-no .no-orders .cart-box-radius .icon-basket { color: hsl(var(--ka-primary)); }
.checkout-container-no .no-orders h2 {
  font-family: var(--ka-font-display);
  font-weight: var(--ka-weight-medium);
  color: hsl(var(--ka-foreground));
}
.checkout-container-no .no-orders a { color: hsl(var(--ka-primary)); }

/* ==========================================================================
   WHAT IS DELIBERATELY LEFT ALONE

   .mobile-summary .ico-cart  draws its glyph from cart.svg as a BACKGROUND
   IMAGE with the blue inside the file, at a URL carrying a cache-busting hash
   (?a873054b...). It can only be recoloured by replacing the image or by
   switching to mask-image against that same hashed URL — and the hash changes
   on their next release, at which point a mask stops resolving and the icon
   disappears entirely. A slightly off-palette 22px cart is a better outcome
   than a missing one, so it stays theirs.

   AliDropship's green validated-field state also stays theirs. It is feedback
   their script drives, it is legible, and repainting a success signal to match
   a palette is the kind of change that costs more than it returns.
   ========================================================================== */

/* ==========================================================================
   3. TOUCH TARGETS
   Their fields and buttons are 40px. Applied as min-height so a control that
   is already taller keeps its own size instead of being clamped and clipping.
   ========================================================================== */

@media (pointer: coarse) {
  .wrapper .btn-black,
  .wrapper .btn-white,
  .wrapper button.btn,
  .wrapper button[type="submit"],
  .wrapper input[type="submit"],
  .wrapper .smartlabel div > input,
  .wrapper .smartlabel div > select,
  .checkout-main .field,
  .checkout-main .move-box .btn-checkout,
  .checkout-main .move-box .move-step,
  .checkout-main .box-informer-cart .edit a,
  .checkout-main .link-login a,
  .checkout-main .inner-step .link-step li a { min-height: var(--ka-tap-min); }
  /* "Return to customer information" measured 22px — the back door out of a
     checkout step, at half a thumb. It and the Edit links are inline text, so
     they need a box before a height means anything. */
  .checkout-main .move-box .move-step,
  .checkout-main .box-informer-cart .edit a,
  .checkout-main .link-login a {
    display: inline-flex;
    align-items: center;
  }
  /* The step links are inline text; they need a box before a height means
     anything to them. */
  .checkout-main .inner-step .link-step li a {
    display: inline-flex;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wrapper .btn-black,
  .wrapper .btn-white,
  .wrapper .smartlabel div > input,
  .checkout-main .field,
  .checkout-main .move-box .btn-checkout { transition: none; }
}