/* WooCommerce notices — the confirmation after COLLECT, and its siblings.

   No owning component: the same bar is printed on the product page, the shop,
   the bag and the account pages, by WooCommerce rather than by any widget of
   ours. So it lives here in the global chain (see inc/enqueue.php).

   What ships underneath is woocommerce.css's own treatment: a lilac-grey box
   with a 3px OLIVE-GREEN top rule and a green tick, and "View bag" as a bordered
   grey button. Nothing on this site is green or bordered, so the whole block is
   restated rather than patched. */

.woocommerce-notices-wrapper:empty {
  display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 14px 24px;
  border: 0;
  border-bottom: var(--ck-edge);
  border-radius: 0;
  background: var(--ck-commerce-surface);
  color: var(--ck-commerce-text);
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 1px;
  text-transform: uppercase;
  list-style: none;
}

/* woocommerce.css draws the tick/i/! as a ::before at a fixed left inset, which
   is what the 35px left padding was reserving. Both go.

   ⚠️ The ::after has to go with it. It is woocommerce.css's float clearfix, and
   in a FLEX container a pseudo-element is a flex item like any other — so
   `space-between` was distributing three items and parking "View bag" in the
   middle of the bar instead of at its right edge. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-message::after,
.woocommerce-info::after,
.woocommerce-error::after {
  content: none;
}

/* An error still has to read as one without introducing a colour: it is the
   only notice that is not the page telling you it did what you asked. */
.woocommerce-error {
  border-left: 3px solid var(--ck-ink);
  padding-left: 21px;
  font-weight: 700;
}

.woocommerce-error li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* "View bag" — a link, not a button. The one solid button on the product page
   is COLLECT, and a second filled box beside the confirmation competes with it.

   ⚠️ The class is doubled deliberately. woocommerce.css styles this as
   `.woocommerce a.button` (0,2,1) and the shop pages carry the `woocommerce`
   body class, so a single `.woocommerce-message .button` (0,2,0) loses and the
   grey box stays. */
.woocommerce-message a.button.button,
.woocommerce-info a.button.button,
.woocommerce-error a.button.button {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.woocommerce-message a.button.button:hover,
.woocommerce-info a.button.button:hover,
.woocommerce-error a.button.button:hover {
  background: none;
  color: inherit;
  opacity: 0.6;
}

/* role="alert" is focused by the browser on arrival, and the focus ring drew a
   blue box round the full-width bar. The bar is not interactive — the link
   inside it keeps its own ring. */
.woocommerce-message:focus,
.woocommerce-info:focus,
.woocommerce-error:focus {
  outline: none;
}

@media (max-width: 767px) {
  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
  }

  .woocommerce-error {
    padding-left: 13px;
  }
}


/* ⚠️ NOTHING IS PAINTED IN THE FLOW ONCE THE TOAST SCRIPT IS PRESENT. The
   notice is printed into the document by WooCommerce, so without this there is
   a full-width band under the header for the frames before cart-toast.js moves
   it — the *"old bar notification still shows at the load of page"* report.
   ⚠️ `html.ck-toast-js` is written by that script in the HEAD, so with JS off or
   the file missing this rule never applies and the ordinary notice shows.
   ⚠️ `.ck-toast-keep` is the script saying "this one stays where it is" — a
   notice inside the cart form or the checkout belongs in that layout. */
html.ck-toast-js .woocommerce-notices-wrapper > .woocommerce-message:not(.ck-toast-keep) {
  display: none;
}

/* -------------------------------------------------------------------------
   THE CONFIRMATION IS A TOAST — a card on the right, not a band in the page

   It began as a full-width strip printed into the flow (measured 1440x44 at
   y=64, pushing everything below it down) that stayed for the whole visit.
   `inc/assets/cart-toast.js` lifts WooCommerce's own node into this fixed layer
   and adds a close button and a deadline; the markup, the text and the VIEW BAG
   link are still WooCommerce's.

   ⚠️ A FULL-WIDTH BAND FLUSH UNDER THE HEADER COULD NOT WORK, and both faults
   came from the same place: it looked like part of the navigation without being
   it. Sliding away, the strip of page between the two showed through as a gap;
   and it sat at `--ckh-h`, which knows nothing about WordPress's admin bar, so
   with the bar visible it landed 32px high while the header itself was correct.
   Marek, 2026-08-31: *"just make it a toast notification: sitting on the right
   side of a screen, contained in a card, detached from the navbar — still,
   displayed below it, following it when hidden"*. Detached, there is no seam to
   show, and nothing to get wrong about where the navigation ends.

   ⚠️ `top` IS SET FROM JS, off the header's measured bottom — see place() in
   cart-toast.js. The transition here is 0.3s to match the header's own, so when
   the header slides away the toast travels with it rather than snapping.
   ------------------------------------------------------------------------- */

