/* The basket page for accesoriiferma.ro.
 *
 * Scoped to body.af-cart so nothing here can reach another page. The
 * markup it styles is woocommerce/cart/cart.php in this child theme;
 * nothing below hides anything, because there is nothing left over to
 * hide.
 *
 * The audience decides the numbers, same as on the checkout: smallholders
 * past fifty, on a telephone, on rural mobile data. 56px is the height of
 * anything you have to hit and it is the SAME 56px everywhere on the page,
 * 17px the floor for anything you have to read, and colours are picked by
 * computing the WCAG relative-luminance ratio against the colour the
 * browser actually paints.
 *
 * !important appears where it does because ux.css sets the same property
 * with !important - .quantity .qty carries min-height:54px!important and
 * font-size:18px!important - and because XStore's cart.min.css and
 * quantity-types.min.css do the same. Every one of them was checked first;
 * none of them is decorative.
 */

body.af-cart{
  /* Ink: 16.83:1 on white. */
  --afc-ink:#1d1d1f;
  /* Secondary ink: 8.81:1 on white. Replaces the #888888 (3.54:1) the
     theme drew the stepper glyphs and the SKU column in. */
  --afc-ink-2:#4a4a4f;
  /* Dark green carries words (7.87:1 on white); the mid green is the
     button ground, where white on it is 5.13:1. */
  --afc-green:#1b5e20;
  --afc-green-mid:#2e7d32;
  --afc-ground:#f5f5f7;
  --afc-ground-2:#ececf0;
  --afc-line:#d9d9de;
  /* The drawer's remove red, unchanged, so the two agree: 6.86:1 on
     white, and white on it is 6.44:1. */
  --afc-remove:#8a2c2c;
  --afc-remove-dark:#742525;
  --afc-remove-tint:#f6eded;
  /* Not green. A green ring on a green button is invisible, and the ring
     is the only thing telling a keyboard user where it is. */
  --afc-focus:#0b65c2;
  --afc-radius:14px;

  /* ONE height. The coupon field, its OK button, "Golește coșul" and
     every part of the quantity stepper are all driven from this and
     nothing sets a height of its own. Before: 54.00 / 54.00 / 34.91, and
     a stepper whose wrapper was 28.00 around a 54.00 field. */
  --afc-control:56px;
  /* The bin is 48px rather than 56: it is a single icon, not a control
     you read, and 48 is still above the 44pt floor the Apple guidance
     sets for a touch target. The drawer draws it at 38 because a 360px
     panel cannot spare the width; a full page can. */
  --afc-bin:48px;
}


/* ------------------------------------------------------------------
   1. The two columns.

   XStore emits a floated bootstrap row. Floats give the summary no
   containing block taller than itself, which is the condition
   position:sticky needs, so the row becomes a grid and the columns stop
   floating.
   ------------------------------------------------------------------ */
body.af-cart .af-cart__row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
  align-items:start;
  gap:36px;
  margin:0;
}

body.af-cart .af-cart__row > .af-cart__main,
body.af-cart .af-cart__row > .af-cart__side{
  float:none;
  width:auto;
  max-width:none;
  padding:0;
  min-width:0;
}

/* Placed by name rather than left to auto-flow. Measured: with auto
   placement the list landed in the 380px track and the summary in the
   1fr one - the product name came out 0.00px wide and wrapped one
   character per line. Bootstrap's .col-md-* carry a float and a
   percentage width that the grid resolves before auto-placement sees
   them; naming the column is the fix that does not depend on which
   rule wins. */
body.af-cart .af-cart__row > .af-cart__main{grid-column:1;grid-row:1}
body.af-cart .af-cart__row > .af-cart__side{grid-column:2;grid-row:1}

