/* ============================================================
   THEME: "Finesse" overlay — recolors + refines the existing
   ভাতখেকো site to match a premium jewellery-brand look
   (ivory/cream background, deep forest-green primary, warm gold
   accent, serif display type). Loaded LAST after style.css and
   theme-winni.css, so redeclaring the same CSS variables and
   classes here re-themes the entire site uniformly — no page
   template, layout, or functionality changes required.
   ============================================================ */

:root{
  /* ============================================================
     Palette: warm ivory/white base, champagne-gold accent,
     deep-brown CTA/footer. Mapped onto the site's existing
     variable names so every component re-themes automatically.
     ============================================================ */

  /* ---- base surfaces ---- */
  --cream:#FBFAF7;         /* Warm White — top bar, hero */
  --cream-2:#F6F1E9;       /* Ivory — image areas / soft sections */
  --paper:#FFFFFF;         /* White — header, nav, sections, cards */
  --soft-section:#F7F5F1;

  /* ---- CTA / primary (was forest green, now Deep Brown) ---- */
  --maroon:#4A3428;        /* Deep Brown — buttons, CTAs, footer */
  --maroon-dark:#38261D;   /* Dark Brown — hover / footer-bottom */

  /* ---- text ---- */
  --ink:#202020;           /* Dark Text — headings */
  --body-text:#333333;
  --muted-text:#666666;
  --light-text:#999999;

  /* ---- accent ---- */
  --gold:#C99A5B;          /* Champagne Gold — accents */
  --gold-primary:#B77A24;
  --gold-light:#E1C49A;

  /* ---- borders ---- */
  --line:#E5E1DA;
  --card-border:#EEE9E1;

  --font-display:'Cormorant Garamond','Baloo Da 2','Noto Sans Bengali',serif;
  --font-body:'Jost','Noto Sans Bengali','Hind Siliguri',sans-serif;
  --radius:10px;

  /* ---- header/footer/home theme (assets/css/theme-winni.css variables) ---- */
  --wn-pink:#4A3428;        /* mirrors --maroon: Deep Brown */
  --wn-pink-deep:#38261D;   /* mirrors --maroon-dark: Dark Brown */
  --wn-purple:#202020;      /* headings / brand wordmark: Dark Text */
  --wn-pink-bg:#F7F5F1;     /* announcement bar: Soft Section */
  --wn-text-dark:#333333;   /* Body Text */
  --wn-text-muted:#666666;  /* Muted Text */
}

body{ font-family:var(--font-body); letter-spacing:.1px; }
h1,h2,h3,.brand-logo{ font-family:var(--font-display); font-weight:600; }

/* ---------- Brand wordmark: spaced-out serif capitals, like a jewellery logo ---------- */
.wn-brand .wn-brand-name,
.brand-logo{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--wn-purple);
}
.wn-brand .wn-brand-tagline{ letter-spacing:2px; }

/* ---------- Announcement bar: quiet cream strip instead of a loud pink band ---------- */
.wn-announce-bar{
  background:var(--cream-2); color:var(--wn-text-dark);
  font-family:var(--font-body); font-weight:500; letter-spacing:.3px;
}

/* ---------- Header icon row: give the cart badge breathing room from the edge on mobile ---------- */
.wn-header-icons{ padding-right:10px; }
@media (min-width:768px){ .wn-header-icons{ padding-right:0; } }
.wn-mobile-header, .wn-header-sticky-wrap, .wn-desktop-main-row,
.wn-top-utility-bar, .site-header{
  background:var(--cream) !important;
}
.wn-search-box{ background:var(--cream-2); }
.wn-desktop-search input{ border-color:var(--line); background:var(--paper); }
.wn-cat-tabs{ border-top-color:var(--line); }

