/* ============================================================
   Deviceland — bag: cart, checkout, order received
   ============================================================

   A TOKEN OVERLAY, exactly like pdp.css and for the same hard-won reason.

   Elessi's structural CSS stays loaded on these pages. The cart table, the
   .row/.columns grid, .hidden-tag and the quantity control's own layout all
   come from it, and an earlier pass on the product page proved what happens
   when that is dequeued: the layout collapses and elements meant to be hidden
   appear. So nothing here changes display, float or grid on Elessi's own
   containers. This file changes colour, type, surface, radius and spacing.

   Specificity: dynamic.css is declared a dependency in enqueue.php, so it
   prints BEFORE this file and we win ties. Elessi's own rules commonly reach
   three classes, so selectors here lead with `html body.deviceland-shop` and
   route through the .dl-bag wrapper this theme owns — enough to beat them on
   the same axis without !important.

   Scope note: bag.css only loads on is_cart() and is_checkout(), so the
   .deviceland-shop scope it shares with pdp.css can never collide — that sheet
   is not present here.
   ============================================================ */

html body.deviceland-shop.deviceland-bag {
  background: var(--paper);
  color: var(--on-paper);
  font-family: var(--sans);
}

/* Money is ink. Every figure, on every surface in this region.
   ------------------------------------------------------------
   Subtotal, the shipping options and Tax were all rendering in ember while the
   Total came out ink, which is backwards twice over: the accent was on the
   figures that do not matter most, and the one that does looked plainest. The
   cause is dynamic.css colouring .woocommerce-Price-amount with the theme
   accent — earlier rules here set colour on the <td>, and the amount span
   inside kept its own.

   Ember is this design's accent for links and live state. Applying it to prices
   makes a checkout read like a sale, and on a $2,000 Mac that is the wrong
   signal entirely. Prices are ink everywhere else on the site; the exception was
   here.

   bdi and the currency symbol are named explicitly because WooCommerce nests
   them inside the amount span and dynamic.css reaches them individually. */
html body.deviceland-shop .dl-bag .amount,
html body.deviceland-shop .dl-bag .woocommerce-Price-amount,
html body.deviceland-shop .dl-bag .woocommerce-Price-amount bdi,
html body.deviceland-shop .dl-bag .woocommerce-Price-currencySymbol,
html body.deviceland-shop .dl-bag .cart_totals .amount,
html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table .amount,
html body.deviceland-shop .dl-bag ul#shipping_method label .amount {
  color: var(--on-paper);
}

/* A struck-through original stays muted; the live price stays ink. */
html body.deviceland-shop .dl-bag del,
html body.deviceland-shop .dl-bag del .amount,
html body.deviceland-shop .dl-bag del bdi {
  color: var(--muted-fg);
}

/* #main clearance, and the comment that used to sit here was wrong.
   ------------------------------------------------------------
   It claimed "#main already clears the fixed masthead". It does not — that
   rule lives in pdp.css, which by design does not load on these pages. So the
   masthead is fixed and #main had no top padding: the step indicator and "Your
   bag" rendered underneath the logo.

   --head-measured is written by deviceland.js from the island's real height, so
   this tracks the header instead of guessing at it. The 69px fallback is the
   stuck height less the island's inset, for the frame before the script runs. */
html body.deviceland-shop.deviceland-bag #main {
  padding-top: calc(var(--head-measured, 69px) + 14px);
  padding-bottom: 0;
}

html body.deviceland-shop .dl-bag {
  padding-bottom: 88px;
}

html body.deviceland-shop .dl-bag .container-wrap {
  padding: 0;
}

/* ------------------------------------------------------------
   Head: steps, title, subtitle
   ------------------------------------------------------------ */

html body.deviceland-shop .dl-bag-head {
  padding-top: 34px;
  padding-bottom: 26px;
}

html body.deviceland-shop .dl-bag-title {
  margin: 18px 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--on-paper);
}

html body.deviceland-shop .dl-bag-sub {
  margin: 10px 0 0;
  max-width: 56ch;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted-fg);
}

html body.deviceland-shop .dl-bag-sub a {
  color: var(--ember-deep);
  text-decoration: none;
}

/* Keeps a phone number in one piece. The hyphen in 357-4400 is a valid break
   opportunity, so without this the number splits across two lines. */
html body.deviceland-shop .dl-nowrap {
  white-space: nowrap;
}

/* ---------- step indicator ---------- */

/* Caps and chevrons — the treatment from Elessi's modern checkout nav.
   ------------------------------------------------------------
   Numbered pills read as a badge; caps set wide with chevrons between them read
   as wayfinding, which is what a checkout needs. The chevron is a CSS mask on a
   pseudo-element rather than a character in the markup, so a screen reader
   announces three steps and not "Cart greater-than Checkout".

   Weight and colour carry the state instead of a filled circle: the current
   step is ink, completed steps sit at --ember, and steps not yet reached drop
   to 38% so they read as unavailable rather than merely quiet. */
html body.deviceland-shop .dl-steps-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html body.deviceland-shop .dl-step {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(20, 17, 14, 0.38);
}

html body.deviceland-shop .dl-step a {
  display: flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease);
}

html body.deviceland-shop .dl-step + .dl-step::before {
  content: "";
  width: 7px;
  height: 11px;
  background: currentColor;
  color: rgba(20, 17, 14, 0.26);
  -webkit-mask: no-repeat center / 7px 11px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.5 1 6 6l-4.5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask: no-repeat center / 7px 11px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.5 1 6 6l-4.5 5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html body.deviceland-shop .dl-step.is-now {
  color: var(--on-paper);
}

html body.deviceland-shop .dl-step.is-done {
  color: var(--ember-deep);
}

html body.deviceland-shop .dl-step.is-done a:hover {
  color: var(--on-paper);
}

/* ------------------------------------------------------------
   Notices
   ------------------------------------------------------------
   WooCommerce prints these at the top of both pages and they are load-bearing:
   "coupon applied", "please fill in your details", stock problems. Elessi gives
   them a grey bar with a coloured left edge. Here they read as a quiet card,
   with the accent carried by a rule rather than a fill, so a routine
   confirmation does not shout as loudly as a real error.
*/

/* NOT scoped to .dl-bag, deliberately.
   ------------------------------------------------------------
   The shipping notice kept rendering white while the cart-update notice went
   cream, from the same rule — which can only happen if one of them is not where
   the selector expects. WooCommerce and Elessi both relocate notices during an
   AJAX update, and .woocommerce-notices-wrapper is not the only place they can
   land.

   bag.css only loads on the cart and the checkout, so scoping these to the body
   rather than to .dl-bag costs nothing and stops the styling depending on which
   container a notice happens to be injected into. */
html body.deviceland-shop .woocommerce-message,
html body.deviceland-shop .woocommerce-info,
html body.deviceland-shop .woocommerce-error,
html body.deviceland-shop .dl-bag .woocommerce-message,
html body.deviceland-shop .dl-bag .woocommerce-info,
html body.deviceland-shop .dl-bag .woocommerce-error {
  margin: 0 0 22px;
  padding: 15px 18px;
  border: 1px solid var(--hair-light);
  border-left: 2px solid var(--hair-light-2);
  border-radius: var(--r-md);
  background: var(--paper-2);
  background-image: none;
  box-shadow: none;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--on-paper);
  list-style: none;
}

/* The notice's own lines take its ink. Elessi's style.css sets
   `.woocommerce-error li { color: #fff }` for its red banner; with the
   banner made cream above, "The email address is invalid" read white on
   cream inside the card box (owner, Oct 24). */
html body.deviceland-shop .woocommerce-message li,
html body.deviceland-shop .woocommerce-info li,
html body.deviceland-shop .woocommerce-error li {
  color: inherit;
}

html body.deviceland-shop .dl-bag .woocommerce-message {
  border-left-color: var(--ember);
}

html body.deviceland-shop .dl-bag .woocommerce-error {
  border-left-color: #9c2f1a;
}

html body.deviceland-shop .dl-bag .woocommerce-message::before,
html body.deviceland-shop .dl-bag .woocommerce-info::before,
html body.deviceland-shop .dl-bag .woocommerce-error::before {
  display: none;
}

/* The wrapper is a container, not a surface.
   The space below the notices belongs to the wrapper, not to the last
   notice: the close X is centred on the wrapper (below), and the notice's
   22px bottom margin made the wrapper 22px taller than the bar, so the X
   sat 11px below the bar's middle (owner, Oct 25). */
html body.deviceland-shop .dl-bag .woocommerce-notices-wrapper {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  margin-bottom: 22px;
}

html body.deviceland-shop .dl-bag .woocommerce-notices-wrapper > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):last-of-type,
html body.deviceland-shop .dl-bag .woocommerce-notices-wrapper > :last-child:is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  margin-bottom: 0;
}

html body.deviceland-shop .dl-bag .woocommerce-notices-wrapper:empty {
  display: none;
}

/* The dismiss control is a SIBLING of the notice, not a child.
   ------------------------------------------------------------
   That is why the previous fix did nothing: it positioned .nasa-stclose inside
   .woocommerce-message, and Elessi adds it alongside at runtime. So the notice
   got 44px of padding it did not need and the button stayed outside the card,
   in its own pale box.

   Handled on the WRAPPER now, which is the common ancestor either way, and both
   the child and sibling cases are listed. The x is a mask rather than a
   character for the same reason as the drawer's: these controls carry
   .nasa-stclose, Elessi's icon font applies to them, and a typed multiplication
   sign gets resolved against that glyph table instead. */
