/**
 * Coccaro Loyalty — the left-edge tab, the drawer, the cart block and the
 * My Account page.
 *
 * Everything is namespaced .col-* and every rule is specific enough to survive
 * the Woodmart theme without a wall of !important. Where !important IS used it
 * is on button properties Woodmart sets globally — the Lucky Coupon plugin hit
 * exactly the same wall.
 *
 * z-index 9998 for the tab: one BELOW the Lucky Coupon sheet, so an open lucky
 * popup is never obscured by a points tab the customer did not ask for.
 */

:root {
    /* Coccaro Home's actual palette, lifted from coccaro-lucky-coupon so the
       two floating surfaces on this storefront look like the same shop.
       The previous navy/gold was invented and looked borrowed. */
    --col-blue: #455A71;        /* primary brand blue */
    --col-blue-dark: #38495c;
    --col-blue-soft: #c9d5e2;
    /* Blue and neutrals only. The beige accents (--col-tan / --col-sand /
       --col-cream) were removed on 2026-08-08: the identity is the blue, and
       a second warm family made the drawer read as a different shop's widget
       sitting on top of this one. */
    --col-neutral: #F5F7F9;     /* the only surface tint */
    --col-ink: #231F20;
    --col-line: #e2e8ee;
}

/* ------------------------------------------------------------------ the tab */

/**
 * !important on every property Woodmart sets globally on <button>.
 *
 * This is not defensive habit, it is a documented property of this theme:
 * the Lucky Coupon plugin had to do exactly the same thing, and it is written
 * down in CLAUDE.md ("Woodmart theme button CSS needs !important overrides").
 * Woodmart styles buttons at a higher specificity than a single class, so
 * without this the tab loses `position: fixed`, falls back into the document
 * flow at the very end of <body>, and becomes effectively invisible — the
 * markup is present and correct, and nothing appears on screen.
 */
.col-launcher {
    position: fixed !important;
    left: 20px !important;
    bottom: 20px !important;
    right: auto !important;
    top: auto !important;
    z-index: 9998 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 11px 17px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--col-blue) !important;
    box-shadow: 0 6px 20px rgba(35, 31, 32, .22) !important;
    color: #fff !important;
    cursor: pointer !important;
    font: 600 14px/1 system-ui, -apple-system, "Segoe UI", sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-indent: 0 !important;
    transition: background .18s ease, transform .18s ease !important;
}

.col-launcher:hover { background: var(--col-blue-dark) !important; transform: translateY(-1px) !important; }
.col-launcher:active { filter: brightness(1.1) !important; }
.col-launcher:focus-visible { outline: 3px solid var(--col-blue-soft) !important; outline-offset: 2px !important; }

.col-launcher__icon { display: inline-flex !important; align-items: center !important; }
.col-launcher__label { color: #fff !important; white-space: nowrap !important; }

/* The dot means "there is something here worth your attention". WHICH thing
   is decided by the CRM (LoyaltyNudge) — the plugin only draws it. */
.col-launcher__dot {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    width: 12px !important;
    height: 12px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #d5382a !important;
    border: 2px solid #fff !important;
}

/* One wiggle, then rest. A thing that moves forever is a thing people learn
   not to see; the class is added by JS once per browsing session. */
@keyframes col-wiggle {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(-9deg); }
    30% { transform: rotate(7deg); }
    45% { transform: rotate(-5deg); }
    60% { transform: rotate(3deg); }
    75% { transform: rotate(-1deg); }
}

.col-launcher.is-wiggling .col-launcher__icon { animation: col-wiggle .7s ease-in-out !important; }

@media (prefers-reduced-motion: reduce) {
    .col-launcher.is-wiggling .col-launcher__icon { animation: none !important; }
    .col-launcher { transition: none !important; }
}

@media (max-width: 600px) {
    .col-launcher { left: 14px !important; padding: 10px 15px !important; }
}