/* 1199, not 991.

   The five-column line has a floor: 96 thumb + 188 stepper + ~100 for
   the line total + 48 bin = 432px of fixed track, plus four 20px gaps,
   so it cannot be drawn under ~512px and needs about 712px before the
   name column is wide enough to read. Two columns leave the list
   (window inner - 380 summary - 36 gap): 492px at 1024 and 724px at
   1200. Measured at 1024 the 1fr name track collapsed to ~92px and
   "Adapatoare 1l pentru porumbei, albastru" broke one word per line
   with the CANTITATE label painting over it. So the summary drops below
   the list for the whole band where the list cannot hold five columns,
   and two columns resume at 1200 where it can.

   It also puts the coupon field, its OK button and "Goleste cosul" back
   on one row at 1024: they need 440 + 24 + 180 = 644px and the stacked
   list gives them ~908. At 991 they wrapped and lost the shared
   baseline the owner asked for. */
@media (max-width:1199px){
  body.af-cart .af-cart__row{
    grid-template-columns:minmax(0,1fr);
    gap:28px;
  }

  /* The placement above has to be undone as well as the tracks.
     Measured at 500px: with one track declared but the summary still
     pinned to column 2, the grid built an implicit second column and
     drew both side by side in half a telephone each - the product name
     wrapped to one word per line. */
  body.af-cart .af-cart__row > .af-cart__main{grid-column:1;grid-row:1}
  body.af-cart .af-cart__row > .af-cart__side{grid-column:1;grid-row:2}
}


/* ------------------------------------------------------------------
   2. The list of lines.
   ------------------------------------------------------------------ */
body.af-cart .af-cart__head{
  margin:0 0 4px;
}

body.af-cart .af-cart__title{
  margin:0;
  font-size:24px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--afc-ink);
  /* The theme uppercases every h2 in this area. A name is easier to read
     in the case it is written in, and ALL CAPS removes the word shapes
     older eyes use to read quickly. */
  text-transform:none;
}

body.af-cart .af-cart__count{
  margin:4px 0 0;
  font-size:17px;
  line-height:1.4;
  color:var(--afc-ink-2);
}

body.af-cart .af-cart__lines{
  margin:16px 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--afc-line);
}

body.af-cart .af-line{
  position:relative;
  display:grid;
  grid-template-columns:96px minmax(0,1fr) auto auto var(--afc-bin);
  grid-template-areas:
    "thumb body qty total bin"
    "ask   ask  ask ask   ask";
  align-items:center;
  column-gap:20px;
  row-gap:0;
  margin:0;
  padding:20px 0;
  border-bottom:1px solid var(--afc-line);
  background:none;
}

/* The picture: square, on the page's own grey so a product photographed
   on white still has an edge. */
body.af-cart .af-line__thumb{
  grid-area:thumb;
  width:96px;
  height:96px;
  border-radius:12px;
  overflow:hidden;
  background:var(--afc-ground);
}

body.af-cart .af-line__thumb a{display:block;width:100%;height:100%}

body.af-cart .af-line__thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  margin:0;
}

body.af-cart .af-line__body{
  grid-area:body;
  min-width:0;
}

body.af-cart .af-line__name{
  display:block;
  font-size:18px;
  font-weight:600;
  line-height:1.35;
  color:var(--afc-ink);
  text-decoration:none;
  letter-spacing:-.005em;
  /* Padding out and margin back in by the same 10px: the link keeps the
     position it had to the pixel, and gains a 44px-tall hit area. On one
     line the name box is 24.30px, which is the only target on the line
     under the 44pt floor - the stepper is 56 and the bin 48. It wrapped
     to two lines before, which hid the problem rather than fixing it. */
  padding-block:10px;
  margin-block:-10px;
}

body.af-cart .af-line__name:hover,
body.af-cart .af-line__name:focus-visible{
  color:var(--afc-green);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* The unit price, which the table only ever showed in a column headed
   "Preț" - a word that sat next to "Subtotal" and explained neither. */
body.af-cart .af-line__unit{
  margin:6px 0 0;
  font-size:16px;
  line-height:1.4;
  color:var(--afc-ink-2);
}

body.af-cart .af-line__unit .amount{
  font-weight:600;
  color:var(--afc-ink-2);
}

body.af-cart .af-line__note{
  margin:6px 0 0;
  font-size:15px;
  color:var(--afc-remove);
}

body.af-cart .af-line .variation{
  margin:6px 0 0;
  font-size:15px;
  color:var(--afc-ink-2);
}

/* "Cantitate" and "Total" above their controls. On a phone the columns
   are gone and these two words are the only thing saying which number is
   which; on desktop they are the table head, moved next to what they
   label instead of forty pixels above it. */
body.af-cart .af-line__label{
  display:block;
  margin:0 0 6px;
  /* 15, not 13. These only appear on the widest layout, where there is
     room for them, and 13px was sitting exactly on the floor this page
     sets for anything a reader past fifty has to read. */
  font-size:15px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--afc-ink-2);
}