html body.deviceland-shop .dl-bag .woocommerce-notices-wrapper {
  position: relative;
}

/* Centred on the bar's real height, not on a guess at it.
   top: 22px assumed a ~50px bar; a notice that wraps to two lines is taller and
   the mark drifted upward. 50% with a translate is height-independent. */
html body.deviceland-shop .woocommerce-notices-wrapper > .nasa-stclose,
html body.deviceland-shop .woocommerce-notices-wrapper > a[class*="close"],
html body.deviceland-shop .woocommerce-message .nasa-stclose,
html body.deviceland-shop .woocommerce-info .nasa-stclose,
html body.deviceland-shop .dl-bag .woocommerce-notices-wrapper > .nasa-stclose,
html body.deviceland-shop .dl-bag .woocommerce-notices-wrapper > a[class*="close"],
html body.deviceland-shop .dl-bag .woocommerce-notices-wrapper .nasa-stclose,
html body.deviceland-shop .dl-bag .woocommerce-message .nasa-stclose,
html body.deviceland-shop .dl-bag .woocommerce-info .nasa-stclose {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  /* Elessi's close is a 30px svg: its grid row is 30px tall and started at
     the top of this 22px box, so the x drew 4px low. Centre the row too. */
  place-content: center;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  background-image: none;
  box-shadow: none;
  color: var(--muted-fg);
  font-size: 0;
  line-height: 1;
  text-decoration: none;
  overflow: hidden;
  z-index: 2;
}

html body.deviceland-shop .dl-bag .woocommerce-notices-wrapper > .nasa-stclose::before,
html body.deviceland-shop .dl-bag .woocommerce-notices-wrapper .nasa-stclose::before,
html body.deviceland-shop .dl-bag .woocommerce-message .nasa-stclose::before,
html body.deviceland-shop .dl-bag .woocommerce-info .nasa-stclose::before {
  content: "";
  width: 11px;
  height: 11px;
  background: currentColor;
  -webkit-mask: no-repeat center / 11px 11px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5l9 9M10.5 1.5l-9 9' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  mask: no-repeat center / 11px 11px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5l9 9M10.5 1.5l-9 9' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

html body.deviceland-shop .dl-bag .woocommerce-notices-wrapper > .nasa-stclose::after {
  display: none;
  content: none;
}

/* You are right that the removal bar reads better than the shipping one, and
   the difference was a green tick — a colour that appears nowhere else in this
   palette. Notices carry the accent on their left edge and nothing else, so the
   two now differ only in that edge, which is the whole point of having one. */
html body.deviceland-shop .dl-bag .woocommerce-message > svg,
html body.deviceland-shop .dl-bag .woocommerce-message > i,
html body.deviceland-shop .dl-bag .woocommerce-info > svg,
html body.deviceland-shop .dl-bag .woocommerce-info > i,
html body.deviceland-shop .dl-bag .woocommerce-error > svg,
html body.deviceland-shop .dl-bag .woocommerce-error > i {
  display: none;
}

html body.deviceland-shop .dl-bag .woocommerce-message,
html body.deviceland-shop .dl-bag .woocommerce-info,
html body.deviceland-shop .dl-bag .woocommerce-error {
  position: relative;
  padding-right: 44px;
}

/* The white bar under a notice is WooCommerce blocking the UI mid-AJAX.
   ------------------------------------------------------------
   blockUI paints an overlay over the element it is updating and sets
   `background: #fff` INLINE, so on a cream page every cart or shipping update
   flashes a white rectangle. Inline styles can only be beaten with !important,
   which is the one place it is the correct tool rather than a shortcut.

   Cream at low opacity instead: the panel greys back a little while it waits,
   which is what a loading state should say, rather than turning into a white
   box that looks like a rendering fault. */
html body.deviceland-shop .dl-bag .blockUI.blockOverlay {
  background: var(--paper) !important;
  opacity: 0.6 !important;
}

html body.deviceland-shop .dl-bag .woocommerce-message a,
html body.deviceland-shop .dl-bag .woocommerce-info a {
  color: var(--ember-deep);
}

/* ------------------------------------------------------------
   Cart table
   ------------------------------------------------------------ */

html body.deviceland-shop .dl-bag table.shop_table {
  margin: 0;
  border: 0;
  border-radius: 0;
  border-collapse: collapse;
  background: transparent;
  font-family: var(--sans);
}

/* Column headings as the eyebrow used everywhere else on the site: small,
   letterspaced, muted. They label a table; they are not content. */
html body.deviceland-shop .dl-bag table.shop_table thead th {
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid var(--hair-light);
  background: transparent;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-fg);
  text-align: left;
}

html body.deviceland-shop .dl-bag table.shop_table td {
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--hair-light);
  background: transparent;
  vertical-align: middle;
}

html body.deviceland-shop .dl-bag table.shop_table tr.nasa-no-border td {
  border-bottom: 0;
}

/* White plate, not the warm one — the same call as the gallery and the search
   results. Apple's catalogue shots are cut out on white, so a cream tile draws
   a visible rectangle around every adapter. */
html body.deviceland-shop .dl-bag td.product-thumbnail {
  width: 92px;
  padding-right: 16px;
}

html body.deviceland-shop .dl-bag td.product-thumbnail img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--hair-light);
  border-radius: var(--r-md);
}

html body.deviceland-shop .dl-bag td.product-name a {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: 1.35;
  color: var(--on-paper);
  text-decoration: none;
}

html body.deviceland-shop .dl-bag td.product-name a:hover {
  color: var(--ember-deep);
}

/* Variation attributes under the name — the seven axes a configured Mac
   carries. Muted and tight so the product name stays the headline. */
html body.deviceland-shop .dl-bag td.product-name .variation {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-fg);
}

html body.deviceland-shop .dl-bag td.product-name .variation dt,
html body.deviceland-shop .dl-bag td.product-name .variation dd {
  display: inline;
  margin: 0;
  font-weight: 400;
}

html body.deviceland-shop .dl-bag td.product-name .variation dd::after {
  content: "\00a0· ";
}

html body.deviceland-shop .dl-bag td.product-name .variation dd:last-of-type::after {
  content: "";
}

html body.deviceland-shop .dl-bag td.product-price,
html body.deviceland-shop .dl-bag td.product-subtotal {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--on-paper);
}

html body.deviceland-shop .dl-bag td.product-subtotal {
  text-align: right;
}

/* ---------- quantity ---------- */

/* The same stepper as the product page, copied deliberately rather than
   reinvented.
   ------------------------------------------------------------
   The first version here set border-radius: --r-pill on .quantity. Elessi lays
   this control out as a roughly square box — a 42px input with .plus and .minus
   absolutely positioned at right:0 — so a pill radius on a square is a circle.
   That is what produced the round control in the cart, and it looked nothing
   like the stepper on the product page two clicks earlier.

   pdp.css already solved this: a 76×46 box at --r-sm on --bone, a 48px input,
   and two 27×22 halves stacked against a hairline. Those rules are reproduced
   here because pdp.css does not load on this page, and the same control on two
   pages must not be described twice differently. */
html body.deviceland-shop .dl-bag .quantity {
  position: relative;
  float: none;
  display: inline-block;
  vertical-align: middle;
  width: 76px;
  height: 46px;
  margin: 0;
  border: 1px solid var(--hair-light-2);
  border-radius: var(--r-sm);
  background: var(--bone);
  overflow: hidden;
}

html body.deviceland-shop .dl-bag .quantity .input-text.qty,
html body.deviceland-shop .dl-bag .quantity input.qty,
html body.deviceland-shop .dl-bag .quantity input[type="number"] {
  width: 48px;
  min-width: 0;
  height: 44px;
  min-height: 0;
  line-height: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--on-paper);
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

html body.deviceland-shop .dl-bag .quantity input[type="number"]::-webkit-outer-spin-button,
html body.deviceland-shop .dl-bag .quantity input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

html body.deviceland-shop .dl-bag .quantity .plus,
html body.deviceland-shop .dl-bag .quantity .minus {
  position: absolute;
  right: 0;
  left: auto;
  display: grid;
  place-items: center;
  width: 27px;
  height: 22px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--hair-light-2);
  border-radius: 0;
  background: transparent;
  color: var(--muted-fg);
  text-decoration: none;
  transition: background var(--dur-micro) var(--ease),
    color var(--dur-micro) var(--ease);
}

html body.deviceland-shop .dl-bag .quantity .plus {
  top: 0;
  bottom: auto;
  border-bottom: 1px solid var(--hair-light-2);
}

html body.deviceland-shop .dl-bag .quantity .minus {
  bottom: 0;
  top: auto;
  border-top: 0;
}

html body.deviceland-shop .dl-bag .quantity .plus svg,
html body.deviceland-shop .dl-bag .quantity .minus svg {
  width: 12px;
  height: 12px;
}

html body.deviceland-shop .dl-bag .quantity .plus:hover,
html body.deviceland-shop .dl-bag .quantity .minus:hover {
  background: rgba(20, 17, 14, 0.05);
  color: var(--on-paper);
}