.ck-toast {
  position: fixed;
  top: 0;                 /* placed by cart-toast.js; this is the pre-JS resting value */
  right: 0;
  /* Above the page, below the lightbox (999999) and the pinch preview, which
     must never be covered by a notice. */
  z-index: 9000;
  /* ⚠️ The LAYER never takes the pointer — only the card inside it does. */
  pointer-events: none;
  /* ⚠️ DETACHED: the inset is the layer's padding rather than a margin on the
     card, so the card's own box still starts at the layer's content edge and a
     `-100%` slide clears it completely. */
  padding: 16px;
  /* ⚠️ CLIPS THE EXIT. The card slides up and must disappear into the gap
     rather than travel on over the navigation — the header is a sibling, so no
     z-index here can put the card behind it. */
  overflow: hidden;
  /* ⚠️ NO transition on `top` — cart-toast.js re-places this every frame while a
     notification is up, so there is nothing to interpolate and a transition
     would only make it lag the header it is following. */
}

.ck-toast .woocommerce-message,
.ck-toast .woocommerce-info,
.ck-toast .woocommerce-error {
  pointer-events: auto;
  position: relative;
  /* A card, not a strip: it sizes to its content and stops well short of the
     screen on a phone. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  margin-left: auto;              /* hold it to the right edge */
  padding: 16px 46px 16px 16px;   /* right side reserves the close button */
  background: var(--ck-popup-surface, #fafafa);
  /* The page ground and the card ground are the same colour, so the hairline is
     what makes it read as a card at all. Square, like everything else here. */
  border: var(--ck-edge);
  border-radius: 0;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
  opacity: 0;
  transform: translateY(calc(-100% - 24px));
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.ck-toast .woocommerce-message.is-in,
.ck-toast .woocommerce-info.is-in,
.ck-toast .woocommerce-error.is-in {
  opacity: 1;
  transform: none;
}

/* ⚠️ Going out, only the TRANSFORM is animated and the opacity is HELD — a card
   that fades while it travels is briefly a grey smear over the page. It leaves
   the way the navigation does, upward and out of sight.
   ⚠️ The selector names the ELEMENT, not just the state: `.ck-toast .is-going`
   is (0,2,0) and loses to `.ck-toast .woocommerce-message.is-in` (0,3,0), which
   is still on the node — measured, the transform stayed `none` through the whole
   dismissal and the notice vanished on the spot instead of sliding. The script
   also drops `is-in`, so one transform is never described by two equal rules.
   ⚠️ Past its own height, so a card with a hairline and a shadow clears the
   layer's padding as well and nothing is left peeking. */
.ck-toast .woocommerce-message.is-going,
.ck-toast .woocommerce-info.is-going,
.ck-toast .woocommerce-error.is-going {
  opacity: 1;
  transform: translateY(calc(-100% - 24px));
}

/* ⚠️ THE TITLE GETS ITS OWN LINE. The name and the sentence about it are two
   different things, and in a 360px card running them together broke the
   SENTENCE at whatever word happened to reach the edge. As a block the break
   falls after the title, where it means something.
   ⚠️ Scoped to the toast: the same span is emitted for notices that stay in the
   page (the cart's own), and there it should read as ordinary running text. */
.ck-toast .ck-item-name {
  display: block;
}

/* ⚠️ 44px target, 11px glyph — the popup close buttons' own figures. Doubled
   because `.elementor-kit-7 button` is (0,1,1) and would otherwise put its grey
   fill and 12px/24px padding into it. */
.ck-toast .ck-toast__x.ck-toast__x {
  position: absolute;
  top: 2px;
  right: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

.ck-toast .ck-toast__x.ck-toast__x:hover,
.ck-toast .ck-toast__x.ck-toast__x:focus-visible {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ck-toast,
  .ck-toast .woocommerce-message,
  .ck-toast .woocommerce-info,
  .ck-toast .woocommerce-error {
    transition-duration: 0.01ms;
  }
}