/* THE BOTTOM-LEFT CORNER IS SHARED. Three things stack there on a phone, and
   the launcher was landing on top of the first one:

     0–55px   Woodmart's sticky toolbar (`body.sticky-toolbar-on`) — fixed,
              bottom: 0, height 55px, no safe-area padding.
     72px     the Lucky Coupon 10% bar (`.clc-bar` / `.clc-progress`), which on
              mobile is FULL WIDTH (left: 10px; right: 10px) — so it covers the
              left corner too, not just the right.
     118px    where coccaro-lucky-coupon already lifts the WhatsApp widget and
              WPLoyalty's launcher while its promo is on screen.

   At `bottom: 14px` the pill sat entirely inside the toolbar's band, covering
   the menu, and was hidden under the 10% bar whenever that was showing. It is
   now placed in the same slots the other two floating widgets already use, so
   all three move together and none of them has to know about the others.

   BREAKPOINT IS 767px, NOT 600px, on purpose: the toolbar and the full-width
   10% bar switch to their desktop layout at `min-width: 768px`. Keying this off
   the 600px block above would leave 601–767px — every tablet in portrait —
   still overlapping. This block comes after that one so its `bottom` wins. */
@media (max-width: 767px) {
    .col-launcher { bottom: 72px !important; }

    /* `clc-promo-on` is set by coccaro-lucky-coupon. If that plugin is off the
       class never appears and this rule simply never matches — no dependency.
       132, not 118: the bar's top edge is ~118, so the two were touching. This
       tracks the same value coccaro-lucky-coupon uses for the WhatsApp widget —
       if one moves, move both. */
    body.clc-promo-on .col-launcher { bottom: 132px !important; }
}

/* Desktop needs no offset: there is no mobile toolbar, and above 768px the
   10% bar is a 400px pill anchored bottom-RIGHT (right: 24px), nowhere near
   this one. The base `bottom: 20px` stands. */

/* --------------------------------------------------------------- the drawer */

.col-scrim {
    position: fixed !important;
    inset: 0;
    z-index: 9998 !important;
    background: rgba(15, 20, 30, .45);
}

.col-drawer {
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 9999 !important;
    width: 82%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 0 16px 16px 0;
    box-shadow: 6px 0 26px rgba(0, 0, 0, .3);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .28s ease;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.col-drawer.is-open { transform: translateX(0); }

/* Respect the customer's own setting. A slide-in is decoration; nobody should
   have to feel motion-sick to spend their points. */
@media (prefers-reduced-motion: reduce) {
    .col-drawer { transition: none; }
}

.col-drawer__head {
    position: relative;
    padding: 22px 20px 20px;
    background: linear-gradient(150deg, var(--col-blue), var(--col-blue-dark));
    color: #fff;
    border-radius: 0 16px 0 0;
    text-align: center;
}

.col-drawer__logo {
    display: block;
    width: 104px;
    height: auto;
    margin: 0 auto 12px;
    /* The logo artwork is dark on transparent; on the blue header it needs to
       read as white rather than disappear. */
    filter: brightness(0) invert(1);
    opacity: .95;
}

.col-drawer__eyebrow {
    margin: 0;
    font-size: 9.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: .75;
    font-weight: 700;
}

.col-drawer__balance {
    margin: 6px 0 0;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1px;
}

.col-drawer__balance span {
    font-size: 12px;
    font-weight: 600;
    opacity: .8;
    margin-left: 4px;
}

.col-drawer__egp { margin: 6px 0 0; font-size: 12.5px; opacity: .92; }
.col-drawer__egp b { font-weight: 800; }

.col-drawer__body { padding: 16px 18px 24px; flex: 1; }

/* ---------------------------------------------------------- quick actions */

.col-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}

.col-quick__btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    border: 1px solid var(--col-line) !important;
    border-radius: 10px !important;
    padding: 11px 6px !important;
    background: #fff !important;
    color: var(--col-blue-dark) !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    cursor: pointer !important;
    text-transform: none !important;
    transition: border-color .15s ease, background .15s ease !important;
}

.col-quick__btn em {
    display: block;
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    color: #78828d;
    margin-top: 3px;
}

.col-quick__btn:hover {
    border-color: var(--col-blue) !important;
    background: var(--col-neutral) !important;
}

/* "Use everything" is the generous option, so it reads as the primary one and
   spans the full width rather than sitting in the grid as just another tile. */
.col-quick__btn.is-max {
    grid-column: 1 / -1;
    background: var(--col-blue) !important;
    border-color: var(--col-blue) !important;
    color: #fff !important;
}

.col-quick__btn.is-max em { color: rgba(255, 255, 255, .8); }
.col-quick__btn.is-max:hover { background: var(--col-blue-dark) !important; border-color: var(--col-blue-dark) !important; }
.col-quick__btn.is-busy { opacity: .55 !important; pointer-events: none !important; }