/* ---------- remove ---------- */

/* Destructive, so it is quiet until wanted, and ember rather than red on
   hover: this deletes a line from a bag, it does not delete an account. */
html body.deviceland-shop .dl-bag td.product-remove a,
html body.deviceland-shop .dl-bag a.remove {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  background: transparent;
  color: rgba(20, 17, 14, 0.4);
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease),
    background var(--dur-micro) var(--ease);
}

html body.deviceland-shop .dl-bag td.product-remove a:hover,
html body.deviceland-shop .dl-bag a.remove:hover {
  background: var(--paper-2);
  color: var(--ember-deep);
}

/* One x, not two (owner, Oct 25). The link carries .nasa-stclose, so
   Elessi draws its own x from two absolutely placed 16px lines in
   ::before/::after, 17px down, while the link's "×" character drew a
   second, smaller one beside it. The character is hidden (still read by
   screen readers via aria-label) and ::before becomes the same masked x as
   the notices' close, centred by the grid. */
html body.deviceland-shop .dl-bag td.product-remove a.remove,
html body.deviceland-shop .dl-bag td.product-remove a.nasa-stclose {
  position: relative;
  font-size: 0;
}

html body.deviceland-shop .dl-bag td.product-remove a.remove::before,
html body.deviceland-shop .dl-bag td.product-remove a.nasa-stclose::before {
  content: "";
  position: static;
  display: block;
  width: 11px;
  height: 11px;
  margin: 0;
  border: 0;
  box-shadow: none;
  transform: none;
  background: currentColor;
  -webkit-mask: no-repeat center / 11px 11px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5l9 9M10.5 1.5l-9 9' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  mask: no-repeat center / 11px 11px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5l9 9M10.5 1.5l-9 9' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

html body.deviceland-shop .dl-bag td.product-remove a.remove::after,
html body.deviceland-shop .dl-bag td.product-remove a.nasa-stclose::after {
  content: none;
  display: none;
}

/* ------------------------------------------------------------
   Coupon and cart actions
   ------------------------------------------------------------ */

html body.deviceland-shop .dl-bag .actions {
  padding: 22px 0 0;
  border: 0;
}

/* One control, not a box inside a box.
   ------------------------------------------------------------
   Elessi gives .coupon its own border and background, and the previous rules
   here bordered the input AND gave the button an outline pill — so the result
   was a rounded rectangle containing a second rounded rectangle, with the
   button apparently floating inside the field. The double outline was two rules
   both doing the same job.

   Joined is this design's own answer: the search overlay is a single bordered
   field with its Esc pill inside, and the nav-sheet search is one pill holding
   an icon and an input. So the coupon becomes one bordered container — the
   input goes borderless inside it and the button sits at the trailing edge with
   a hairline separating it, which is the same construction as the quantity
   stepper. */
html body.deviceland-shop .dl-bag .coupon {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 420px;
  border: 1px solid var(--hair-light-2);
  border-radius: var(--r-pill);
  background: var(--paper);
  overflow: hidden;
  transition: border-color var(--dur-micro) var(--ease);
}

html body.deviceland-shop .dl-bag .coupon:focus-within {
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(201, 89, 40, 0.14);
}

html body.deviceland-shop .dl-bag .coupon label {
  display: none;
}

html body.deviceland-shop .dl-bag .coupon input.input-text {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 8px 0 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 14.5px;
}

html body.deviceland-shop .dl-bag .coupon input.input-text:focus {
  border: 0;
  box-shadow: none;
}

html body.deviceland-shop .dl-bag .coupon .button {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 20px;
  border: 0;
  border-left: 1px solid var(--hair-light);
  border-radius: 0;
  background: transparent;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--on-paper);
  white-space: nowrap;
}

html body.deviceland-shop .dl-bag .coupon .button:hover {
  background: var(--paper-2);
  border-left-color: var(--hair-light);
}

/* ------------------------------------------------------------
   Form fields — shared by coupon, shipping calculator and checkout
   ------------------------------------------------------------
   One field definition for every input on both pages. A checkout where the
   coupon box, the postcode box and the address boxes are three different
   heights reads as three different forms bolted together, which is exactly how
   it looked.

   44px minimum: a touch target below that is a miss on a phone, and this is the
   one form on the site where a miss costs money.
*/

html body.deviceland-shop .dl-bag input[type="text"],
html body.deviceland-shop .dl-bag input[type="email"],
html body.deviceland-shop .dl-bag input[type="tel"],
html body.deviceland-shop .dl-bag input[type="password"],
html body.deviceland-shop .dl-bag input[type="number"].input-text,
html body.deviceland-shop .dl-bag input.input-text,
html body.deviceland-shop .dl-bag textarea,
html body.deviceland-shop .dl-bag select,
html body.deviceland-shop .dl-bag .select2-container .select2-selection--single {
  height: auto;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid var(--hair-light-2);
  border-radius: var(--r-sm);
  background: var(--paper);
  box-shadow: none;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.006em;
  color: var(--on-paper);
  transition: border-color var(--dur-micro) var(--ease),
    box-shadow var(--dur-micro) var(--ease);
}

html body.deviceland-shop .dl-bag textarea {
  min-height: 96px;
  line-height: 1.5;
}

html body.deviceland-shop .dl-bag input::placeholder,
html body.deviceland-shop .dl-bag textarea::placeholder {
  color: rgba(20, 17, 14, 0.36);
}

/* A visible focus ring, and ember rather than the browser's blue, because the
   default outline was being suppressed by the theme on some of these fields —
   which is a keyboard trap on a checkout. */
html body.deviceland-shop .dl-bag input:focus,
html body.deviceland-shop .dl-bag textarea:focus,
html body.deviceland-shop .dl-bag select:focus {
  outline: none;
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(201, 89, 40, 0.14);
}

html body.deviceland-shop .dl-bag .form-row {
  margin: 0 0 16px;
  padding: 0;
}

html body.deviceland-shop .dl-bag .form-row label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--on-paper);
}

html body.deviceland-shop .dl-bag .form-row label .required {
  border: 0;
  color: var(--ember);
  text-decoration: none;
}

html body.deviceland-shop .dl-bag .woocommerce-input-wrapper {
  display: block;
  width: 100%;
}

html body.deviceland-shop .dl-bag .form-row.woocommerce-invalid input.input-text,
html body.deviceland-shop .dl-bag .form-row.woocommerce-invalid select {
  border-color: #9c2f1a;
}

html body.deviceland-shop .dl-bag .form-row.woocommerce-validated input.input-text {
  border-color: var(--hair-light-2);
}

/* Selects need the inset stated twice, and this is why.
   ------------------------------------------------------------
   Country / Region and State sat with their text hard against the border while
   the text inputs beside them were correctly inset. A native <select> ignores
   padding-left in some engines and honours text-indent instead, and Elessi sets
   its own padding on select at a specificity that shorthand `padding` in the
   rule above does not always beat once the theme's dynamic.css is in play.

   So the inset is restated as a longhand padding-inline AND a text-indent of 0,
   with the leading class of the selector raised to .form-row so it outranks
   Elessi on the same axis. Belt and braces on two fields is cheaper than a
   checkout that looks unfinished. */
html body.deviceland-shop .dl-bag .form-row select,
html body.deviceland-shop .dl-bag .woocommerce-input-wrapper select,
html body.deviceland-shop .dl-bag select.country_to_state,
html body.deviceland-shop .dl-bag select.state_select {
  padding-left: 18px; padding-right: 18px;
  padding-right: 40px;
  text-indent: 0;
  background-position: right 16px center;
}

/* Select2 is WooCommerce's country/state control. Only its shell is restyled;
   its positioning JS owns everything else. */
html body.deviceland-shop .dl-bag .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
  padding-left: 18px; padding-right: 18px;
}

/* The inset goes HERE, and my last attempt put a zero here instead.
   ------------------------------------------------------------
   Your computed values named it exactly:

     position: absolute;  left: 0;  padding-left: 0px

   .select2-selection__rendered is absolutely positioned, so `left: 0` resolves
   against its containing block's PADDING BOX — which means the 18px I put on
   .select2-selection--single can never move it. The container's padding does
   nothing for an out-of-flow child, and I had also explicitly zeroed the one
   property that could have worked, on the assumption the container would cover
   it.

   40px on the right rather than 18px, because the dropdown arrow sits at
   right: 8px and long country names would otherwise run underneath it. */
html body.deviceland-shop .dl-bag .select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 18px;
  padding-right: 40px;
  line-height: 1.3;
  color: var(--on-paper);
}

html body.deviceland-shop .dl-bag .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px;
  right: 8px;
}

/* Placeholders sat flush too, because Elessi gives .input-text its own
   padding-left on some fields. Restating it against .form-row wins. */
html body.deviceland-shop .dl-bag .form-row input.input-text,
html body.deviceland-shop .dl-bag .form-row textarea,
html body.deviceland-shop .dl-bag .woocommerce-input-wrapper input.input-text {
  padding-left: 18px; padding-right: 18px;
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------
   Ink filled is reserved for the one action that moves the funnel forward —
   Proceed to checkout, Place order. Everything else (Update cart, Apply coupon,
   Update totals) is an outline pill, because a page with four equally loud
   buttons has no primary action at all.
*/

html body.deviceland-shop .dl-bag .checkout-button,
html body.deviceland-shop .dl-bag #place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--ink);
  box-shadow: none;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
  text-decoration: none;
  color: var(--on-ink);
  cursor: pointer;
  transition: background var(--dur-ui) var(--ease),
    transform var(--dur-ui) var(--ease);
}

