/* SW Blog Grid — namespaced under .sw-bg so it can sit inside Elementor without styles leaking.
   Palette + fonts follow the Mrs. D's Corner Elementor kit. */

.sw-bg {
  --bg-pink:#D70789; --bg-teal:#07BFCF; --bg-yellow:#F2E200; --bg-gold:#FFC107; --bg-cream:#FFE7B5;
  --bg-blue:#005A87; --bg-mblue:#478ECC; --bg-ink:#1f2430; --bg-muted:#6b7280; --bg-line:#e6e8ec;
  --bg-radius:10px; --bg-fradius:3px; --bg-head:'Oswald', 'Arial Narrow', sans-serif; --bg-body:'Questrial', system-ui, sans-serif;
  font-family:var(--bg-body); color:var(--bg-ink); line-height:1.5; box-sizing:border-box;
  max-width:1240px; margin:0 auto; padding:24px 16px 40px;
}
.sw-bg *, .sw-bg *::before, .sw-bg *::after { box-sizing:border-box; }
.sw-bg input, .sw-bg select, .sw-bg button {
  font-family:inherit; font-size:15px; line-height:1.3; margin:0; height:auto; box-shadow:none;
  text-transform:none; letter-spacing:0;
}
.sw-bg :focus-visible { outline:3px solid var(--bg-teal); outline-offset:2px; }

.sw-bg__wrap { display:grid; grid-template-columns:270px minmax(0,1fr); gap:28px; align-items:start; }
.sw-bg__filters-toggle { display:none; }