/* ---------- Simple mobile footer: short about text + Read More toggle ---------- */
.wn-footer-legal-mobile{ padding:16px 16px 4px; font-size:12px; line-height:1.6; color:#444; text-align:justify; }
.wn-footer-legal-mobile .wn-readmore-toggle{ color:#1a73e8; font-weight:600; }
@media (max-width:991px){
  .wn-footer-stat-row{ display:grid; grid-template-columns:1fr 1fr; justify-content:start; text-align:left; gap:18px 12px; }
  .wn-footer-stat-row .item{ justify-content:flex-start; }
  .wn-footer-bottom-links{ justify-content:center; gap:14px 18px; }
}
.btn-brand, .btn-outline-brand, .btn-maroon,
.wn-view-all-btn, .wn-tile-btn, .must-have-btn, .wn-tabs-pill button,
.bk-tab, .form-control-brand + .btn, button.btn-brand{
  border-radius:8px !important;
}
.btn-brand{
  background:var(--maroon); letter-spacing:.6px; text-transform:uppercase; font-size:13px;
  padding:13px 26px;
}
.btn-brand:hover{ background:var(--maroon-dark); }
.btn-outline-brand{
  border-color:var(--maroon); color:var(--maroon); letter-spacing:.6px; text-transform:uppercase; font-size:13px;
}
.btn-outline-brand:hover{ background:var(--maroon); border-color:var(--maroon); }
.wn-tile-btn{ background:var(--maroon); letter-spacing:.4px; }
.wn-view-all, .see-all{ color:var(--maroon); font-weight:600; letter-spacing:.3px; }

/* ---------- Cards: crisp white on cream, soft shadow instead of a heavy border ---------- */
.product-card, .wn-product-card, .stat-card, .summary-box,
.wn-blog-card, .wn-cat-square-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 2px 14px rgba(38,35,29,.05);
}
.product-card .img-wrap, .pdp-gallery, .design-thumb, .cart-line img,
.category-thumb-img, .quick-shop-img{
  background:var(--cream-2) !important;
}

/* ---------- Badges & pills: gold for "new", deep green for status/discount ---------- */
.badge-new{ background:var(--maroon); letter-spacing:.4px; }
.discount-pill{ background:var(--wn-purple); }
.wn-cat-tab.active .wn-icon-circle{ border-color:var(--maroon); }
.wn-cat-tab.active{ color:var(--maroon); }
.wn-cat-tab.active::after{ background:var(--maroon); }
.wn-tabs-pill button.active{ background:var(--maroon); border-color:var(--maroon); }

/* ---------- Trust / stat strips: quiet cream instead of a bright yellow band ---------- */
.wn-trust-row{ background:var(--cream-2); }
.wn-trust-row .item i{ color:var(--maroon); }
.trust-item i{ color:var(--maroon); }

/* ---------- Section titles: uppercase, tracked sans — like "SHOP BY COLLECTION" in the reference ---------- */
.wn-section-title{
  font-family:var(--font-body); font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  font-size:13px; color:var(--wn-purple); margin-bottom:18px;
}
.wn-section-title.with-link{ align-items:center; }
@media (min-width:768px){ .wn-section-title{ font-size:14px; text-align:left; } .wn-section-title.with-link{ text-align:left; } }
.wn-section-sub{ font-family:var(--font-body); text-transform:none; letter-spacing:0; }
.section-title{ font-family:var(--font-display); font-weight:600; }

/* ---------- "View All" link: quiet tracked caps, gold arrow ---------- */
.wn-view-all, .see-all{
  color:var(--maroon); font-weight:600; letter-spacing:1px; text-transform:uppercase; font-size:11.5px;
}
.wn-view-all-btn{ border-color:var(--line); color:var(--wn-purple); letter-spacing:1px; text-transform:uppercase; font-size:11px; font-weight:700; }

/* ---------- Quick Shop / Category tiles: square-ish corners, white card, edge-to-edge image ----------
   Kept intentionally consistent between the two sections (same radius, same border, same
   label style) so "Quick Shop" and "Shop by Category" read as one matching pattern. */
/* ---------- Shop by Category: soft pink-white card, image + bold title ----------
   Restyled to match the reference: rounded card with a faint pink corner glow,
   product image centered with breathing room (not edge-to-edge), bold black
   title underneath. Desktop shows all 8 categories in a single row. */
.wn-cat-square-card{
  padding:10px 8px 14px; background:linear-gradient(160deg,#ffffff 55%,#fdeef2 100%);
  border:1px solid #f3d9e2; border-radius:18px; overflow:hidden; text-align:center;
  box-shadow:0 4px 16px rgba(196,60,110,.08); transition:box-shadow .15s ease, transform .15s ease;
}
.wn-cat-square-card:hover{ box-shadow:0 8px 22px rgba(196,60,110,.14); border-color:#f3d9e2; transform:translateY(-2px); }
.wn-cat-square-card img{
  width:100%; aspect-ratio:1/1; object-fit:contain; margin:0 0 8px; display:block; background:transparent;
}
.wn-cat-square-card .label{
  display:block; padding:0; font-size:14px; font-weight:800; letter-spacing:.2px;
  color:#1a1a1a; background:transparent;
}
@media (min-width:992px){
  .wn-category-row.row-cols-4 > .col{ flex:0 0 12.5%; max-width:12.5%; }
  .wn-cat-square-card .label{ font-size:15px; }
}
@media (max-width:767px){
  /* Desktop's rounded-corner look is intentional; on mobile the same
     radius looks heavier relative to the smaller tile size, so this
     is reduced to almost-square corners here specifically. */
  .wn-cat-square-card{ border-radius:4px; }
}

/* ---------- Quick Shop tile (unchanged square style, kept for mobile) ---------- */
.wn-quickshop-card{
  padding:0; background:var(--paper); border:1px solid var(--line); border-radius:4px;
  overflow:hidden; text-align:center; transition:box-shadow .15s ease;
}
.wn-quickshop-card:hover{ box-shadow:0 4px 12px rgba(38,35,29,.08); border-color:var(--line); }
.wn-quickshop-card img{
  width:100%; aspect-ratio:1/1; object-fit:cover; margin:0; display:block; background:var(--paper);
}
.wn-quickshop-card .label{
  display:block; padding:7px 4px 9px; font-size:11.5px; font-weight:700; letter-spacing:.4px;
  text-transform:none; color:var(--wn-purple); background:var(--paper);
}
.wn-quickshop-trust-text .pink{ color:var(--maroon); font-weight:700; }

/* ---------- Tighter gutters + margins throughout — square, compact grid, not spaced out ---------- */
.row.row-cols-4.g-2{ --bs-gutter-x:8px; --bs-gutter-y:8px; }
.row.row-cols-4.g-3{ --bs-gutter-x:8px; --bs-gutter-y:8px; }
.wn-section{ padding-top:16px; padding-bottom:16px; }
.wn-section.pt-0{ padding-top:0; }
.wn-section-title{ margin-bottom:10px; }
.wn-quickshop-trust-text{ margin:10px 0 8px !important; }



/* ---------- Hero: bigger serif headline, warm gold emphasis word ---------- */
.hero h1, .wn-hero-banner .wn-section-title{ font-family:var(--font-display); font-weight:600; }
.hero .sub-en{ letter-spacing:1px; text-transform:uppercase; font-size:11.5px; }
.hero-carousel .carousel-caption{ background:rgba(38,35,29,.55); }
/* Whole hero banner is now the click target (no separate button) — keep it looking like a plain image */
.wn-hero-slide-link{ color:inherit; text-decoration:none; }
.wn-hero-slide-link:hover{ color:inherit; }

/* ---------- Product price emphasis ---------- */
.product-info .price, .wn-product-card .price, .price-row .price{ color:var(--maroon); }
.wishlist-btn.active{ background:var(--maroon); }

/* ---------- Category / quick-shop circles: gold-tinted cream instead of pink-tinted ---------- */
.wn-cat-tab .wn-icon-circle{ background:var(--wn-pink-bg); color:var(--maroon); }
.cat-chip .circle, .cat-shortcut .circle{ background:var(--cream-2); color:var(--maroon); }
.cat-shortcut.active .circle{ background:var(--maroon); border-color:var(--maroon); }

/* ---------- Bottom mobile nav: white bar, deep green active state ---------- */
.wn-bottom-nav, .mobile-nav{ background:var(--paper); }
.wn-bottom-nav a.active, .mobile-nav a.active{ color:var(--maroon); }

/* ---------- Forms & inputs ---------- */
.form-control-brand{ border-radius:8px; border-color:var(--line); background:var(--paper); }
.form-control-brand:focus{ border-color:var(--maroon); box-shadow:0 0 0 3px rgba(31,61,46,.08); }
.phone-input-group{ border-radius:8px; background:var(--paper); border-color:var(--line); }
.phone-prefix{ background:var(--cream-2); }
.otp-box{ border-radius:8px; background:var(--paper); }
.otp-box:focus{ border-color:var(--maroon); }
.qty-box{ border-radius:8px; overflow:hidden; border-color:var(--line); }
.qty-box button{ background:var(--cream-2); }

/* ---------- Size selector / design thumbs on the product page ---------- */
.size-btn{ border-radius:8px; border-color:var(--line); }
.size-btn.active, .size-btn:hover{ border-color:var(--maroon); background:var(--maroon); }
.design-thumb{ border-radius:8px; border-color:var(--line); }
.design-thumb.active{ border-color:var(--maroon); box-shadow:0 0 0 1.5px var(--maroon); }

/* ---------- Footer: light neutral background (matches reference), dark text ---------- */
.site-footer{ background:var(--wn-purple); }
.wn-footer-legal-mobile{ color:var(--wn-text-muted); }
.wn-footer-legal-mobile .wn-readmore-toggle{ color:#1a73e8; }
.wn-footer-stat-row{ background:#eee; }
.wn-footer-stat-row .item{ color:var(--wn-text-dark); }
.wn-footer-stat-row .item i{ color:var(--wn-text-muted); }
.wn-footer-main{ background:#f6f6f6; }
.wn-footer-main h6{ color:var(--wn-text-dark); font-family:var(--font-display); font-weight:700; letter-spacing:.4px; }
.wn-footer-main a{ color:var(--wn-text-muted); }
.wn-footer-main a:hover{ color:var(--maroon); }
.wn-brand .wn-brand-name{ color:var(--wn-purple); }
.wn-brand .wn-brand-tagline{ color:var(--wn-text-muted); }
.wn-footer-social{ background:#fff; border-top:1px solid #eee; }
.wn-footer-social .icons a{ background:#f1f1f1; color:var(--wn-text-dark); }
.wn-footer-social strong{ color:var(--wn-text-dark); }
.wn-footer-bottom-links{ background:#fafafa; border-top:1px solid #eee; }
.wn-footer-bottom-links a{ color:var(--wn-text-muted); }
.wn-footer-bottom-links a:hover{ color:var(--maroon); }
.wn-footer-legal{ background:#fff; color:#999; }
.footer-bottom{ border-top-color:rgba(0,0,0,.08); }

/* ---------- Chat FAB / misc accents ---------- */
.wn-chat-fab{ background:var(--maroon); }
.wn-admin-edit-hint{ background:var(--maroon); }

/* ---------- Coupon / promo banners: gold code chip reads better on green ---------- */
.coupon-banner-text code{ background:rgba(201,162,75,.35); color:#fff; }
code{ color:var(--maroon); }

/* ---------- Must Have tiles: image-only, no text/button overlay ----------
   Each tile is a single admin-uploaded image (title/subtitle/button are already
   drawn INTO that image) — the whole tile is just a link wrapping the image.
   Never render title/subtitle/button_text as HTML text or a CSS button here.
   Layout: first 2 items large (2 per row), the rest in a 3-per-row grid — this
   matches the reference design and works automatically no matter how many
   items the admin adds (always: first 2 big, everything after that small). */
.wn-musthave-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:10px;
}
.wn-musthave-item{
  grid-column:span 2; display:block; border-radius:12px; overflow:hidden;
  box-shadow:0 2px 8px rgba(38,35,29,.10); background:var(--paper);
}
.wn-musthave-item.large{ grid-column:span 3; }
.wn-musthave-item img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block;
}
.wn-musthave-item.large img{ aspect-ratio:1/1; }

/* Desktop: first 3 tiles big in one row (3-per-row), remaining 5 tiles
   small in a single row (5-per-row) — matches the desktop reference. */
@media (min-width:992px){
  .wn-musthave-grid{ grid-template-columns:repeat(15,1fr); }
  .wn-musthave-item{ grid-column:span 3; }
  .wn-musthave-item.large,
  .wn-musthave-item.large-desktop{ grid-column:span 5; }
  .wn-musthave-item.large img,
  .wn-musthave-item.large-desktop img{ aspect-ratio:4/3; }
}

/* ---------- Must Have banner: single full-width banner, gently animated (not static) ---------- */
.wn-musthave-banner{ display:block; }
.wn-musthave-banner img{ width:100%; display:block; }

/* ---------- Hero banner: left/right swipe arrow buttons (desktop only) ---------- */
.wn-hero-banner{ position:relative; }
.wn-hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.18); opacity:1;
  align-items:center; justify-content:center; z-index:5;
}
.wn-hero-arrow.carousel-control-prev{ left:14px; }
.wn-hero-arrow.carousel-control-next{ right:14px; }
.wn-hero-arrow i{ color:#333; font-size:18px; }
.wn-hero-arrow:hover{ background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.24); }

/* ---------- Site-wide font: Arial/Helvetica, plain black text ---------- */
body, h1, h2, h3, h4, h5, h6, p, a, span, div, button, input, textarea, select,
.wn-section-title, .wn-brand-name, .wn-brand-tagline{
  font-family: Arial, Helvetica, sans-serif !important;
}
body, p, span, div, li, td, th, label, a{
  color:#000 !important;
}
/* ...except buttons/badges/pills that rely on a colored background —
   keep their own (usually white) text so they stay readable. */
.btn, button, .badge, .wn-tile-btn, .must-have-btn, .wn-view-all-btn,
.wn-quickshop-trust-text .pink, .discount-pill, .wn-tabs-pill button.active,
.wn-cart-badge, .carousel-control-prev, .carousel-control-next,
.wn-chat-fab, a.btn-brand, a.btn-outline-brand{
  color:inherit !important;
}

/* ---------- Wishlist heart: white circle, red heart (header + product cards) ---------- */
.wn-header-wishlist{
  width:34px; height:34px; border-radius:50%; background:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.wn-header-wishlist i{ color:#E5342A !important; font-size:16px; }
.wishlist-btn{ color:#E5342A !important; background:rgba(255,255,255,.92) !important; }
.wishlist-btn.active{ color:#E5342A !important; background:#fff !important; }

/* ---------- Light marble background effect (very subtle, same tone everywhere) ----------
   Applied to every light background surface on the site (body, sections, cards, header,
   footer-main-light areas) so they all share one soft ivory-marble texture instead of a
   flat single color. Built from layered gradients only (no image file needed), kept very
   light so it never fights with text/product photos. */
body,
.wn-mobile-header, .wn-desktop-header, .wn-header-sticky-wrap, .wn-top-utility-bar, .site-header,
.wn-page-home, .wn-section,
.product-card, .wn-product-card, .stat-card, .summary-box, .wn-blog-card,
.wn-cat-square-card, .wn-quickshop-card, .wn-tile-card,
.wn-footer-main, .wn-footer-stat-row, .wn-footer-social, .wn-footer-bottom-links, .wn-footer-legal{
  background-color:#FBFAF7;
  background-image:
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(199,178,150,.10), transparent 60%),
    radial-gradient(ellipse 50% 35% at 85% 75%, rgba(180,160,135,.09), transparent 60%),
    radial-gradient(ellipse 40% 60% at 60% 10%, rgba(210,195,170,.07), transparent 55%),
    linear-gradient(115deg, transparent 40%, rgba(180,165,145,.05) 48%, transparent 56%),
    linear-gradient(25deg, transparent 60%, rgba(190,175,155,.045) 66%, transparent 72%);
  background-attachment:fixed;
}
/* Pure-white surfaces (cards/product tiles) keep their own base color but still pick up
   the same faint veining, just lighter, so everything reads as one continuous marble. */
.product-card, .wn-product-card, .stat-card, .summary-box, .wn-blog-card,
.wn-cat-square-card, .wn-quickshop-card, .wn-tile-card{
  background-color:#FFFFFF;
}

/* ---------- Header cart icon: brown circle, white bag icon (pairs with the
   white-circle red-heart wishlist icon) — fixes low-contrast brown-on-brown. ---------- */
.wn-header-cart{
  width:34px; height:34px; border-radius:50%; background:var(--maroon);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.wn-header-cart i{ color:#fff !important; font-size:16px; }
/* Cart + wishlist count bubbles: always white text on their pink/maroon
   background, regardless of which circle (cart or wishlist) they sit in. */
.wn-cart-badge{ color:#fff !important; }

/* ---------- Shop/collection filter row: price filter + sort dropdown ----------
   Stacked (filter card, then sort) on mobile; side-by-side in one line on
   desktop, with the price filter card getting proper left/right padding
   and a visible boundary instead of sitting flush against the page edge. */
.wn-shop-filter-row{ display:flex; flex-direction:column; gap:12px; margin-bottom:16px; }
.wn-price-filter{
  background:var(--paper,#fff); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; flex:1 1 auto;
}
.wn-shop-sort-form{ display:flex; justify-content:flex-end; }
.wn-shop-sort-form select{ width:auto; min-width:180px; }
@media (min-width:768px){
  .wn-shop-filter-row{ flex-direction:row; align-items:flex-start; gap:16px; }
  .wn-shop-sort-form{ flex:0 0 auto; padding-top:2px; }
}
/* Collection/page title: centered on mobile, left-aligned once there's more room */
.section-title{ text-align:center; }
@media (min-width:768px){ .section-title{ text-align:left; } }

/* "Clear filter" as a small attractive pill badge instead of a bare text link */
.wn-filter-clear-badge{
  display:inline-flex; align-items:center; gap:4px; background:var(--cream-2);
  color:var(--maroon) !important; font-size:11px; font-weight:700;
  padding:4px 10px; border-radius:20px; text-decoration:none; white-space:nowrap;
}
.wn-filter-clear-badge:hover{ background:var(--maroon); color:#fff !important; }

/* ---------- Price range filter (dynamic dual-handle slider with value bubbles) ---------- */
.wn-price-slider{ position:relative; height:32px; margin:34px 6px 6px; }
.wn-price-slider .track{ position:absolute; top:0; left:0; right:0; height:5px; background:var(--line); border-radius:3px; }
.wn-price-slider .range{ position:absolute; top:0; height:5px; background:var(--maroon); border-radius:3px; }
.wn-price-slider .handle{
  position:absolute; top:0; width:20px; height:20px; margin-left:-10px; margin-top:-8px;
  background:#fff; border:3px solid var(--maroon); border-radius:50%; padding:0; margin-bottom:0;
  box-shadow:0 1px 4px rgba(0,0,0,.25); touch-action:none; cursor:pointer; z-index:2;
  -webkit-appearance:none; appearance:none; font:inherit; line-height:1;
}
.wn-price-slider .handle .bubble{
  position:absolute; top:-30px; left:50%; transform:translateX(-50%);
  background:var(--maroon); color:#fff; font-size:11px; font-weight:700;
  padding:3px 8px; border-radius:6px; white-space:nowrap; pointer-events:none;
}
.wn-price-slider .handle .bubble::after{
  content:''; position:absolute; bottom:-4px; left:50%; transform:translateX(-50%);
  border:4px solid transparent; border-top-color:var(--maroon);
}

/* ---------- Pagination ---------- */
.wn-pagination{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.wn-pagination .pg-btn{
  min-width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:8px; color:var(--wn-text-dark); font-size:13px; font-weight:600;
}


.wn-brand-bg {
  background: #4a3428;
  color: #fff !important;
}


.wn-pagination .pg-btn.active{ background:var(--maroon); border-color:var(--maroon); color:#fff; }
.wn-pagination .pg-btn.disabled{ opacity:.4; pointer-events:none; }
.wn-pagination .pg-ellipsis{ display:inline-flex; align-items:center; padding:0 4px; color:var(--wn-text-muted); }