body.af-cart .af-line__qty{grid-area:qty}

body.af-cart .af-line__total{
  grid-area:total;
  text-align:right;
  min-width:96px;
}

body.af-cart .af-line__amount,
body.af-cart .af-line__amount .amount{
  font-size:19px;
  font-weight:700;
  color:var(--afc-ink);
  white-space:nowrap;
}

body.af-cart .af-line__single{
  display:inline-flex;
  align-items:center;
  height:var(--afc-control);
  padding:0 18px;
  border-radius:999px;
  background:var(--afc-ground);
  font-size:17px;
  color:var(--afc-ink);
}


/* ------------------------------------------------------------------
   3. The quantity stepper.

   Same pill as the product page - 56px targets, a hairline either side
   of the number - so the two controls that do the same job look the
   same. Measured before: a 28.00px wrapper with 19.61x28.00 minus and
   plus around a 54.00px field that overflowed it.
   ------------------------------------------------------------------ */
body.af-cart .af-line__qty .quantity{
  display:inline-flex!important;
  align-items:center;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:var(--afc-control)!important;
  margin:0!important;
  padding:0!important;
  border:1px solid #b9b9c0!important;
  border-radius:999px!important;
  background:#fff!important;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

body.af-cart .af-line__qty .quantity .af-qty__step{
  display:flex!important;
  align-items:center;
  justify-content:center;
  width:var(--afc-control)!important;
  min-width:var(--afc-control);
  height:var(--afc-control)!important;
  margin:0!important;
  padding:0!important;
  /* 10.15:1 on white. The theme drew these glyphs at #888888, 3.54:1,
     which on a stepper reads as "this button is switched off". */
  color:#3a3a3f!important;
  background:none!important;
  border:0;
  border-radius:0;
  /* <button> does not inherit the page's face or size on its own. */
  font:inherit;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .16s ease;
}

body.af-cart .af-line__qty .quantity .af-qty__step:hover{background:var(--afc-ground)!important}
body.af-cart .af-line__qty .quantity .af-qty__step:active{background:var(--afc-ground-2)!important}

body.af-cart .af-line__qty .quantity .af-qty__step svg{
  width:20px;
  height:20px;
  display:block;
}

body.af-cart .af-line__qty .quantity .af-qty__step:focus-visible{
  outline:3px solid var(--afc-focus);
  outline-offset:-3px;
}

/* A hairline either side of the number, so three parts read as one
   control rather than three loose things. */
body.af-cart .af-line__qty .quantity .minus{border-right:1px solid rgba(0,0,0,.14)!important}
body.af-cart .af-line__qty .quantity .plus{border-left:1px solid rgba(0,0,0,.14)!important}

body.af-cart .af-line__qty .quantity .qty{
  width:74px!important;
  min-width:74px!important;
  height:var(--afc-control)!important;
  min-height:var(--afc-control)!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  text-align:center;
  font-size:20px!important;
  font-weight:700!important;
  line-height:var(--afc-control)!important;
  color:var(--afc-ink)!important;
  -moz-appearance:textfield;
  appearance:textfield;
}

/* The browser's own spinner is 13px of arrow inside a control that
   already has two 56px buttons doing the same thing. */
body.af-cart .af-line__qty .quantity .qty::-webkit-outer-spin-button,
body.af-cart .af-line__qty .quantity .qty::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

body.af-cart .af-line__qty .quantity .qty:focus-visible{
  outline:3px solid var(--afc-focus);
  outline-offset:-3px;
}


/* ------------------------------------------------------------------
   4. Removing a line: the bin, and the question it asks.

   The bin, the tick and the cross are the drawer's, at the drawer's
   colours - inc/ux/assets/ux.css, .af-cart-drawer .af-cartrow__remove
   and .af-cartrow__yes / __no. The state is a checkbox instead of a
   script, so it survives with JavaScript off.
   ------------------------------------------------------------------ */

/* The checkbox sits in the same grid cell as the bin and on top of it,
   invisible but real: it is what a press and a Space key actually hit,
   and it is what :checked below reads. */
body.af-cart .af-line__toggle{
  grid-area:bin;
  z-index:2;
  width:var(--afc-bin);
  height:var(--afc-bin);
  margin:0;
  padding:0;
  opacity:0;
  cursor:pointer;
  justify-self:center;
  align-self:center;
  -webkit-appearance:none;
  appearance:none;
}

body.af-cart .af-line__bin{
  grid-area:bin;
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--afc-bin);
  height:var(--afc-bin);
  margin:0;
  justify-self:center;
  align-self:center;
  border-radius:12px;
  background:var(--afc-ground);
  /* Measured 4.08:1 at #77777e on this ground - over the 3:1 floor for a
     non-text control, under the 4.5:1 one, and the only thing marking the
     one way out of the basket. #5a5a60 measures 6.29:1 on the same ground
     and costs nothing. */
  color:#5a5a60;
  transition:background .15s ease, color .15s ease;
}