html body.deviceland-shop .dl-bag .checkout-button:hover,
html body.deviceland-shop .dl-bag #place_order:hover {
  background: var(--ink-3);
  border-color: var(--ink-3);
  color: var(--on-ink);
  transform: translateY(-1px);
}

html body.deviceland-shop .dl-bag .coupon .button,
html body.deviceland-shop .dl-bag .actions > .button,
html body.deviceland-shop .dl-bag button[name="update_cart"],
html body.deviceland-shop .dl-bag .shipping-calculator-form .button,
html body.deviceland-shop .dl-bag .woocommerce-form-login .button,
html body.deviceland-shop .dl-bag .checkout_coupon .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--hair-light-2);
  border-radius: var(--r-pill);
  background: transparent;
  box-shadow: none;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--on-paper);
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease),
    border-color var(--dur-micro) var(--ease);
}

html body.deviceland-shop .dl-bag .coupon .button:hover,
html body.deviceland-shop .dl-bag .actions > .button:hover,
html body.deviceland-shop .dl-bag button[name="update_cart"]:hover,
html body.deviceland-shop .dl-bag .shipping-calculator-form .button:hover,
html body.deviceland-shop .dl-bag .woocommerce-form-login .button:hover,
html body.deviceland-shop .dl-bag .checkout_coupon .button:hover {
  background: var(--paper-2);
  border-color: var(--hair-light-2);
  color: var(--on-paper);
}

/* Apply coupon is part of the coupon field, not an outline pill.
   The outline rules above share its specificity and come later, so they
   gave it its own border and a 46px height inside the 48px field: a 2px
   strip under the button and a box inside the box (owner, Oct 25). One
   type selector more; it fills the field's height and keeps only the
   hairline that separates it from the input. */
html body.deviceland-shop .dl-bag .coupon button.button,
html body.deviceland-shop .dl-bag .coupon button.button:hover {
  align-self: stretch;
  height: auto;
  min-height: 48px;
  margin: 0;
  border: 0;
  border-left: 1px solid var(--hair-light);
  border-radius: 0;
}

/* A disabled Update cart is WooCommerce telling the truth: nothing has changed
   yet. It should look inert rather than merely faded. */
html body.deviceland-shop .dl-bag button[name="update_cart"]:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}

/* ------------------------------------------------------------
   Totals panel — cart and checkout
   ------------------------------------------------------------
   The one surface on these pages that lifts off the paper, because it holds the
   number the customer came to check. Cream-2 rather than white: white is
   reserved for product photography throughout this design.
*/

html body.deviceland-shop .dl-bag .cart_totals,
html body.deviceland-shop .dl-bag #order_review {
  padding: 24px;
  background: var(--paper-2);
  border: 1px solid var(--hair-light);
  border-radius: var(--r-lg);
}

html body.deviceland-shop .dl-bag .cart_totals h2,
html body.deviceland-shop .dl-bag #order_review_heading {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--on-paper);
}

html body.deviceland-shop .dl-bag .cart_totals table.shop_table th,
html body.deviceland-shop .dl-bag .cart_totals table.shop_table td,
html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table th,
html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table td {
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid var(--hair-light);
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--on-paper);
}

html body.deviceland-shop .dl-bag .cart_totals table.shop_table th,
html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table th {
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted-fg);
}

html body.deviceland-shop .dl-bag .cart_totals table.shop_table td,
html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table td {
  text-align: right;
}

/* The order total is the answer to the page's question, so it is the only
   figure here in the display face and the only one at this size. */
html body.deviceland-shop .dl-bag tr.order-total th,
html body.deviceland-shop .dl-bag tr.order-total td {
  padding-top: 15px;
  border-bottom: 0;
}

html body.deviceland-shop .dl-bag tr.order-total th {
  font-size: 14px;
  font-weight: 500;
  color: var(--on-paper);
}

html body.deviceland-shop .dl-bag tr.order-total td,
html body.deviceland-shop .dl-bag tr.order-total .amount,
html body.deviceland-shop .dl-bag tr.order-total bdi {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--on-paper);
}

html body.deviceland-shop .dl-bag tr.order-total small.includes_tax {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--muted-fg);
}

/* Shipping choices read left to right: control, then what it is, then cost.
   ------------------------------------------------------------
   The rows were right-aligned with the radio apparently AFTER the label, which
   is not what WooCommerce renders — it prints <input> then <label>. The cause
   was our own rule two blocks up: `.cart_totals table.shop_table td {
   text-align: right }`, which is correct for a money column and wrong for a
   cell containing a list of choices. Right-aligned inline content put the
   radio at the end of the last wrapped line.

   So this cell is opted back out to the left, and each row becomes a flex line
   with the control fixed at its natural width and the label taking the rest.
   The radio gets a small top offset so it aligns with the first line of text
   rather than the vertical centre of a label that has wrapped. */
html body.deviceland-shop .dl-bag tr.woocommerce-shipping-totals td,
html body.deviceland-shop .dl-bag td[data-title="Shipping"] {
  text-align: left;
}

/* The row's heading keeps its word and a gap (owner, Nov 9): with no
   padding, "Shipment" ran into "Standard ground: Free" on the bag page, and
   on phones it was squeezed to 37px and broke as "Ship / ment". Stated with
   the totals table rule's own specificity, which otherwise wins. */
html body.deviceland-shop .dl-bag .cart_totals table.shop_table tr.woocommerce-shipping-totals th,
html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals th {
  padding-right: 20px;
  white-space: nowrap;
  vertical-align: top;
}

html body.deviceland-shop .dl-bag ul#shipping_method {
  margin: 0;
  padding: 0;
  list-style: none;
}

html body.deviceland-shop .dl-bag ul#shipping_method li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 8px;
  padding: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--on-paper);
  text-align: left;
}

html body.deviceland-shop .dl-bag ul#shipping_method li input.shipping_method {
  flex: 0 0 auto;
  margin: 2px 0 0;
}

html body.deviceland-shop .dl-bag ul#shipping_method label {
  flex: 1 1 auto;
  display: block;
  margin: 0;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--on-paper);
}

/* The cost is the second thing read on the line, so it stays on the same line
   as its own label rather than being allowed to orphan. */
html body.deviceland-shop .dl-bag ul#shipping_method label .amount {
  font-weight: 500;
  white-space: nowrap;
}

/* Ground only while Ingram cannot quote (freight.php): why, on its own line. */
html body.deviceland-shop ul#shipping_method label .dl-shipping-note {
  display: block;
  margin: 3px 0 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--muted-fg);
}

html body.deviceland-shop .dl-bag .woocommerce-shipping-destination {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-fg);
}

html body.deviceland-shop .dl-bag .shipping-calculator-button {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ember-deep);
  text-decoration: none;
}

/* The calculator is a FORM inside a money column, so it has to opt out.
   ------------------------------------------------------------
   It lives in the .cart_totals cell, and `.cart_totals table.shop_table td {
   text-align: right }` is right for an amount and wrong for a form: it threw
   every label to the right of its own field, which is what read as a padding
   problem. Same root cause as the shipping method rows, one cell over.

   The 18px inset from the shared field rule already applied here — it was the
   alignment that made it look otherwise. */
html body.deviceland-shop .dl-bag .shipping-calculator-form {
  margin-top: 12px;
  text-align: left;
}

html body.deviceland-shop .dl-bag .shipping-calculator-form .form-row {
  margin-bottom: 12px;
  text-align: left;
}

html body.deviceland-shop .dl-bag .shipping-calculator-form label,
html body.deviceland-shop .dl-bag .shipping-calculator-form .form-row label {
  display: block;
  margin-bottom: 7px;
  text-align: left;
}

html body.deviceland-shop .dl-bag .shipping-calculator-form button,
html body.deviceland-shop .dl-bag .shipping-calculator-form .button {
  width: 100%;
}

/* ------------------------------------------------------------
   Checkout: the form side sits on paper, not in a box
   ------------------------------------------------------------
   Billing details was rendering inside a rounded hairline box. This design uses
   one panel per page — the order summary — and puts the form it accompanies on
   plain paper; a bordered box around the form makes two competing panels and
   the page stops having a focal point.

   Declared as a reset rather than hunting whichever stylesheet added it, since
   the answer either way is the same: nothing on this side of the checkout
   carries a surface.
*/