/* ------------------------------------------------------------- mini stats */

.col-stats {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 4px;
    background: var(--col-neutral);
    border-radius: 10px;
    text-align: center;
}

.col-stats > div { flex: 1; }

.col-stats b {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--col-blue-dark);
    letter-spacing: -.3px;
}

.col-stats span {
    display: block;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #78828d;
    margin-top: 3px;
    font-weight: 700;
}

/* ---------------------------------------------------------- how it works */

.col-how {
    margin-top: 18px;
    padding: 12px 14px;
    border: 1px dashed var(--col-line);
    border-radius: 10px;
}

.col-how p {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.65;
    color: #5f6874;
}

.col-how .col-mini-head { margin-top: 0; }
.col-how b { color: var(--col-blue-dark); }

/* ------------------------------------------------------------ the CTA block */

.col-cta {
    display: block;
    width: 100%;
    text-align: center;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 13px 10px !important;
    background: var(--col-blue) !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    line-height: 1.35;
    letter-spacing: .2px;
    cursor: pointer;
    text-transform: none !important;
}

.col-cta:hover { background: var(--col-blue-dark) !important; }

.col-cta--off {
    background: var(--col-neutral) !important;
    color: #78828d !important;
    cursor: default;
    font-weight: 700 !important;
}

.col-cta.is-busy { opacity: .6; pointer-events: none; }

/* ------------------------------------------------------------------- busy
   Since the drawer stopped reloading the page there is nothing else on screen
   to confirm a press landed, and redeeming is two round trips (mint, then
   redraw the cart). So: the button you pressed keeps full contrast and gains a
   spinner and a verb, and EVERY OTHER action in the drawer dims and stops
   responding. Dimming only what was clicked leaves the other amounts live, and
   that is how one intention becomes two coupons.

   !important throughout for the usual reason — Woodmart styles buttons at a
   higher specificity than a single class. */
.col-spin {
    display: inline-block !important;
    width: 13px !important;
    height: 13px !important;
    margin-right: 8px !important;
    vertical-align: -2px !important;
    border: 2px solid currentColor !important;
    border-right-color: transparent !important;
    border-radius: 50% !important;
    animation: col-spin .6s linear infinite;
}

.col-busy-label { vertical-align: baseline; }

@keyframes col-spin { to { transform: rotate(360deg); } }

/* Not "animation: none" — a spinner that does not spin reads as a frozen page.
   Slowed right down instead, so it still signals activity without motion that
   provokes. */
@media (prefers-reduced-motion: reduce) {
    .col-spin { animation-duration: 2.4s !important; }
}

/* Everything else in the drawer stands down. */
.col-drawer.is-working .col-cta,
.col-drawer.is-working .col-quick__btn,
.col-drawer.is-working .col-cancel,
.col-drawer.is-working .col-ghost-btn,
.col-drawer.is-working .col-copy {
    pointer-events: none !important;
}

.col-drawer.is-working .col-cta:not(.is-busy),
.col-drawer.is-working .col-quick__btn:not(.is-busy),
.col-drawer.is-working .col-cancel:not(.is-busy),
.col-drawer.is-working .col-ghost-btn:not(.is-busy),
.col-drawer.is-working .col-copy:not(.is-busy) {
    opacity: .4 !important;
    transition: opacity .15s ease;
}

/* The pressed one is the opposite: it must stay the clearest thing on screen,
   which is why the inherited .is-busy dimming is undone here. */
.col-drawer.is-working .col-cta.is-busy,
.col-drawer.is-working .col-quick__btn.is-busy,
.col-drawer.is-working .col-cancel.is-busy {
    opacity: 1 !important;
    cursor: progress !important;
}

/* The quick amounts are a grid of tall multi-line buttons; while busy the
   label collapses to one centred line so the spinner is not stranded above
   two rows of small print that no longer apply. */
.col-quick__btn.is-busy {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
}

.col-fine {
    margin: 8px 0 0;
    font-size: 11px;
    color: #8b939d;
    text-align: center;
    line-height: 1.5;
}

