/* ═══════════════════════════════════════════════════════════════════════════
   wn-cart-drawer.css — GENERATED. DO NOT EDIT.

   Source:    site/src/styles/_editorial-base.css + site/src/styles/checkout-ro.css
   Generator: scripts/gen-cart-drawer-css.py
   Rebuild:   python3 scripts/gen-cart-drawer-css.py

   The slide-out cart drawer, site-wide. `wn-checkout.css` deliberately does NOT
   contain these rules — it drops `.ck-drawer*` and it is enqueued on the cart
   and checkout only, which are the two pages a drawer is least needed on.

   Editing this file instead of the generator is how this project ended up with
   a duplicated `.vc-wrap` and a token contract in three places. Edit the design
   source, then re-run.
   ═══════════════════════════════════════════════════════════════════════════ */
.wn-cart__btn { display: inline-block; font-family: var(--wn-font-body); font-weight: 700;
           font-size: .95rem; padding: 15px 26px; border-radius: var(--wn-radius);
           text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
           transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.wn-cart__btn--primary { background: var(--wn-btn-primary-bg); color: var(--wn-btn-primary-fg); }
.wn-cart__btn--primary:hover, .wn-cart__btn--primary:focus-visible { background: var(--wn-btn-primary-bg-hover); }
.wn-cart__btn--ghost { background: transparent; color: var(--wn-color-brand-text);
                    border-color: var(--wn-rule); }
.wn-cart__btn--ghost:hover, .wn-cart__btn--ghost:focus-visible { border-color: var(--wn-color-brand-text);
  background: color-mix(in srgb, var(--wn-color-brand-text) 4%, transparent); }
.wn-cart__btn:active { transform: translateY(1px); }
.wn-cart__btn:focus-visible { outline: 2px solid var(--wn-color-accent-text); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .wn-cart__btn { transition: none; }
  .wn-cart__btn:active { transform: none; }
}
.wn-cart__lines { list-style: none; margin: 0; padding: 0; }
.wn-cart__line { display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 16px; align-items: center;
  padding: 20px 0; border-top: 1px solid var(--wn-rule); }
.wn-cart__line:first-child { border-top: 0; padding-top: 0; }
.wn-cart__line-media { width: 84px; }
.wn-cart__line-body { min-width: 0; }
.wn-cart__line-name { font-family: var(--wn-font-heading); font-weight: var(--wn-wt-heading);
  font-size: 1.05rem; line-height: 1.32; margin: 0; text-wrap: pretty; }
.wn-cart__line-name a { display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; }
.wn-cart__line-name a:hover { color: var(--wn-color-accent-text); text-decoration: underline;
                         text-underline-offset: 3px; }
.wn-cart__line-name a:focus-visible { outline: 2px solid var(--wn-color-accent-text); outline-offset: 3px; }
.wn-cart__line-meta { margin: 4px 0 0; font-size: .86rem; color: var(--wn-color-brand-muted);
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.wn-cart__line-side { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 20px); }
.wn-cart__line-price { font-family: var(--wn-font-body); font-weight: 700; font-size: 1.05rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  
  min-width: 8ch; text-align: right; }
.wn-cart__line-price, .wn-cart__line-unit { font-family: var(--wn-font-body); }
.wn-cart__line-unit { font-size: .8rem; color: var(--wn-color-brand-muted); font-variant-numeric: tabular-nums;
  white-space: nowrap; text-align: right; margin-top: 2px; }
.wn-cart__line-unit[hidden] { display: none; }
.wn-cart__line-remove { width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border: 0; background: none; cursor: pointer; border-radius: var(--wn-radius);
  color: var(--wn-color-brand-muted);
  transition: background-color .2s ease, color .2s ease; }
.wn-cart__line-remove:hover { background: color-mix(in srgb, var(--wn-color-brand-ember) 10%, transparent);
                         color: var(--wn-color-brand-ember); }
.wn-cart__line-remove:focus-visible { outline: 2px solid var(--wn-color-accent-text); outline-offset: -2px; }
.wn-cart__line-remove svg { width: 17px; height: 17px; }
.wn-cart__ship { margin: 22px 0 0; }
.wn-cart__ship-track { height: 6px; border-radius: 999px; background: var(--wn-rule); overflow: hidden; }
.wn-cart__ship-fill { height: 100%; border-radius: 999px; background: var(--wn-color-brand-secondary);
  transition: width .45s var(--wn-ease-out); }
.wn-cart__ship-fill--full { background: var(--wn-color-brand-primary); }
.wn-cart__ship-note { margin: 10px 0 0; font-size: .9rem; color: var(--wn-color-brand-muted);
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.wn-cart__ship-note strong { color: var(--wn-color-brand-text); }
@media (prefers-reduced-motion: reduce) {
  .wn-cart__ship-fill { transition: none; }
}
.wn-cart__cta-inner { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.wn-cart__empty { text-align: center; padding: clamp(36px, 6vw, 72px) 0; }
.wn-cart__empty-title { font-family: var(--wn-font-heading); font-weight: var(--wn-wt-heading);
                   font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0; }
.wn-cart__empty-lead { margin: 14px auto 0; max-width: 46ch; color: var(--wn-color-brand-muted);
                  line-height: 1.6; }
.wn-cart__empty-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
                     margin-top: 26px; }
.wn-cart { position: fixed; inset: 0; z-index: 130;
  background: color-mix(in srgb, var(--wn-color-brand-text) 42%, transparent);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease; }
.wn-cart.is-open { opacity: 1; pointer-events: auto; }
.wn-cart__panel { position: absolute; inset: 0 0 0 auto;
  width: min(430px, 92vw); height: 100%;
  display: flex; flex-direction: column;
  background: var(--wn-color-brand-bg);
  border-left: 1px solid var(--wn-rule);
  transform: translateX(100%);
  transition: transform .4s var(--wn-ease-out); }
.wn-cart.is-open .wn-cart__panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .wn-cart, .wn-cart__panel { transition: none; }
}
.wn-cart__top { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--wn-rule); flex: none; }
.wn-cart__title { font-family: var(--wn-font-heading); font-weight: var(--wn-wt-heading);
  font-size: 1.15rem; margin: 0; }