html body.deviceland-shop .dl-bag .checkout-group,
html body.deviceland-shop .dl-bag #customer_details,
html body.deviceland-shop .dl-bag #customer_details .col-1,
html body.deviceland-shop .dl-bag #customer_details .col-2,
html body.deviceland-shop .dl-bag .woocommerce-billing-fields,
html body.deviceland-shop .dl-bag .woocommerce-shipping-fields,
html body.deviceland-shop .dl-bag .woocommerce-additional-fields {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* ------------------------------------------------------------
   Order review: the variation list
   ------------------------------------------------------------
   Each attribute is a <dt> plus a <dd><p>, and with all three as blocks the
   list came out as "Size:14-inchColor:Silver" on one line and a lone separator
   dot on the next. The cart table's list was already fixed; the review table
   uses a different selector and was missed.

   Same treatment as the cart and the drawer: label and value inline, a middle
   dot between pairs, and the <p> WooCommerce wraps each value in collapsed to
   inline so it stops forcing a line break.
*/

/* Values only. The labels stay for screen readers and come off the screen.
   ------------------------------------------------------------
   "Size:14-inch · Color:" then "Silver" on the next line was not a spacing
   problem — a <dt> and its <dd> are separate inline elements, so the line can
   always break between a label and the value it belongs to. No amount of
   spacing prevents that.

   The fix is to stop printing the labels, and the reason is that they carry no
   information here. A shopper reading 16GB knows it is memory; 1TB SSD is
   storage; 70W USB-C Power Adapter says what it is twice already. Six labels
   were roughly doubling the length of the line to restate what each value
   announces on its own — and it is the same spec line the product page and the
   search results already use without labels.

   dt is clipped rather than display:none, so "Colour: Silver" is still read
   aloud in the correct pairing. Removing it from the accessibility tree to fix
   a visual wrap would be trading a real loss for a cosmetic gain.
*/

html body.deviceland-shop .dl-bag dl.variation,
html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table dl.variation {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted-fg);
}

html body.deviceland-shop .dl-bag dl.variation dt,
html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table dl.variation dt {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

html body.deviceland-shop .dl-bag dl.variation dd,
html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table dl.variation dd {
  display: inline;
  margin: 0;
  padding: 0;
  font-weight: 400;
  clear: none;
  float: none;
}

html body.deviceland-shop .dl-bag dl.variation dd p,
html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table dl.variation dd p {
  display: inline;
  margin: 0;
}

html body.deviceland-shop .dl-bag dl.variation dd::after,
html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table dl.variation dd::after {
  content: "\00a0·\00a0";
  color: rgba(20, 17, 14, 0.3);
}

html body.deviceland-shop .dl-bag dl.variation dd:last-of-type::after,
html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table dl.variation dd:last-of-type::after {
  content: "";
}

html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table td.product-name {
  text-align: left;
}

/* Not intentional — the review table was simply missed.
   ------------------------------------------------------------
   Every other product image in this design sits on a white plate with --r-md
   and a hairline: the gallery, the cart table, the search results, the drawer,
   the cross-sell cards. The order summary was the one surface still showing a
   bare square, so the last thing a customer looks at before paying was the only
   thing that did not match. */
html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table td.product-name img,
html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table .product-thumbnail img,
html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--hair-light);
  border-radius: var(--r-md);
}

/* The quantity badge, and the unreadable version was my rule.
   ------------------------------------------------------------
   The previous rule set this to --muted-fg, which is a grey — on Elessi's grey
   circle that is grey on grey. A count sitting on top of a photograph has to
   carry its own contrast rather than borrow the page's, so it takes the same
   treatment as the masthead's bag count: ink fill, warm off-white text.

   The paper-coloured ring is what separates it from the white plate underneath;
   without it a dark circle on a white square reads as a blemish on the product
   photo rather than a label attached to it.

   position and offsets are left to Elessi, which already places this inside
   .co-wrap-img.nasa-relative. Only what it looks like changes. */
html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table .quantity-review-item,
html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table span.product-quantity,
html body.deviceland-shop .dl-bag .co-wrap-img .product-quantity {
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding-left: 5px; padding-right: 5px;
  border-radius: var(--r-pill);
  border: 2px solid var(--paper);
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: none;
}

html body.deviceland-shop .dl-bag .wc-proceed-to-checkout {
  padding: 20px 0 0;
}

/* ------------------------------------------------------------
   Checkout: customer details
   ------------------------------------------------------------ */

html body.deviceland-shop .dl-bag h3,
html body.deviceland-shop .dl-bag .woocommerce-billing-fields h3,
html body.deviceland-shop .dl-bag .woocommerce-shipping-fields h3,
html body.deviceland-shop .dl-bag .woocommerce-additional-fields h3 {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--on-paper);
}

html body.deviceland-shop .dl-bag #customer_details {
  margin-bottom: 30px;
}

/* Ship-to-different-address is a checkbox that reveals a second address block,
   so its label needs to read as a control, not a heading. */
html body.deviceland-shop .dl-bag #ship-to-different-address {
  margin: 0 0 14px;
}

html body.deviceland-shop .dl-bag #ship-to-different-address label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--on-paper);
  cursor: pointer;
}

html body.deviceland-shop .dl-bag input[type="checkbox"],
html body.deviceland-shop .dl-bag input[type="radio"] {
  width: 17px;
  height: 17px;
  min-height: 0;
  accent-color: var(--ember);
  cursor: pointer;
}

/* ---------- login and coupon toggles ---------- */

html body.deviceland-shop .dl-bag .woocommerce-form-login,
html body.deviceland-shop .dl-bag .checkout_coupon {
  margin: 0 0 22px;
  padding: 20px;
  border: 1px solid var(--hair-light);
  border-radius: var(--r-md);
  background: var(--paper-2);
}

html body.deviceland-shop .dl-bag .showcoupon,
html body.deviceland-shop .dl-bag .woocommerce-form-login-toggle a,
html body.deviceland-shop .dl-bag .showlogin {
  color: var(--ember-deep);
  font-weight: 500;
  text-decoration: none;
}

/* ---------- payment ---------- */

html body.deviceland-shop .dl-bag #payment {
  margin-top: 18px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

html body.deviceland-shop .dl-bag #payment ul.wc_payment_methods {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  list-style: none;
}

/* A payment method's row. Not a notice's line: the Stripe plugin injects its
   errors inside the card method, and its <li> took this box (a box inside the
   notice, Oct 24). */
html body.deviceland-shop .dl-bag #payment ul.wc_payment_methods li:not(:is(.woocommerce-error, .woocommerce-message, .woocommerce-info) li) {
  margin: 0 0 8px;
  padding: 14px 16px;
  border: 1px solid var(--hair-light-2);
  border-radius: var(--r-md);
  background: var(--paper);
  list-style: none;
  transition: border-color var(--dur-micro) var(--ease);
}

/* The selected gateway is the only bordered-in-ink row, so "which card am I
   paying with" is answerable without reading. */
html body.deviceland-shop .dl-bag #payment ul.wc_payment_methods li:not(:is(.woocommerce-error, .woocommerce-message, .woocommerce-info) li):has(input:checked) {
  border-color: var(--ink);
}

html body.deviceland-shop .dl-bag #payment ul.wc_payment_methods label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--on-paper);
  cursor: pointer;
}

/* Card brand logos: capped and aligned, not left at their natural size.
   Stripe ships a strip of brand marks after the label, and unconstrained they
   set the row height and drag the radio out of line with the text. */
html body.deviceland-shop .dl-bag #payment ul.wc_payment_methods label img {
  display: inline-block;
  height: 20px;
  width: auto;
  max-height: 20px;
  margin: 0 0 0 6px;
  vertical-align: middle;
  border-radius: 3px;
}

html body.deviceland-shop .dl-bag #payment .payment_box {
  margin: 12px 0 0;
  padding: 14px;
  border-radius: var(--r-sm);
  background: var(--paper-2);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted-fg);
}

html body.deviceland-shop .dl-bag #payment .payment_box p:last-child {
  margin-bottom: 0;
}

/* The Stripe card field.
   ------------------------------------------------------------
   Stripe injects its Elements iframe into this container after load, so it is
   never in the served HTML and cannot be styled by inspecting the page — only
   the container is ours. It gets the same 48px, 18px-inset, hairline treatment
   as every other field on this checkout, so a card number does not arrive
   looking like it belongs to a different form.
   
   Several container names are covered because the plugin has used different
   ones across versions and the UPE rewrite changed them again. Styling a
   container that does not exist costs nothing; missing the one that does leaves
   an unstyled box at the payment step. */
html body.deviceland-shop .dl-bag .wc-stripe-elements-field,
html body.deviceland-shop .dl-bag .wc-stripe-iban-element-field,
html body.deviceland-shop .dl-bag #stripe-card-element,
html body.deviceland-shop .dl-bag #wc-stripe-card-element,
html body.deviceland-shop .dl-bag #stripe-exp-element,
html body.deviceland-shop .dl-bag #stripe-cvc-element,
html body.deviceland-shop .dl-bag .wcstripe-card-element {
  min-height: 48px;
  padding: 14px 18px;
  border: 1px solid var(--hair-light-2);
  border-radius: var(--r-sm);
  background: var(--paper);
  box-shadow: none;
}

html body.deviceland-shop .dl-bag .wc-stripe-elements-field.focused,
html body.deviceland-shop .dl-bag #stripe-card-element.focused,
html body.deviceland-shop .dl-bag #wc-stripe-card-element.focused {
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(201, 89, 40, 0.14);
}

/* The UPE container carries its own accordion of methods; it only needs the
   surface removed so it sits on the panel rather than in a second box. */
html body.deviceland-shop .dl-bag .wc-stripe-upe-element,
html body.deviceland-shop .dl-bag #wc-stripe-upe-element {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Test-mode notice. Stripe prints this in the payment box and it matters that
   it stays legible rather than being toned down with everything else — a store
   owner needs to know at a glance that no money will move. */