/* ---------- sidebar ---------- */
.sw-bg__side { position:sticky; top:100px; max-height:calc(100vh - 120px); overflow:auto; padding-right:2px; }
.sw-bg-panel { border:1px solid var(--bg-line); border-radius:var(--bg-fradius); overflow:visible; margin-bottom:14px; background:#fff; }
.sw-bg-bar {
  display:block; width:100%; border:0; border-radius:var(--bg-fradius) var(--bg-fradius) 0 0; padding:10px 14px;
  font-family:var(--bg-head) !important; font-weight:500; font-size:17px !important; letter-spacing:.04em; text-transform:uppercase !important;
  text-align:left; color:#fff !important; background:#000 !important;
}
button.sw-bg-bar { cursor:pointer; -webkit-appearance:none; appearance:none; position:relative; padding-right:34px; }
button.sw-bg-bar::after { content:''; position:absolute; right:16px; top:50%; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:translateY(-70%) rotate(45deg); transition:transform .15s; }
.sw-bg-panel.is-collapsed button.sw-bg-bar { border-radius:var(--bg-fradius); }
.sw-bg-panel.is-collapsed button.sw-bg-bar::after { transform:translateY(-30%) rotate(-135deg); }
.sw-bg-panel.is-collapsed .sw-bg-panel__body { display:none; }
.sw-bg-panel__body { padding:12px 14px; }

.sw-bg .sw-bg-q, .sw-bg .sw-bg-topics__input {
  width:100%; padding:10px 12px; border:1px solid var(--bg-line); border-radius:var(--bg-fradius); background:#fff; color:var(--bg-ink);
}
.sw-bg .sw-bg-q:focus, .sw-bg .sw-bg-topics__input:focus { border-color:var(--bg-pink); outline:none; }

/* checklist */
.sw-bg-node { display:flex; align-items:center; gap:4px; padding-left:calc(var(--d,0) * 16px); }
.sw-bg-item { flex:1; display:flex; align-items:center; gap:8px; padding:4px 0; cursor:pointer; font-size:15px; margin:0; color:var(--bg-ink); font-weight:400; }
.sw-bg .sw-bg-item input { accent-color:var(--bg-pink); width:16px; height:16px; margin:0; flex:0 0 auto; }
.sw-bg-cnt { margin-left:auto; background:#f3f4f6; color:var(--bg-muted); border-radius:20px; padding:1px 8px; font-size:12px; font-weight:700; }
.sw-bg .sw-bg-tog { flex:0 0 18px; width:18px; height:18px; border:0; background:none; color:var(--bg-blue); cursor:pointer; font-weight:700; font-size:16px; line-height:18px; padding:0; text-align:center; }
.sw-bg-tog--leaf { visibility:hidden; display:inline-block; }
.sw-bg-sub { display:none; } .sw-bg-sub.is-open { display:block; }
.sw-bg .sw-bg-more { margin-top:8px; background:none; border:0; color:var(--bg-pink); font-weight:700; cursor:pointer; padding:0; font-size:14px; text-decoration:underline; }

/* topics combobox */
.sw-bg-topics { position:relative; }
.sw-bg-topics__list { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:50; background:#fff; border:1px solid var(--bg-line); border-radius:var(--bg-fradius); box-shadow:0 12px 28px rgba(0,0,0,.12); max-height:280px; overflow:auto; padding:4px 0; }
.sw-bg-topics__opt { display:flex; align-items:center; gap:8px; padding:7px 12px; cursor:pointer; font-size:14px; }
.sw-bg-topics__opt:hover, .sw-bg-topics__opt.is-active { background:#fdf0f7; }
.sw-bg-topics__none { padding:10px 12px; color:var(--bg-muted); font-size:14px; }
.sw-bg mark { background:var(--bg-cream); color:inherit; padding:0 1px; }
.sw-bg-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.sw-bg-chips:empty { margin:0; }

/* chips (topics + active filters) */
.sw-bg .sw-bg-chip { display:inline-flex; align-items:center; gap:6px; border:0; border-radius:var(--bg-fradius); padding:5px 12px; font-size:13px; font-weight:600; cursor:pointer; background:var(--bg-mblue); color:#fff; }
.sw-bg .sw-bg-chip span { font-size:15px; line-height:1; opacity:.85; }
.sw-bg .sw-bg-chip:hover { filter:brightness(.92); }
.sw-bg .sw-bg-chip--q { background:var(--bg-pink); }
.sw-bg .sw-bg-chip--cats { background:var(--bg-blue); }
.sw-bg .sw-bg-chip--month { background:var(--bg-teal); }
.sw-bg .sw-bg-chip--season { background:var(--bg-gold); color:var(--bg-ink); }
.sw-bg .sw-bg-chip--date { background:#000; }
.sw-bg-active { display:flex; flex-wrap:wrap; gap:6px; margin:-4px 0 16px; }
.sw-bg-active:empty { display:none; }

.sw-bg .sw-bg-clear { width:100%; padding:10px; border:2px solid var(--bg-pink); border-radius:var(--bg-fradius); background:#fff; color:var(--bg-pink); font-family:var(--bg-head); font-size:15px; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; }
.sw-bg .sw-bg-clear:hover { background:var(--bg-pink); color:#fff; }

/* ---------- toolbar ---------- */
.sw-bg-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.sw-bg-toolbar__right { display:flex; gap:8px; align-items:center; }
.sw-bg-stats { color:var(--bg-muted); font-size:15px; } .sw-bg-stats b { color:var(--bg-ink); font-family:var(--bg-head); font-weight:600; font-size:18px; }
.sw-bg .sw-bg-sort, .sw-bg .sw-bg-perpage {
  -webkit-appearance:none; appearance:none; width:auto !important; padding:9px 34px 9px 12px; border:1px solid var(--bg-line); border-radius:var(--bg-fradius);
  font-weight:600; color:var(--bg-ink); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23333' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 11px; cursor:pointer;
}

/* ---------- cards ---------- */
.sw-bg-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:22px; }
.sw-bg-loading, .sw-bg-empty { grid-column:1/-1; color:var(--bg-muted); padding:28px 0; font-size:16px; }
.sw-bg-card { display:flex; flex-direction:column; background:#fff; border-radius:var(--bg-radius); overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.07); transition:box-shadow .15s, transform .15s; }
.sw-bg-card:hover { box-shadow:0 10px 26px rgba(0,0,0,.12); transform:translateY(-2px); }
.sw-bg-card__img { display:block; aspect-ratio:16/10; background:var(--bg-cream); overflow:hidden; }
.sw-bg-card__img img { width:100%; height:100%; object-fit:cover; display:block; }
.sw-bg-card__body { display:flex; flex-direction:column; flex:1; padding:14px 16px 16px; }
.sw-bg-card__cat { align-self:flex-start; background:var(--bg-teal); color:#fff; font-family:var(--bg-head); font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:2px 9px; border-radius:20px; margin-bottom:8px; }
.sw-bg .sw-bg-card__title { font-family:var(--bg-head); font-weight:500; font-size:20px; line-height:1.25; margin:0 0 6px; text-transform:none; letter-spacing:0; }
.sw-bg .sw-bg-card__title a { color:#000; text-decoration:none; }
.sw-bg .sw-bg-card__title a:hover { color:var(--bg-pink); }
.sw-bg-card__date { font-size:13px; color:var(--bg-muted); margin-bottom:8px; }
.sw-bg-card__excerpt { font-size:15px; color:#374151; margin:0 0 12px; }
.sw-bg .sw-bg-card__more { margin-top:auto; color:#000; font-family:var(--bg-head); font-weight:500; letter-spacing:.03em; text-decoration:none; font-size:15px; }
.sw-bg .sw-bg-card__more:hover { text-decoration:underline; }

/* ---------- pagination ---------- */
.sw-bg-pagination { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:28px; }
.sw-bg-pagination:empty { margin:0; }
.sw-bg .sw-bg-pg { min-width:40px; padding:8px 12px; border:1px solid var(--bg-line); background:#fff; border-radius:8px; cursor:pointer; font-weight:600; color:var(--bg-ink); }
.sw-bg .sw-bg-pg:hover:not(:disabled) { border-color:var(--bg-pink); color:var(--bg-pink); }
.sw-bg .sw-bg-pg.is-cur { background:var(--bg-pink); border-color:var(--bg-pink); color:#fff; }
.sw-bg .sw-bg-pg:disabled { opacity:.4; cursor:default; }
.sw-bg-gap { padding:8px 2px; color:var(--bg-muted); }

/* ---------- mobile: filters in a slide-in drawer, two-up cards ---------- */
.sw-bg__side-head, .sw-bg__overlay { display:none; }
@media (max-width:900px) {
  .sw-bg__wrap { grid-template-columns:1fr; gap:16px; }
  .sw-bg .sw-bg__filters-toggle {
    display:flex; align-items:center; gap:8px; width:max-content; margin:0 auto 14px; padding:11px 18px; border:0; border-radius:var(--bg-fradius); background:var(--bg-pink); color:#fff;
    font-family:var(--bg-head); font-size:15px; letter-spacing:.05em; text-transform:uppercase; cursor:pointer; line-height:1;
  }
  .sw-bg__filters-count { background:#fff; color:var(--bg-ink); border-radius:999px; min-width:20px; padding:3px 7px; font-size:12px; text-align:center; line-height:1; font-family:system-ui, sans-serif; letter-spacing:0; }
  .sw-bg__side { position:fixed; top:0; left:0; bottom:0; width:min(86vw, 360px); max-height:none; background:#f7f7f7; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 14px 24px; margin:0; transform:translateX(-105%); transition:transform .25s ease; z-index:100000; box-shadow:0 0 30px rgba(0,0,0,.25); display:block; }
  .sw-bg.is-filters-open .sw-bg__side { transform:none; }
  .sw-bg__side-head { display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:#f7f7f7; padding:14px 0 12px; margin-bottom:6px; z-index:2; }
  .sw-bg__side-title { font-family:var(--bg-head); font-weight:700; font-size:16px; text-transform:uppercase; letter-spacing:.05em; color:var(--bg-ink); }
  .sw-bg .sw-bg__side-close { border:0; border-radius:var(--bg-fradius); background:var(--bg-pink); color:#fff; font-weight:700; font-size:13px; padding:9px 16px; cursor:pointer; }
  .sw-bg__overlay { display:block; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99999; opacity:0; pointer-events:none; transition:opacity .25s; }
  .sw-bg.is-filters-open .sw-bg__overlay { opacity:1; pointer-events:auto; }
  body.sw-bg-drawer-lock { overflow:hidden; }
  .sw-bg-toolbar__right { width:100%; } .sw-bg-toolbar__right select { flex:1; }
  .sw-bg-grid { grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:16px; }
}
@media (max-width:600px) {
  .sw-bg-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .sw-bg-card__body { padding:10px; }
  .sw-bg .sw-bg-card__title { font-size:14px; line-height:1.25; }
  .sw-bg-card__excerpt, .sw-bg-card__more { display:none; }
  .sw-bg-card__date, .sw-bg-card__meta { font-size:11px; }
}

/* ---------- page title band: matches the shop-collection pages (full-width 3px double rules, 20px padding).
   On the general page template the title shares a container with the page body, so the rules hang off
   the title widget itself and are stretched edge to edge. ---------- */
body.sw-bg-page { overflow-x:clip; }
body.sw-bg-page .e-con:has(> .e-con-inner > .elementor-widget-theme-post-title) > .e-con-inner { padding-top:0; }
body.sw-bg-page .elementor-widget-theme-post-title { position:relative; padding:20px 0; margin-bottom:8px; }
body.sw-bg-page .elementor-widget-theme-post-title::before,
body.sw-bg-page .elementor-widget-theme-post-title::after {
  content:''; position:absolute; left:calc(50% - 50vw); width:100vw; height:0; border-top:3px double #000; pointer-events:none;
}
body.sw-bg-page .elementor-widget-theme-post-title::before { top:0; }
body.sw-bg-page .elementor-widget-theme-post-title::after { bottom:0; }
body.sw-bg-page .elementor-widget-theme-post-title .elementor-heading-title { color:#000; }