.wn-cart__count { color: var(--wn-color-brand-muted); font-family: var(--wn-font-body); font-size: .9rem; }
.wn-cart__close { width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: var(--wn-radius); background: var(--wn-color-brand-surface);
  color: var(--wn-color-brand-text); cursor: pointer; }
.wn-cart__close:hover { background: color-mix(in srgb, var(--wn-color-brand-text) 8%, transparent); }
.wn-cart__close:focus-visible { outline: 2px solid var(--wn-color-accent-text); outline-offset: 2px; }
.wn-cart__close svg { width: 19px; height: 19px; }
.wn-cart__body { flex: 1; overflow-y: auto; padding: 20px; min-height: 0;
  overscroll-behavior: contain; }
.wn-cart__foot { flex: none; padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--wn-rule); background: var(--wn-color-brand-bg); }
.wn-cart__sub { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  font-size: 1rem; }
.wn-cart__sub strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.wn-cart__subnote { margin: 6px 0 0; font-size: .82rem; color: var(--wn-color-brand-muted); }
.wn-cart__actions { display: grid; gap: 10px; margin-top: 16px; }
.wn-cart__actions .wn-cart__btn { width: 100%; text-align: center; }
.wn-cart .wn-cart__line { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 16px 0; }
.wn-cart .wn-cart__line-media { width: 64px; }
.wn-cart .wn-cart__line-name { font-size: .96rem; }
.wn-cart .wn-cart__line-name a { min-height: 0; display: inline; }
.wn-cart .wn-cart__line-side { grid-column: 1 / -1; align-items: center; justify-content: space-between;
  width: 100%; gap: 10px; margin-top: 10px; }
.wn-cart .wn-cart__line-price { min-width: 0; }
.wn-cart .wn-cart__line-name a { padding: 6px 0; }
@media (max-width: 700px) {
  .wn-cart__ship-note, .wn-cart__subnote, .wn-cart__count, .wn-cart .wn-cart__line-name, .wn-cart__line-meta { font-size: var(--wn-fs-body-sm); }
  .wn-cart__line-price { min-width: 5ch; }
  .wn-cart__line-side { gap: 5px; }
  .wn-cart__line { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  .wn-cart__line-media { width: 64px; }
  .wn-cart__line-side { grid-column: 2; align-items: center;
    justify-content: space-between; width: 100%; margin-top: 12px; }
}

/* ── 0. THE FRAGMENT WRAPPER AND THE REAL PRODUCT IMAGE ────────────────────
   `.wn-cart__inner` exists because WooCommerce's fragment refresh replaces an
   element wholesale: keyed on `.wn-cart` it would swap out the node carrying
   `is-open` and slam the panel shut on every cart change. It is therefore an
   extra node between the panel and its three regions, and it has to carry the
   column layout the panel's direct children used to have. */
.wn-cart__inner { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* The design's line media is `d15-slot`, the hatched "Foto" placeholder from
   before the photo shoot. The store renders real images, so the placeholder's
   two live values — the square ratio and the radius — are carried onto the
   `<img>` and the rest of that family is dropped. */
.wn-cart__line-media img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--wn-radius); display: block;
}

/* 🔴 THE CTA'S ICON NEEDS A SIZE. `.ck-cta svg` in the design carries it, and
   that rule belongs to the checkout page's submit button, which this drawer does
   not have — so the lock rendered at its intrinsic **88×88px** inside a 56px
   button. Measured 2026-08-22. The size comes across with the icon rather than
   with the button it happened to sit on in the design. */
.wn-cart__cta-inner svg { width: 18px; height: 18px; flex: none; }