html body.deviceland-shop .dl-bag #payment .payment_box .testmode-info,
html body.deviceland-shop .dl-bag #payment .payment_box strong {
  color: var(--ember-deep);
  font-weight: 500;
}

html body.deviceland-shop .dl-bag #payment .payment_box::before {
  display: none;
}

html body.deviceland-shop .dl-bag .woocommerce-privacy-policy-text,
html body.deviceland-shop .dl-bag .woocommerce-terms-and-conditions-wrapper {
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted-fg);
}

html body.deviceland-shop .dl-bag .woocommerce-privacy-policy-text a,
html body.deviceland-shop .dl-bag .woocommerce-terms-and-conditions-wrapper a {
  color: var(--ember-deep);
}

html body.deviceland-shop .dl-bag .place-order {
  padding-top: 8px;
}

/* ------------------------------------------------------------
   Order received: a receipt, on the heading's left edge (owner, Oct 24)
   ------------------------------------------------------------
   Elessi centred the order in an 800px column while the heading sat at the
   page margin, thanked the customer twice, boxed the four facts with
   centred labels, and painted the totals on a #f8f8f8 panel whose labels
   were padded and values were not (the "white square"), with dividers
   under the values only, 18px bold labels and a two-colour total. Now one
   760px column under the heading: the facts between two hairlines, serif
   section titles, line items and totals as label-left / value-right rows on
   full-width hairlines, the addresses as plain text in two columns. */

/* !important only because Elessi centres this row with
   ".nasa-order-received { max-width: 800px !important; margin: 0 auto
   !important }", which nothing else can outrank. */
html body.deviceland-shop .dl-bag .woocommerce-order .nasa-order-received {
  max-width: 760px !important;
  margin: 10px 0 0 !important;
  padding: 0;
}

html body.deviceland-shop .dl-bag .woocommerce-order .nasa-order-received > .columns {
  float: none;
  width: 100%;
  max-width: none;
  padding: 0;
}

html body.deviceland-shop .dl-bag .woocommerce-order .nasa-warper-order {
  margin: 0;
}

/* The heading above already says thank you. */
html body.deviceland-shop .dl-bag .woocommerce-order .woocommerce-thankyou-order-received {
  display: none;
}

/* The four facts: a small label over each value, one row, between hairlines. */
html body.deviceland-shop .dl-bag .woocommerce-order ul.woocommerce-thankyou-order-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 24px;
  margin: 0 0 48px;
  padding: 18px 0;
  border: 0;
  border-top: 1px solid var(--hair-light);
  border-bottom: 1px solid var(--hair-light);
  border-radius: 0;
  background: transparent;
  list-style: none;
}

html body.deviceland-shop .dl-bag .woocommerce-order ul.woocommerce-thankyou-order-details li {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--muted-fg);
}

html body.deviceland-shop .dl-bag .woocommerce-order ul.woocommerce-thankyou-order-details li::before,
html body.deviceland-shop .dl-bag .woocommerce-order ul.woocommerce-thankyou-order-details li::after {
  content: none;
}

html body.deviceland-shop .dl-bag .woocommerce-order ul.woocommerce-thankyou-order-details li strong {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.008em;
  text-transform: none;
  color: var(--on-paper);
}

html body.deviceland-shop .dl-bag .woocommerce-order ul.woocommerce-thankyou-order-details li strong .amount {
  color: inherit;
}

/* Section titles: the site's serif, on the left edge like everything else. */
html body.deviceland-shop .dl-bag .woocommerce-order .woocommerce-order-details__title,
html body.deviceland-shop .dl-bag .woocommerce-order .woocommerce-column__title {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  text-align: left;
  color: var(--on-paper);
}

/* Line items and totals: label left, value right, a full-width hairline
   under each row. */
html body.deviceland-shop .dl-bag .woocommerce-order table.woocommerce-table--order-details {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  background: transparent;
}

/* No borders on rows: Elessi drew a grey #ececec line on the first totals
   row, doubling our hairline. The cells carry the hairlines. */
html body.deviceland-shop .dl-bag .woocommerce-order table.woocommerce-table--order-details tfoot,
html body.deviceland-shop .dl-bag .woocommerce-order table.woocommerce-table--order-details tr {
  border: 0;
  background: transparent;
  box-shadow: none;
}

html body.deviceland-shop .dl-bag .woocommerce-order table.woocommerce-table--order-details td.product-name,
html body.deviceland-shop .dl-bag .woocommerce-order table.woocommerce-table--order-details td.product-total {
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--hair-light);
  background: transparent;
  font-size: 15px;
  line-height: 1.45;
  vertical-align: top;
  color: var(--on-paper);
}

/* The price column is as wide as the price (it took half the row, and on a
   phone "40W USB-C" broke at its hyphen); the details get the rest. */
html body.deviceland-shop .dl-bag .woocommerce-order table.woocommerce-table--order-details td.product-total {
  width: 1%;
  padding-left: 24px;
  text-align: right;
  white-space: nowrap;
}

html body.deviceland-shop .dl-bag .woocommerce-order table.woocommerce-table--order-details td.product-name a {
  color: var(--on-paper);
  text-decoration: none;
}

html body.deviceland-shop .dl-bag .woocommerce-order table.woocommerce-table--order-details td.product-name a:hover {
  color: var(--ember-deep);
}

html body.deviceland-shop .dl-bag .woocommerce-order table.woocommerce-table--order-details td.product-name .wc-item-meta {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

html body.deviceland-shop .dl-bag .woocommerce-order table.woocommerce-table--order-details tfoot th,
html body.deviceland-shop .dl-bag .woocommerce-order table.woocommerce-table--order-details tfoot td {
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid var(--hair-light);
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: baseline;
}

html body.deviceland-shop .dl-bag .woocommerce-order table.woocommerce-table--order-details tfoot th {
  text-align: left;
  color: var(--muted-fg);
}

html body.deviceland-shop .dl-bag .woocommerce-order table.woocommerce-table--order-details tfoot td {
  padding-left: 24px;
  text-align: right;
  white-space: nowrap;
  color: var(--on-paper);
}

html body.deviceland-shop .dl-bag .woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child th,
html body.deviceland-shop .dl-bag .woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child td {
  padding-top: 16px;
  border-bottom: 0;
  font-weight: 500;
  color: var(--on-paper);
}

html body.deviceland-shop .dl-bag .woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child th {
  font-size: 15px;
}

html body.deviceland-shop .dl-bag .woocommerce-order table.woocommerce-table--order-details tfoot tr:last-child td {
  font-size: 20px;
  letter-spacing: -0.01em;
}

/* Elessi draws a grey #ececec rule with ::before on the total row's cells. */
html body.deviceland-shop .dl-bag .woocommerce-order table.woocommerce-table--order-details tfoot th::before,
html body.deviceland-shop .dl-bag .woocommerce-order table.woocommerce-table--order-details tfoot td::before {
  content: none;
}

/* One colour for a price: the digits were ember and the $ was ink. */
html body.deviceland-shop .dl-bag .woocommerce-order table.woocommerce-table--order-details .amount,
html body.deviceland-shop .dl-bag .woocommerce-order table.woocommerce-table--order-details .woocommerce-Price-currencySymbol {
  color: inherit;
  font-weight: inherit;
}

/* Addresses: plain text in two equal columns under their titles. */
html body.deviceland-shop .dl-bag .woocommerce-order .woocommerce-customer-details {
  margin: 48px 0 0;
}

html body.deviceland-shop .dl-bag .woocommerce-order .woocommerce-columns--addresses {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px 32px;
  margin: 0;
}

html body.deviceland-shop .dl-bag .woocommerce-order .woocommerce-columns--addresses::before,
html body.deviceland-shop .dl-bag .woocommerce-order .woocommerce-columns--addresses::after {
  content: none;
}

html body.deviceland-shop .dl-bag .woocommerce-order .woocommerce-columns--addresses .woocommerce-column {
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

html body.deviceland-shop .dl-bag .woocommerce-order address {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-style: normal;
  font-size: 14px;
  line-height: 1.7;
  color: var(--on-paper);
}

html body.deviceland-shop .dl-bag .woocommerce-order address p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: var(--muted-fg);
}

@media (max-width: 767px) {
  html body.deviceland-shop .dl-bag .woocommerce-order ul.woocommerce-thankyou-order-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
    margin-bottom: 40px;
  }

  html body.deviceland-shop .dl-bag .woocommerce-order .woocommerce-columns--addresses {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------
   Empty bag
   ------------------------------------------------------------
   The default is one grey sentence and a button, which reads like an error. An
   empty bag is not a failure state — it is a shopper who has not chosen yet, so
   it points at the two things that actually help: the catalogue, and the phone.
*/

html body.deviceland-shop .dl-bag .cart-empty,
html body.deviceland-shop .dl-bag .woocommerce-info.cart-empty {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--on-paper);
}

html body.deviceland-shop .dl-bag .return-to-shop {
  margin: 0;
}

html body.deviceland-shop .dl-bag .return-to-shop .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 24px;
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--ink);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  text-transform: none;
  text-decoration: none;
  color: var(--on-ink);
}

html body.deviceland-shop .dl-bag .return-to-shop .button:hover {
  background: var(--ink-3);
  border-color: var(--ink-3);
  color: var(--on-ink);
}