body.af-cart .af-line__toggle:hover ~ .af-line__bin{
  background:var(--afc-remove-tint);
  color:var(--afc-remove);
}

/* The ring goes on the bin, because the checkbox it belongs to has no
   pixels of its own. */
body.af-cart .af-line__toggle:focus-visible ~ .af-line__bin{
  outline:3px solid var(--afc-focus);
  outline-offset:3px;
  background:var(--afc-remove-tint);
  color:var(--afc-remove);
}

/* Asked, and waiting: the bin stays where it is, pressed-looking, so the
   line does not jump under a thumb that is still on the screen. */
body.af-cart .af-line__toggle:checked ~ .af-line__bin{
  background:var(--afc-remove-tint);
  color:var(--afc-remove);
}

body.af-cart .af-line__ask{
  grid-area:ask;
  display:none;
  align-items:center;
  gap:10px;
  margin:16px 0 0;
  padding:12px 14px;
  border-radius:12px;
  background:var(--afc-remove-tint);
}

body.af-cart .af-line__toggle:checked ~ .af-line__ask{display:flex}

body.af-cart .af-line__askq{
  flex:1 1 auto;
  min-width:0;
  font-size:17px;
  font-weight:600;
  /* 7.97:1 on the tint it sits on. */
  color:#7a2222;
}

body.af-cart .af-line__yes,
body.af-cart .af-line__no{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:var(--afc-bin);
  height:var(--afc-bin);
  padding:0;
  margin:0;
  border:0;
  border-radius:12px;
  cursor:pointer;
  text-decoration:none;
  transition:background .15s ease;
}