/* Feedback while an add is in flight. Not decoration: measured 8.3 s from click
   to open on dev, because the POST is a full page render on a host where
   `/cos/` itself takes 8 s. A button that looks idle for eight seconds gets
   clicked again. */
form.cart.is-loading .single_add_to_cart_button { opacity: .65; cursor: progress; }

/* Third control in the footer, and deliberately NOT a third button. Emil
   approved two CTAs; this is the escape hatch for the one thing the drawer
   cannot do — change a quantity, which needs a full cart-form POST with
   `woocommerce-cart-nonce` and is out of v1. Sized as a link so it does not
   compete with the two decisions above it. */
.wn-cart__viewcart {
  display: block; text-align: center; margin-top: 4px; padding: 10px 0;
  font-size: var(--wn-fs-body-sm); color: var(--wn-color-brand-muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.wn-cart__viewcart:hover { color: var(--wn-color-brand-text); }
.wn-cart__viewcart:focus-visible { outline: 2px solid var(--wn-color-accent-text); outline-offset: 2px; }

/* ── 1. THE ADDED-PRODUCT BLOCK ────────────────────────────────────────────
   Emil's approved spec puts the product you just added at the TOP of the
   drawer, above the cart. The prototype has no add-to-cart, so it has no such
   block; this reuses the line vocabulary above and adds only the framing. */
.wn-cart__added {
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid var(--wn-rule);
  border-radius: var(--wn-radius);
  background: var(--wn-color-brand-surface);
}
.wn-cart__added-label {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 10px;
  font-family: var(--wn-font-body);
  font-size: var(--wn-fs-body-sm);
  font-weight: 700;
  color: var(--wn-color-brand-primary);
}
.wn-cart__added-label svg { width: 16px; height: 16px; flex: none; }
.wn-cart__added .wn-cart__line { border: 0; padding: 0; }
.wn-cart__added .wn-cart__line-side { display: none; }

/* ── 2. THE DRAWER'S OWN ERROR SLOT ────────────────────────────────────────
   The add-to-cart SUCCESS notice is suppressed (the drawer replaces it), but an
   ERROR must never be. When the add is intercepted by script the buyer never
   reloads the page the notice was queued for, so it is lifted into the panel. */
.wn-cart__alert {
  margin: 0 0 16px; padding: 12px 14px;
  border-radius: var(--wn-radius);
  border: 1px solid var(--wn-color-brand-ember);
  background: color-mix(in srgb, var(--wn-color-brand-ember) 10%, transparent);
  font-size: var(--wn-fs-body-sm); line-height: 1.5;
}
.wn-cart__alert:empty, .wn-cart__alert[hidden] { display: none; }

/* ── 3. SCROLL LOCK ────────────────────────────────────────────────────────
   A class rather than an inline style, because `<body>` is a flex container on
   this site and `#brx-content` a flex item: an inline `overflow` on either is a
   layout change as well as a scroll change. `scrollbar-gutter` keeps the page
   from jumping sideways by the scrollbar's width as the lock goes on. */
.wn-cart-lock { overflow: hidden; scrollbar-gutter: stable; }

/* Busy state while a remove is in flight. Visible enough to stop a second
   click, quiet enough not to look like an error. */
.wn-cart.is-busy .wn-cart__body { opacity: .55; pointer-events: none; }

/* ── 4. THE HEADER BADGE ───────────────────────────────────────────────────
   `wn-nav__count` is a Bricks global class on template 442 and keeps its own
   look. All this adds is the zero state: a badge reading "0" is noise, and the
   design's own nav shows the pip only when there is something in the cart. */
.wn-nav__count[hidden] { display: none !important; }
.wn-nav__cart { position: relative; }

/* ── 5. WOOCOMMERCE NOTICES CLEAR THE FIXED HEADER ─────────────────────────
   🔴 MEASURED DEFECT, 2026-08-22. `.woocommerce-notices-wrapper` is the first
   thing inside `div.product`, so it renders at document y=0 — and `#wn-nav` is
   `position: fixed`, 76.75px tall, `z-index: 80`. Every notice on a product
   page was therefore drawn UNDERNEATH the menu bar, including the "Vezi coșul"
   button inside it, which landed at x=1158 y=0: directly behind the
   "Consultație gratuită" CTA.

   Suppressing the add-to-cart success message fixes the case Emil hit, but an
   out-of-stock or validation ERROR would still print into the same dead zone.
   This is the rule that makes errors visible, and it is why the success
   suppression is safe.

   ⚠️ SCOPED TO THE PRODUCT PAGE, not site-wide. On `/cos/` and `/checkout/`
   the notice wrapper sits inside the page's own flow with `wn-checkout.css`
   already styling it; an 88px top margin there would be a gap, not a fix. */
body.single-product .woocommerce-notices-wrapper:not(:empty) {
  position: relative;
  z-index: 90;
  margin-top: calc(var(--wn-nav-h, 88px) + 12px);
  margin-bottom: 12px;
}