/* "Worth adding" on the bag is the shelf (shelf.css), as on product pages (Oct 24). */

/* ------------------------------------------------------------
   Phone
   ------------------------------------------------------------
   The cart table is the one piece here that cannot simply reflow: four columns
   at 375px would give the product name about nine characters. Elessi already
   collapses it with data-title attributes, so this only supplies the type and
   the alignment for that collapsed state.
*/

@media (max-width: 767px) {
  html body.deviceland-shop .dl-bag-head {
    padding-top: 24px;
    padding-bottom: 20px;
  }

  html body.deviceland-shop .dl-bag table.shop_table td {
    padding: 13px 0;
  }

  html body.deviceland-shop .dl-bag td.product-thumbnail img {
    width: 60px;
    height: 60px;
  }


  /* The panel collapses on a phone rather than nesting.

     A bordered, filled panel inside the page gutter, with a bordered table
     inside that, and Woo's own row rules inside that, produced three frames
     around one list — and because the innermost content then ran to the panel
     edge, every value sat hard against a border. On a 375px screen there is
     not room to spend 2-3px of rule and 18px of padding on each nesting
     level, and the panel is not carrying information: the heading already
     says "Your Order".

     So on mobile it becomes a plain region on the page ground, separated by a
     single rule, and the table gets the full gutter width. The filled panel
     returns at 768px where there is room for it. Same treatment for the
     cart's totals so the two pages agree. */
  html body.deviceland-shop .dl-bag #order_review,
  html body.deviceland-shop .dl-bag .cart_totals {
    padding: 22px 0 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--hair-light);
    border-radius: 0;
  }

  /* .order-review is Elessi's own wrapper, and it is the outermost of the
     three frames: #f8f8f8 with an 8px solid border in the same colour — a
     cool grey that does not appear anywhere in this palette. Flattened too,
     or collapsing the panel inside it just reveals a grey box around it. */
  html body.deviceland-shop .dl-bag .order-review {
    padding: 0;
    background: transparent;
    border: 0;
  }

  /* Woo puts the totals in a table whose right column holds the money. With
     the panel flattened the table spans the gutter, so the amount needs to be
     held on one line and given a little air away from the label. */
  html body.deviceland-shop .dl-bag table.shop_table td.product-total,
  html body.deviceland-shop .dl-bag table.shop_table td.product-subtotal,
  html body.deviceland-shop .dl-bag table.shop_table tr.order-total td,
  html body.deviceland-shop .dl-bag table.shop_table tr.cart-subtotal td {
    white-space: nowrap;
    padding-left: 14px;
  }

  /* "Enter your address to view shipping options" is a sentence, not a
     figure, so it must be allowed to wrap. */
  html body.deviceland-shop .dl-bag table.shop_table tr.woocommerce-shipping-totals td {
    white-space: normal;
  }

  html body.deviceland-shop .dl-bag table.shop_table td.product-name {
    padding-right: 6px;
  }

  /* Elessi prints the column name into data-title for the stacked layout. */
  html body.deviceland-shop .dl-bag table.shop_table td::before {
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted-fg);
  }

  html body.deviceland-shop .dl-bag .coupon {
    flex-wrap: wrap;
  }

  html body.deviceland-shop .dl-bag .coupon input.input-text {
    flex: 1 1 160px;
  }

  /* The rule that used to live here hid .is-next .dl-step-label on phones.
     It made sense against the old numbered-pill indicator, where hiding the
     word still left a visible "02"/"03" marker. The indicator is now caps and
     chevrons with no numerals, so hiding the labels left two bare arrows after
     the word CART — an indicator showing one step and two dead ends. All three
     labels stay; they are short enough to. */
}

/* Two columns from 1024px: details on the left, the order beside them. Elessi's
   grid already does this on the checkout; the cart's totals panel is what needs
   help, so it is given a sticky rail on the desktop widths where there is room
   for one. */
@media (min-width: 1024px) {
  html body.deviceland-shop .dl-bag .cart_totals {
    position: sticky;
    top: calc(var(--head-h-stuck, 78px) + 24px);
  }
}

/* ------------------------------------------------------------
   Mobile: nested desktop padding, and an unclipped carousel
   ------------------------------------------------------------ */