body.af-cart .af-line__yes{background:var(--afc-remove);color:#fff}
body.af-cart .af-line__yes:hover,
body.af-cart .af-line__yes:focus{background:var(--afc-remove-dark);color:#fff}
body.af-cart .af-line__no{background:#fff;color:#3a3a3f}
body.af-cart .af-line__no:hover{background:var(--afc-ground-2)}

body.af-cart .af-line__yes:focus-visible{
  outline:3px solid var(--afc-focus);
  outline-offset:3px;
}


/* ------------------------------------------------------------------
   5. The coupon, the empty-cart link, and the one height they share.

   This is what the owner photographed. Measured before, at 1440x1000:
   the field 54.00px tall, the OK button 54.00px but with its label
   drawn 25px right of centre and running out of its own box, and
   "Golește coșul" 34.91px - a third height on one row. They are all
   var(--afc-control) now and none of them sets a height of its own.
   ------------------------------------------------------------------ */
body.af-cart .af-cart__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px 24px;
  margin:24px 0 0;
  padding:0;
}

body.af-cart .af-coupon{
  flex:1 1 320px;
  min-width:0;
  max-width:440px;
}

/* A visible label, not a screen-reader one. The field's only explanation
   used to be its placeholder, and a placeholder leaves the moment typing
   starts, taking the only instruction with it. */
body.af-cart .af-coupon__label{
  display:block;
  margin:0 0 8px;
  font-size:17px;
  font-weight:600;
  line-height:1.4;
  color:var(--afc-ink);
}

body.af-cart .af-coupon__row{
  display:flex;
  align-items:stretch;
  gap:10px;
}

body.af-cart .af-coupon__input,
body.af-cart .af-coupon__go,
body.af-cart .af-clear{
  /* The three controls the owner asked to be exactly equal. height and
     min-height together, because XStore sets min-height on inputs and a
     bare height loses to it. box-sizing because the theme's reset does
     not reach an <a> styled as a button. */
  box-sizing:border-box!important;
  height:var(--afc-control)!important;
  min-height:var(--afc-control)!important;
  max-height:var(--afc-control)!important;
  border-radius:12px!important;
  font-size:17px!important;
  line-height:normal!important;
  margin:0!important;
}

body.af-cart .af-coupon__input{
  flex:1 1 auto;
  min-width:0;
  padding:0 16px!important;
  border:1px solid #b9b9c0!important;
  background:#fff!important;
  color:var(--afc-ink)!important;
  /* A coupon is typed in capitals and read back character by character;
     the shop's body face is proportional, so 0 and O sit at different
     widths. */
  letter-spacing:.02em;
}

body.af-cart .af-coupon__input::placeholder{
  /* 4.61:1 on white - a placeholder still has to be readable. The theme's
     own placeholder grey was #888888, 3.54:1. */
  color:#75757c;
  opacity:1;
}

body.af-cart .af-coupon__input:focus,
body.af-cart .af-coupon__input:focus-visible{
  outline:3px solid var(--afc-focus);
  outline-offset:-1px;
  border-color:var(--afc-focus)!important;
}

/* A flex box centring its own child, in both axes. That is the whole fix
   for the label that was sitting off to the right. */
body.af-cart .af-coupon__go{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:auto;
  min-width:84px;
  padding:0 20px!important;
  border:1px solid var(--afc-ink)!important;
  background:var(--afc-ink)!important;
  color:#fff!important;
  font-weight:600!important;
  text-align:center;
  text-transform:none!important;
  cursor:pointer;
  transition:background .16s ease;
}

body.af-cart .af-coupon__go:hover{background:#000!important;border-color:#000!important}

body.af-cart .af-coupon__go:focus-visible{
  outline:3px solid var(--afc-focus);
  outline-offset:3px;
}

body.af-cart .af-cart__clear{
  flex:0 0 auto;
  display:flex;
  align-items:flex-end;
}

body.af-cart .af-clear{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 22px!important;
  border:1px solid #b9b9c0!important;
  background:#fff!important;
  /* 8.81:1 on white. It was 11.9px at #222222 before - a destructive
     action drawn smaller than everything around it. */
  color:var(--afc-ink-2)!important;
  font-weight:600!important;
  text-transform:none!important;
  letter-spacing:0!important;
  text-decoration:none!important;
  font-family:inherit!important;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  transition:background .16s ease, color .16s ease, border-color .16s ease;
}

body.af-cart .af-clear svg{flex:0 0 auto;display:block}

body.af-cart .af-clear:hover{
  border-color:var(--afc-remove)!important;
  background:var(--afc-remove-tint)!important;
  color:var(--afc-remove)!important;
}

body.af-cart .af-clear:focus-visible{
  outline:3px solid var(--afc-focus);
  outline-offset:3px;
}

/* XStore's own class="hidden" is what its script looks for before it
   will click this; it is not ours to remove, only to keep out of sight. */
body.af-cart .af-cart__actions button[name="update_cart"]{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}


/* ------------------------------------------------------------------
   6. The summary panel.
   ------------------------------------------------------------------ */
body.af-cart .af-sum{
  position:sticky;
  /* 88px clears the sticky header; 24 is the gap below it. */
  top:112px;
  padding:0;
  border:0;
}

/* Sticky only where sticky helps. The panel is about 420px tall with a
   couple of products in it; on a window shorter than that plus the
   header, pinning it only delays the moment the button comes into view.
   1199 matches the point above where the panel stops being a column and
   becomes the block under the list - there is nothing beside it left to
   stick to. */
@media (max-height:620px), (max-width:1199px){
  body.af-cart .af-sum{position:static}
}

/* The card is .cart-collaterals, not .cart_totals.

   Measured: .cart-collaterals arrives with border:2px solid #222222 and
   square corners - a hard black rectangle around the one panel that
   should feel like a receipt - and ux.css forces
   padding-left/right:0!important onto .woocommerce-cart .cart_totals, so
   any padding put on .cart_totals is stripped and the figures end up
   touching the border. Putting the card one level out satisfies both:
   the black border is the thing being replaced, and the padding lands on
   an element nobody else is forcing to zero. */
body.af-cart .af-sum .cart-collaterals{
  width:auto;
  margin:0;
  padding:24px;
  border:1px solid var(--afc-line);
  /* 18px, matching the --afr-lg the rest of the shop rounds to. */
  border-radius:18px;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}

body.af-cart .af-sum .cart_totals{
  width:auto!important;
  float:none!important;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}

/* The heading rendered at 32px - larger than the total it introduces,
   which is the number the panel exists to state. !important because the
   theme sets the size on h2 itself. */
body.af-cart .af-sum .cart_totals > h2{
  margin:0 0 16px!important;
  padding:0!important;
  border:0!important;
  font-size:20px!important;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--afc-ink);
  text-transform:none;
}

body.af-cart .af-sum .cart_totals table{
  width:100%;
  margin:0;
  border:0;
  border-collapse:collapse;
}

body.af-cart .af-sum .cart_totals table tr{border:0}

body.af-cart .af-sum .cart_totals table th,
body.af-cart .af-sum .cart_totals table td{
  padding:12px 0;
  border:0;
  border-bottom:1px solid var(--afc-line);
  font-size:17px;
  font-weight:400;
  /* 8.81:1. The theme drew the subtotal figure at #888888, 3.54:1, so
     the only two numbers on the panel had different weights for no
     reason anyone could name. */
  color:var(--afc-ink-2);
  text-align:left;
  text-transform:none;
}

body.af-cart .af-sum .cart_totals table td{text-align:right}

/* The subtotal figure came out #888888 - 3.54:1, below the 4.5:1 floor -
   so of the two numbers on the panel the first read as disabled. The
   colour is on the .amount span, not the cell. */
body.af-cart .af-sum .cart_totals table td .amount,
body.af-cart .af-sum .cart_totals table td bdi{
  color:var(--afc-ink-2);
}

body.af-cart .af-sum .cart_totals tr.order-total td .amount,
body.af-cart .af-sum .cart_totals tr.order-total td bdi{
  color:var(--afc-ink);
}

/* The total: the same shape as the one on the checkout, because it is
   the same number one page later.

   Emphasis by size and weight over a heavier rule, not by a filled box:
   28px against the 17px subtotal, both figures right-aligned in one
   column so they can be compared without moving your eye sideways, and
   the currency left in the casing WooCommerce writes it in - "lei", the
   way the product cards and the free-delivery line say it. The theme
   upper-cased it here and nowhere else. */
body.af-cart .af-sum .cart_totals tr.order-total th,
body.af-cart .af-sum .cart_totals tr.order-total td{
  padding-top:18px;
  border-bottom:0;
  border-top:2px solid var(--afc-ink);
  font-weight:700;
  color:var(--afc-ink);
  text-transform:none!important;
}

body.af-cart .af-sum .cart_totals tr.order-total th{font-size:20px}

body.af-cart .af-sum .cart_totals tr.order-total td,
body.af-cart .af-sum .cart_totals tr.order-total td strong,
body.af-cart .af-sum .cart_totals tr.order-total td .amount,
body.af-cart .af-sum .cart_totals tr.order-total td bdi{
  font-size:28px;
  line-height:1.15;
  font-weight:700;
  color:var(--afc-ink);
  text-transform:none!important;
}

/* The row above the total already carried a hairline of its own; two
   lines meeting on the same edge read as a mistake. */
body.af-cart .af-sum .cart_totals tr.cart-subtotal th,
body.af-cart .af-sum .cart_totals tr.cart-subtotal td{border-bottom:0}

body.af-cart .af-sum .cart_totals tr.order-total small,
body.af-cart .af-sum .cart_totals .includes_tax{
  display:block;
  margin-top:4px;
  font-size:14px;
  font-weight:400;
  text-transform:none!important;
  color:var(--afc-ink-2);
}

body.af-cart .af-sum .wc-proceed-to-checkout{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:20px 0 0;
  padding:0;
}

body.af-cart .af-sum .wc-proceed-to-checkout a{
  display:flex!important;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:100%;
  height:var(--afc-control);
  min-height:var(--afc-control);
  margin:0!important;
  padding:0 20px!important;
  border-radius:12px!important;
  font-size:18px!important;
  font-weight:700!important;
  line-height:normal!important;
  text-align:center;
  text-transform:none!important;
  letter-spacing:0!important;
  text-decoration:none;
}

body.af-cart .af-sum .wc-proceed-to-checkout .checkout-button{
  border:0!important;
  /* White on #2e7d32 is 5.13:1. */
  background:var(--afc-green-mid)!important;
  color:#fff!important;
}

body.af-cart .af-sum .wc-proceed-to-checkout .checkout-button:hover{
  background:var(--afc-green)!important;
}

body.af-cart .af-sum .wc-proceed-to-checkout .return-shop{
  border:1px solid #b9b9c0!important;
  background:#fff!important;
  color:var(--afc-ink)!important;
  font-weight:600!important;
}

body.af-cart .af-sum .wc-proceed-to-checkout .return-shop:hover{
  background:var(--afc-ground)!important;
}

body.af-cart .af-sum .wc-proceed-to-checkout a:focus-visible{
  outline:3px solid var(--afc-focus);
  outline-offset:3px;
}

/* The coupon WooCommerce lists once one is applied. */
body.af-cart .af-sum .cart-discount td .woocommerce-remove-coupon{
  font-size:15px;
  color:var(--afc-remove);
}


/* ------------------------------------------------------------------
   7. The free-shipping strip, which the promo module prints above the
   list. It arrives with its own styling; all it needs here is the same
   width and the same distance from the list as everything else.
   ------------------------------------------------------------------ */
body.af-cart .af-promo-threshold{
  margin:0 0 20px;
}


/* ------------------------------------------------------------------
   8. The tablet.

   Same two rows as the telephone below, entered earlier. The five
   columns need ~712px of line before the name track is readable, and a
   stacked list is only 669px wide at 768 and 731px at 834. Measured at
   768 with five columns the name track came out 161px - narrower than
   the 168px the same name gets at 390 - and wrapped to three lines. On
   two rows the name gets 517px at 768 and one line.

   The picture, the name and the bin on the first row; the stepper and
   the line total on the second. Nothing gets narrower than it was: the
   stepper keeps its 56px targets.
   ------------------------------------------------------------------ */
@media (max-width:900px){
  body.af-cart .af-line{
    grid-template-columns:88px minmax(0,1fr) auto var(--afc-bin);
    grid-template-areas:
      "thumb body  body  bin"
      "qty   qty   total total"
      "ask   ask   ask   ask";
    column-gap:16px;
    row-gap:16px;
    align-items:start;
  }

  body.af-cart .af-line__thumb{width:88px;height:88px}

  /* The two words that told you which number was which belonged in a
     table head; over the controls they only push them apart, and the
     pill and the price are unambiguous side by side. */
  body.af-cart .af-line__label{display:none}

  body.af-cart .af-line__qty{align-self:center}

  body.af-cart .af-line__total{
    align-self:center;
    min-width:0;
  }

  body.af-cart .af-line__ask{margin-top:2px}
}


/* ------------------------------------------------------------------
   9. The telephone.

   The tablet layout with everything a phone cannot spare taken off it:
   a smaller picture, smaller type, and the coupon and "Goleste cosul"
   one above the other instead of side by side.
   ------------------------------------------------------------------ */
@media (max-width:760px){
  body.af-cart .af-line{
    grid-template-columns:76px minmax(0,1fr) auto var(--afc-bin);
    grid-template-areas:
      "thumb body  body  bin"
      "qty   qty   total total"
      "ask   ask   ask   ask";
    column-gap:14px;
    row-gap:16px;
    padding:18px 0;
    align-items:start;
  }

  body.af-cart .af-line__thumb{width:76px;height:76px}

  body.af-cart .af-line__name{font-size:17px}
  body.af-cart .af-line__unit{font-size:15px}

  /* The two words that told you which number was which belonged in a
     table head; on one column they would push the controls apart for no
     gain, and the pill and the price are unambiguous side by side. */
  body.af-cart .af-line__label{display:none}

  body.af-cart .af-line__qty{align-self:center}

  body.af-cart .af-line__total{
    align-self:center;
    min-width:0;
  }

  body.af-cart .af-line__amount,
  body.af-cart .af-line__amount .amount{font-size:20px}

  body.af-cart .af-line__ask{margin-top:2px}

  body.af-cart .af-cart__actions{
    flex-direction:column;
    align-items:stretch;
    gap:16px;
  }

  /* flex-basis, not width. .af-coupon carries flex:1 1 320px, and once
     .af-cart__actions turns into a column that 320px is a HEIGHT: the
     block measured 308x320 at 390 against 308x88 of content, so 232px
     of blank page sat between the coupon and "Goleste cosul". */
  body.af-cart .af-coupon{
    flex:0 0 auto;
    max-width:none;
  }

  /* Full width, so the thumb has the whole row to land on. Still exactly
     var(--afc-control) tall, which is the point. */
  body.af-cart .af-clear{width:100%}

  body.af-cart .af-sum .cart_totals{padding:20px}
}

/* Very narrow: the stepper and the price stop sharing a row. */
@media (max-width:400px){
  body.af-cart .af-line{
    grid-template-columns:64px minmax(0,1fr) var(--afc-bin);
    grid-template-areas:
      "thumb body  bin"
      "qty   qty   qty"
      "total total total"
      "ask   ask   ask";
    row-gap:12px;
  }

  body.af-cart .af-line__thumb{width:64px;height:64px}
  body.af-cart .af-line__total{text-align:left}
  body.af-cart .af-line__askq{font-size:16px}
}


/* ------------------------------------------------------------------
   10. The empty basket.
   ------------------------------------------------------------------ */
body.af-cart .af-empty{
  max-width:520px;
  margin:24px auto 48px;
  padding:0 16px;
  text-align:center;
}

body.af-cart .af-empty__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:88px;
  height:88px;
  margin:0 0 20px;
  border-radius:50%;
  background:var(--afc-ground);
  color:#77777e;
}

body.af-cart .af-empty__title{
  margin:0 0 10px!important;
  font-size:24px!important;
  font-weight:700;
  color:var(--afc-ink);
  /* The theme's default was capitals, which removes the word shapes
     older eyes read by. */
  text-transform:none!important;
}

body.af-cart .af-empty__text{
  margin:0 0 24px;
  font-size:18px;
  line-height:1.5;
  color:var(--afc-ink-2);
}

body.af-cart .af-empty__action{margin:0}

body.af-cart .af-empty__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  height:var(--afc-control);
  padding:0 28px;
  border-radius:12px;
  /* White on #2e7d32 is 5.13:1. */
  background:var(--afc-green-mid);
  color:#fff;
  font-size:18px;
  font-weight:700;
  text-decoration:none;
  text-transform:none;
}

body.af-cart .af-empty__btn:hover{background:var(--afc-green);color:#fff}

body.af-cart .af-empty__btn:focus-visible{
  outline:3px solid var(--afc-focus);
  outline-offset:3px;
}