.col-msg { margin: 10px 0 0; font-size: 12px; text-align: center; line-height: 1.5; }
.col-msg.is-error { color: #a8452f; }
.col-msg.is-ok { color: #2f7a4a; }
/* In progress: deliberately neither green nor red — nothing has happened yet. */
.col-msg.is-working { color: #6b7580; }

.col-warn {
    margin: 12px 0 0;
    font-size: 12px;
    background: #fff6e8;
    border: 1px solid #f5dda8;
    color: #8a6420;
    padding: 8px 10px;
    border-radius: 7px;
    line-height: 1.5;
}

.col-applied {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--col-blue-dark);
    text-align: center;
}

.col-code {
    margin: 10px 0 0;
    text-align: center;
    font-size: 13px;
}

.col-code span {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-weight: 700;
    letter-spacing: 1px;
    background: #fff;
    border: 1px dashed var(--col-blue);
    color: var(--col-blue-dark);
    padding: 6px 12px;
    border-radius: 6px;
    display: inline-block;
}

.col-countdown { display: block; margin-top: 6px; font-size: 11px; color: #8b939d; font-style: normal; }

.col-cancel {
    display: block;
    width: 100%;
    margin-top: 10px;
    border: 1px solid #cfd6de !important;
    background: #fff !important;
    color: var(--col-blue) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    padding: 10px !important;
    border-radius: 9px !important;
    cursor: pointer;
}

.col-mini-head {
    margin: 18px 0 6px;
    font-size: 9px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: #848d98;
    font-weight: 700;
}

.col-earn {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: var(--col-ink);
    padding: 6px 0;
    border-bottom: 1px dashed #e8edf2;
}

.col-earn b { color: var(--col-blue-dark); white-space: nowrap; }

.col-ghost {
    display: block;
    margin-top: 16px;
    text-align: center;
    border: 1px solid #cfd6de;
    color: var(--col-blue) !important;
    font-weight: 700;
    font-size: 12px;
    padding: 11px;
    border-radius: 9px;
    text-decoration: none !important;
}

.col-ghost--inline { display: inline-block; margin-left: 8px; padding: 9px 16px; }

/* ------------------------------------------------------------- cart / checkout */



/* ------------------------------------------------------- My Account -> Points */

.col-page { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }

/* A branded hero, so the page reads as part of the shop rather than as a
   data table bolted onto the account area. */
.col-page__hero {
    background: linear-gradient(150deg, var(--col-blue), var(--col-blue-dark));
    color: #fff;
    border-radius: 14px;
    padding: 26px 20px 24px;
    text-align: center;
    margin-bottom: 6px;
}

.col-page__logo {
    display: block;
    width: 116px;
    height: auto;
    margin: 0 auto 14px;
    filter: brightness(0) invert(1);
    opacity: .95;
}

.col-page__hero-eyebrow {
    margin: 0;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: .72;
    font-weight: 700;
}

.col-page__hero-balance {
    margin: 8px 0 0;
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -1.8px;
}

.col-page__hero-balance span {
    font-size: 14px;
    font-weight: 600;
    opacity: .8;
    margin-left: 5px;
    letter-spacing: 0;
}

.col-page__hero-sub { margin: 8px 0 0; font-size: 13px; opacity: .92; }
.col-page__hero-sub b { font-weight: 800; }

.col-page__head {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid var(--col-line);
    padding-bottom: 16px;
}

.col-page__eyebrow {
    margin: 0;
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #848d98;
    font-weight: 700;
}

.col-page__balance {
    margin: 4px 0 0;
    font-size: 42px;
    font-weight: 800;
    color: var(--col-blue-dark);
    line-height: 1;
    letter-spacing: -1.5px;
}

.col-page__sub { margin: 6px 0 0; font-size: 13px; color: #6e7783; }

.col-page__stats { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #6e7783; }
.col-page__stats b { color: var(--col-blue-dark); margin-left: 4px; }

.col-card {
    border: 1px solid var(--col-line);
    border-radius: 10px;
    padding: 16px 18px;
    margin-top: 18px;
    background: #fff;
}

.col-card--gold { background: var(--col-neutral); border-color: var(--col-line); }
.col-card h3 { margin: 0 0 8px; font-size: 15px; color: var(--col-blue-dark); font-weight: 800; }
.col-card h3.col-spaced { margin-top: 20px; }
.col-k { margin: 0; font-size: 13px; color: #6e7783; line-height: 1.6; }
.col-empty { margin: 0; font-size: 13px; color: #8b939d; }

.col-cols { display: flex; flex-wrap: wrap; gap: 18px; }
.col-cols > .col-card { flex: 1 1 280px; }

.col-table { width: 100%; font-size: 12.5px; border-collapse: collapse; margin-top: 8px; }

.col-table th {
    text-align: left;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #848d98;
    padding: 0 0 6px;
    font-weight: 700;
}

.col-table td { padding: 7px 0; border-top: 1px solid #eaeff4; color: var(--col-ink); }
.col-right { text-align: right; }
.col-plus { color: #2f7a4a; font-weight: 700; }
.col-minus { color: #a8452f; font-weight: 700; }

.col-link {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 11.5px;
    background: #f2f5f8;
    border: 1px solid #dde4ec;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--col-ink);
    word-break: break-all;
    margin: 10px 0 0;
}

.col-copy {
    margin-top: 10px;
    border: 0 !important;
    background: var(--col-blue) !important;
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    padding: 9px 16px !important;
    border-radius: 8px !important;
    cursor: pointer;
    text-transform: none !important;
}

/* --------------------------------------------------------------- small screens */

@media (max-width: 480px) {
    .col-page__head { flex-direction: column; align-items: flex-start; }
    .col-page__balance { font-size: 34px; }
}

/* RTL: the tab belongs on the leading edge whichever way the page runs, but
   the storefront is English-only today so this is a safety net rather than a
   supported mode. */
[dir="rtl"] .col-launcher { left: auto !important; right: 20px !important; }
[dir="rtl"] .col-drawer { left: auto; right: 0; border-radius: 16px 0 0 16px; transform: translateX(100%); }
[dir="rtl"] .col-drawer.is-open { transform: translateX(0); }

/* ------------------------------------------- nudge, progress and conflict */

/* The nudge headline: the same sentence the dot is about, so opening the box
   answers the question the dot asked. */
.col-nudge {
    margin: 0 0 14px;
    padding: 10px 12px;
    background: var(--col-neutral);
    border-left: 3px solid var(--col-blue);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--col-blue-dark);
}

/* Shown instead of the redeem control below the minimum. Phase 4 rendered
   nothing at all in this state; this turns the same fact into a reason to
   come back. */
.col-progress {
    margin: 0 0 14px;
    padding: 14px 12px;
    text-align: center;
    background: var(--col-neutral);
    border-radius: 6px;
    font-size: 14px;
    color: var(--col-blue-dark);
}

.col-quick__btn small {
    display: block !important;
    margin-top: 4px !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    opacity: .75 !important;
}

/* An amount the current cart cannot absorb yet is still offered — it just
   says what it needs. Dimmed, not disabled. */
.col-quick__btn.is-future { opacity: .82 !important; }

.col-conflict {
    margin: 0 0 14px;
    padding: 14px;
    background: var(--col-neutral);
    border-radius: 8px;
}

.col-conflict__head { margin: 0 0 6px; font-size: 13px; color: #78828d; }

.col-conflict__code {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
    font-weight: 700;
    color: var(--col-blue-dark);
}

.col-conflict__rule { margin: 0 0 8px; font-size: 13px; color: #78828d; }
.col-conflict__compare { margin: 0 0 14px; font-size: 14px; color: var(--col-ink); }

.col-ghost-btn {
    display: block !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 11px !important;
    border: 1px solid var(--col-line) !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: var(--col-blue-dark) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
}

.col-ghost-btn:hover { border-color: var(--col-blue) !important; }
.col-ghost-btn:focus-visible { outline: 3px solid var(--col-blue-soft) !important; outline-offset: 2px !important; }

/* The checkout entry point. Not a banner — an offer the customer can take.
   Opens the same drawer the launcher opens. */
.col-entry {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    margin: 12px 0 !important;
    padding: 11px 17px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--col-blue) !important;
    color: #fff !important;
    font: 600 14px/1 system-ui, -apple-system, "Segoe UI", sans-serif !important;
    text-transform: none !important;
    cursor: pointer !important;
    transition: background .18s ease !important;
}

.col-entry:hover { background: var(--col-blue-dark) !important; }
.col-entry:focus-visible { outline: 3px solid var(--col-blue-soft) !important; outline-offset: 2px !important; }
.col-entry__icon { display: inline-flex !important; align-items: center !important; }
.col-entry__label { color: #fff !important; white-space: nowrap !important; }
.col-entry .col-launcher__dot { top: -2px !important; right: -2px !important; }