@media (max-width: 767px) {
  /* Measured on a 375px viewport: the order table came out 213px wide,
     indented 81px, because four wrappers each added their own desktop
     padding — .shell 24 + .columns 10 + .order-review 20 +
     .woocommerce-checkout-review-order 18. The product cell was left with
     106px, which is what broke "Cosmic Orange" into "Orang / e" and squeezed
     the card fields. The outer gutter is enough on a phone. */
  html body.deviceland-shop .dl-bag .order-review,
  html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order,
  html body.deviceland-shop .dl-bag .large-5.columns,
  html body.deviceland-shop .dl-bag .large-7.columns {
    padding-left: 0;
    padding-right: 0;
  }

  /* break-word is for URLs and part numbers, not for prose: it hyphenates
     ordinary words mid-syllable as soon as the column is tight. */
  html body.deviceland-shop .dl-bag table.shop_table td.product-name,
  html body.deviceland-shop .dl-bag table.shop_table th {
    word-break: normal;
    overflow-wrap: anywhere;
  }

  html body.deviceland-shop .dl-bag table.shop_table td.product-name dl.variation {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
  }

  /* No dt/dd rules here on purpose. The block at the top of this file already
     hides the "Size:"/"Colour:" labels and joins the values with a middot;
     restating it for mobile un-hid every label and produced exactly the
     stacked "Size: / 14-inch / Colour: / Silver" column being fixed. */

  /* The cross-sell row is a slick carousel whose track was never clipped, so
     its items ran 1,360px past the right edge and made the whole cart page
     scroll sideways — which is why the masthead icons appeared to be missing.
     Contained as a swipeable rail so every item stays reachable. */
  html body.deviceland-shop .dl-bag .cross-sells .nasa-slick-slider,
  html body.deviceland-shop .dl-bag .related .nasa-slick-slider {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  html body.deviceland-shop .dl-bag .cross-sells .nasa-slick-slider > .product,
  html body.deviceland-shop .dl-bag .related .nasa-slick-slider > .product {
    scroll-snap-align: start;
  }
}

/* Terms above Place order (deviceland_build_checkout_terms): one quiet
   panel, the built-to-order terms when the bag has a build, one tick. */
body.deviceland-shop .dl-build-terms {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--hair-light-2, rgba(20, 17, 14, 0.22));
  border-radius: 10px;
  background: var(--paper, #f8f2e8);
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(22, 19, 15, 0.72);
}

body.deviceland-shop .dl-build-terms p {
  margin: 0 0 10px;
}

body.deviceland-shop .dl-build-terms .dl-build-terms-head {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink, #16130f);
}

body.deviceland-shop .dl-build-terms a {
  color: var(--ink, #16130f);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.deviceland-shop .dl-build-terms-ack {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink, #16130f);
  cursor: pointer;
}

/* Place order without the tick (owner, Nov 9): the box turns red where it
   is, like a card field, instead of the page jumping to the notices. */
body.deviceland-shop .dl-build-terms.is-invalid {
  border-color: #9c2f1a;
  box-shadow: 0 0 0 1px #9c2f1a;
}

body.deviceland-shop .dl-build-terms-error {
  margin: 8px 0 0;
  font-size: 13px;
  color: #9c2f1a;
}

body.deviceland-shop .dl-build-terms-ack input {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--ink, #16130f);
}

/* Below both address columns, on the receipt's left edge. */
body.deviceland-shop .dl-order-change {
  clear: both;
  flex-basis: 100%;
  width: 100%;
  margin: 36px 0 0;
  padding-top: 0;
  text-align: left;
  font-size: 14px;
}

body.deviceland-shop .dl-order-change a {
  color: var(--muted-fg, #696053);
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.deviceland-shop .dl-order-change a:hover {
  color: var(--ink, #16130f);
}

/* Bag line facts (inc/reserve.php, deviceland_bag_line_facts; owner, Oct 24):
   the AppleCare+ part and Ready to ship / Additional processing time on their
   own rows, on the bag page and in the checkout summary. Same rules for the
   drawer in chrome.css and deviceland.css. */
html body.deviceland-shop .dl-bag dl.variation dd.variation-Part,
html body.deviceland-shop .dl-bag dl.variation dd.variation-AppleCarepart,
html body.deviceland-shop .dl-bag dl.variation dd.variation-Availability {
  display: block;
  margin-top: 3px;
}

html body.deviceland-shop .dl-bag dl.variation dd.variation-Part::after,
html body.deviceland-shop .dl-bag dl.variation dd.variation-AppleCarepart::after,
html body.deviceland-shop .dl-bag dl.variation dd.variation-Availability::after,
html body.deviceland-shop .dl-bag dl.variation dd:has(+ dt.variation-Part)::after,
html body.deviceland-shop .dl-bag dl.variation dd:has(+ dt.variation-AppleCarepart)::after,
html body.deviceland-shop .dl-bag dl.variation dd:has(+ dt.variation-Availability)::after {
  content: "";
}

html body.deviceland-shop .dl-bag .dl-ship {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

/* The bag table capitalises its option values ("13-Inch"); these two say
   exactly what the drawer and checkout say ("Ready to ship"). */
html body.deviceland-shop .dl-bag .dl-line-fact,
html body.deviceland-shop .dl-bag .dl-ship {
  text-transform: none;
}

html body.deviceland-shop .dl-bag .dl-ship.is-ready {
  color: var(--ember-deep);
}

html body.deviceland-shop .dl-bag .dl-ship.is-ready::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ember);
}

/* Apple's AppleCare+ mark before "AppleCare+ part …" (owner, Oct 24): small,
   the tile alone, a hairline on its rounded shape. */
html body.deviceland-shop .dl-bag .dl-line-fact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* One class more than the summary's thumbnail rule (td.product-name img,
   56px block), which drew the mark large and set off to the right. */
html body.deviceland-shop .dl-bag .dl-applecare-mark,
html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table td.product-name img.dl-applecare-mark,
html body.deviceland-shop .dl-bag td.product-name img.dl-applecare-mark {
  height: 18px;
  width: 18px;
  max-width: none;
  margin: 0;
  /* The summary's thumbnail rule pads, borders and whitens every image in
     the cell: the Apple drew 8px wide inside its 20px box. */
  padding: 0;
  border: 0;
  background: none;
  display: inline-block;
  vertical-align: middle;
  flex: none;
  object-fit: contain;
  border-radius: 23%;
  box-shadow: 0 0 0 0.5px rgba(22, 19, 15, 0.14);
}

html body.deviceland-shop .dl-bag .dl-line-fact {
  align-items: flex-start;
}

html body.deviceland-shop .dl-bag .dl-part {
  white-space: nowrap;
}

/* Each fact on its own full row: the details list is a flex row in the
   drawer and checkout, where a short "Ready to ship" sat beside the
   AppleCare+ line (owner's screenshot, Oct 24). */
html body.deviceland-shop .dl-bag dl.variation dd.variation-Part,
html body.deviceland-shop .dl-bag dl.variation dd.variation-AppleCarepart,
html body.deviceland-shop .dl-bag dl.variation dd.variation-Availability {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

/* Vertical rhythm: the AppleCare+ row sat 3px under the line above with a
   tile taller than the text; 7px above it, 5px above availability, and an
   18px tile that sits inside the line. */
html body.deviceland-shop .dl-bag dl.variation dd.variation-Part,
html body.deviceland-shop .dl-bag dl.variation dd.variation-AppleCarepart {
  margin-top: 7px;
}

/* "Part" (Oct 25) is now the first fact under the options; the AppleCare+
   line after it is a step down, as availability is. */
html body.deviceland-shop .dl-bag dl.variation dd.variation-Part ~ dd.variation-AppleCarepart {
  margin-top: 5px;
}

html body.deviceland-shop .dl-bag dl.variation dd.variation-Availability {
  margin-top: 5px;
}

html body.deviceland-shop .dl-bag img.dl-applecare-mark,
html body.deviceland-shop .dl-bag dl.variation img.dl-applecare-mark {
  width: 18px;
  height: 18px;
}

/* Spec lines (owner, Oct 24): 13px, one quiet step under the 14.5px body
   (they were 11.5-12px, a full jump smaller), in the muted taupe everywhere.
   The bag page's lines read Elessi's #555 through a more specific rule. */
html body.deviceland-shop .dl-bag td.product-name .variation dd,
html body.deviceland-shop .dl-bag td.product-name .variation dd p {
  color: var(--muted-fg);
}

/* Elessi's cart rules hid the dots between values
   (`.woocommerce-cart dl.variation dd::after { display: none }`) and
   capitalised every value ("13-Inch", "(3 Years)"), and its global `p` set
   Jost on them. One face and the values as written. */
html body.deviceland-shop .dl-bag dl.variation dd p {
  font-family: inherit;
  text-transform: none;
  color: inherit;
}

/* The order page's option list (Size: 13-inch ...) was Elessi's 12px #a5a5a5,
   about 2.3:1 on the paper, with values in Jost. Same 13px taupe spec line as
   the bag and checkout; labels kept, since this page is the record. */
html body.deviceland-shop .dl-bag .wc-item-meta,
html body.deviceland-shop .dl-bag .wc-item-meta li,
html body.deviceland-shop .dl-bag .wc-item-meta strong,
html body.deviceland-shop .dl-bag .wc-item-meta p {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.55;
  text-transform: none;
  color: var(--muted-fg);
}

/* Spec lines wrap as whole values with a dot BETWEEN values, never at the
   start or end of a line (owner, Oct 24). Each dot sits in the 14px gap to
   the LEFT of its value. The list is shifted left by that gap and clipped
   there, so the dot in front of the first value on every line falls in the
   clipped strip and is never drawn. Pure CSS, at any width: a narrow phone
   column simply gets one value per line. Same rule for the drawer
   (chrome.css, deviceland.css). The AppleCare+ part and availability rows
   take full rows of their own, with no dot. */
html body.deviceland-shop .dl-bag td.product-name dl.variation,
html body.deviceland-shop .dl-bag table.shop_table td.product-name dl.variation {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-left: -14px;
  clip-path: inset(-6px -6px -6px 12px);
}

html body.deviceland-shop .dl-bag td.product-name dl.variation dd {
  position: relative;
  display: block;
  margin-left: 14px;
}

html body.deviceland-shop .dl-bag td.product-name dl.variation dd::after {
  content: none;
}

html body.deviceland-shop .dl-bag td.product-name dl.variation dd::before {
  content: "\00b7";
  display: block;
  position: absolute;
  top: 0;
  left: -14px;
  width: 14px;
  text-align: center;
  color: rgba(20, 17, 14, 0.35);
}

html body.deviceland-shop .dl-bag td.product-name dl.variation dd.variation-Part,
html body.deviceland-shop .dl-bag td.product-name dl.variation dd.variation-AppleCarepart,
html body.deviceland-shop .dl-bag td.product-name dl.variation dd.variation-Availability {
  flex: 0 0 calc(100% - 14px);
}

html body.deviceland-shop .dl-bag td.product-name dl.variation dd.variation-Part::before,
html body.deviceland-shop .dl-bag td.product-name dl.variation dd.variation-AppleCarepart::before,
html body.deviceland-shop .dl-bag td.product-name dl.variation dd.variation-Availability::before {
  content: none;
}

/* Checkout summary: the product's text runs under its price (owner, Oct
   24). The review table is table-layout: fixed with two equal columns, and
   the totals rows below (shipping options included) need the second column,
   so the columns stay. Instead the product block spans both (200% of its
   cell, exact because the split is set to 50/50 here), the price sits at the
   top beside the name, and the name keeps 7em clear for it. The specs get
   ~270px instead of 145px, so they wrap to a few lines instead of eight. */
html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table th.product-name,
html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table th.product-total {
  width: 50%;
}

html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table td.product-name .co-wrap-item {
  width: 200%;
}

html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table td.product-name .co-wrap-info {
  flex: 1 1 auto;
  min-width: 0;
}

html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table td.product-name .co-product-name {
  padding-right: 7em;
}

html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table td.product-total {
  vertical-align: top;
}

/* The column's header sits over the prices, which are right-aligned. */
html body.deviceland-shop .dl-bag .woocommerce-checkout-review-order-table th.product-total {
  text-align: right;
}

/* Elessi gives the order table a faint drop shadow (1px 1px 2px, 6% black).
   On the flat panel it read as a stray vertical rule down the right edge
   (owner's screenshot, Oct 24). The design uses hairlines, not shadows. */
html body.deviceland-shop .dl-bag table.woocommerce-checkout-review-order-table {
  box-shadow: none;
}

/* The order page's AppleCare+ line: the mark carries its own 6px inline
   margin (emails and wp-admin load no theme CSS), so the flex gap of the bag
   lines doubled it to 12px. */
html body.deviceland-shop .dl-bag .dl-line-fact.dl-order-fact {
  gap: 0;
  align-items: center;
}

/* ------------------------------------------------------------
   Address suggestions at checkout (Oct 26; assets/js/address-autocomplete.js)
   ------------------------------------------------------------
   One quiet list under Address line 1, in the page's paper and hairlines:
   the street in ink, the town and state muted, the active row on the paper
   tint. Google's required credit sits small at the foot. */
html body.deviceland-shop .dl-bag .dl-addr-row {
  position: relative;
}

html body.deviceland-shop .dl-bag .dl-addr-list {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 50;
  margin: 4px 0 0;
  padding: 4px 0;
  list-style: none;
  border: 1px solid var(--hair-light-2);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(22, 19, 15, 0.12);
}

html body.deviceland-shop .dl-bag .dl-addr-list[hidden] {
  display: none;
}

html body.deviceland-shop .dl-bag .dl-addr-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0;
  padding: 10px 14px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
  cursor: pointer;
}

html body.deviceland-shop .dl-bag .dl-addr-item:hover,
html body.deviceland-shop .dl-bag .dl-addr-item[aria-selected="true"] {
  background: var(--paper-2);
}

html body.deviceland-shop .dl-bag .dl-addr-rest {
  font-size: 13px;
  color: var(--muted-fg);
}

html body.deviceland-shop .dl-bag .dl-addr-credit {
  margin: 4px 0 0;
  padding: 6px 14px 4px;
  border-top: 1px solid var(--hair-light);
  font-family: var(--sans);
  font-size: 11px;
  text-align: right;
  color: var(--muted-fg);
}