/* GS Campanie — shop filters (1.4.0). Light shop pages; accent = Flatsome's --primary-color. */
.gsf{--gsf-accent:var(--primary-color,#078c36);--gsf-text:#222;--gsf-muted:#6b6b6b;--gsf-line:#e4e6e4;--gsf-soft:#f3f5f3;margin:0 0 20px;color:var(--gsf-text)}
.gsf *,.gsf *::before,.gsf *::after{box-sizing:border-box}
.gsf [hidden]{display:none!important}

/* Subcategories: real links */
.gsf-top{margin:0 0 14px}
.gsf-top__list{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;padding:2px 0 6px;cursor:grab}
.gsf-top__list::-webkit-scrollbar{display:none}
.gsf-top__list.is-dragging{cursor:grabbing;scroll-behavior:auto}
.gsf-top__list a{-webkit-user-drag:none;user-select:none}
.gsf .gsf-top__chip{flex:none;display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border:1px solid var(--gsf-line);border-radius:999px;background:#fff;color:var(--gsf-text);font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none;transition:border-color .15s,color .15s}
.gsf .gsf-top__chip:hover,.gsf .gsf-top__chip:focus-visible{border-color:var(--gsf-accent);color:var(--gsf-accent)}
/* Way up ("‹ parent") and the category you are in (last level: its sisters around it) */
.gsf .gsf-top__chip--back{gap:6px;border-color:transparent;background:var(--gsf-soft)}
.gsf .gsf-top__chip--back span[aria-hidden]{font-size:18px;line-height:1}
.gsf .gsf-top__chip.is-current{border-color:var(--gsf-accent);background:var(--gsf-accent);color:#fff}

/* Bar: phones' "Filtre" + active filters */
.gsf-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.gsf .gsf-bar__open{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:0;padding:0 16px;border:1px solid var(--gsf-text);border-radius:999px;background:#fff;color:var(--gsf-text);font-size:14px;font-weight:700;line-height:1;letter-spacing:0;text-transform:none}
.gsf-bar__n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--gsf-accent);color:#fff;font-size:12px}
.gsf-pills{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.gsf .gsf-pill{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 12px;border-radius:999px;background:var(--gsf-soft);color:var(--gsf-text);font-size:13px;font-weight:600;text-decoration:none}
.gsf .gsf-pill span[aria-hidden]{font-size:17px;line-height:1;color:var(--gsf-muted)}
.gsf .gsf-pill.is-pending{opacity:.6}
.gsf .gsf-pills__clear{padding:0 6px;color:var(--gsf-muted);font-size:13px;text-decoration:underline}

/* Panel */
.gsf-panel{display:flex;flex-direction:column;border:1px solid var(--gsf-line);border-radius:14px;background:#fff;outline:0}
.gsf-panel__head{display:flex;align-items:center;gap:8px;padding:14px 16px 4px}
.gsf .gsf-panel__title{flex:1;margin:0;font-size:16px;font-weight:700}
.gsf .gsf-panel__reset{color:var(--gsf-accent);font-size:13px;font-weight:700}
/* A true 40px circle: the theme gives every button min-height 55px */
.gsf .gsf-panel__close{display:none;flex:none;align-items:center;justify-content:center;width:40px;height:40px;min-width:0;min-height:0;margin:0;padding:0;border:1px solid var(--gsf-line);border-radius:50%;background:#fff;color:var(--gsf-text);line-height:1}
.gsf .gsf-panel__close .gsc-ico{width:18px;height:18px}
.gsf-panel__body{padding:0 16px 8px}
.gsf .gsf-f{min-width:0;margin:0;padding:12px 0;border:0;border-bottom:1px solid var(--gsf-line)}
.gsf .gsf-f:last-child{border-bottom:0}
.gsf .gsf-f legend{float:left;width:100%;margin:0 0 6px;padding:0;border:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gsf-muted)}
.gsf .gsf-f--short legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.gsf-f__opts{clear:both;display:flex;flex-direction:column}
.gsf-f__opts--chips{flex-direction:row;flex-wrap:wrap;gap:6px}
/* Long names wrap under themselves; box and count stay on the first line */
.gsf .gsf-opt{display:flex;align-items:flex-start;gap:10px;margin:0;padding:7px 0;color:var(--gsf-text);font-size:14px;font-weight:500;line-height:1.35;cursor:pointer}
.gsf .gsf-opt input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--gsf-accent)}
.gsf-opt span{flex:1;min-width:0;overflow-wrap:anywhere}
.gsf-opt small{flex:none;padding-top:1px;color:var(--gsf-muted);font-size:12px;line-height:1.35;font-variant-numeric:tabular-nums}
.gsf .gsf-opt--chip{position:relative;align-items:center;min-height:34px;padding:0 14px;border:1px solid var(--gsf-line);border-radius:999px;line-height:1.2}
.gsf .gsf-opt--chip input{position:absolute;width:1px;height:1px;opacity:0}
.gsf .gsf-opt--chip:has(input:checked){border-color:var(--gsf-accent);background:var(--gsf-accent);color:#fff}
/* "Oricare" chosen is no filter: neutral, so only real filters are green */
.gsf .gsf-opt--chip:has(input[value=""]:checked){border-color:var(--gsf-text);background:#fff;color:var(--gsf-text)}
.gsf .gsf-opt--chip:has(input:focus-visible){outline:2px solid var(--gsf-text);outline-offset:2px}
/* Near-expiry: a switch card, like the campaign's */
.gsf .gsf-f--short .gsf-opt{align-items:center;padding:12px;border:1px solid var(--gsf-line);border-radius:10px;transition:border-color .15s,background .15s}
.gsf .gsf-f--short .gsf-opt:has(input:checked){border-color:var(--gsf-accent);background:color-mix(in srgb,var(--gsf-accent) 8%,#fff)}
.gsf .gsf-f--short .gsf-opt span{font-weight:700}
.gsf .gsf-f--short input{-webkit-appearance:none;appearance:none;position:relative;width:38px;height:22px;border-radius:999px;background:var(--gsf-line);cursor:pointer;transition:background .15s}
.gsf .gsf-f--short input::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.gsf .gsf-f--short input:checked{background:var(--gsf-accent)}
.gsf .gsf-f--short input:checked::after{transform:translateX(16px)}
.gsf .gsf-f--short input:focus-visible{outline:2px solid var(--gsf-text);outline-offset:2px}
.gsf-f:not(.is-open) .gsf-opt--more{display:none}
/* Categories with their subcategories (1.4.4): the arrow opens the level below; counts stay in one column */
/* --gsf-gut: room the arrow takes at the right of a row (toggle + its margins), so every count lines up */
.gsf{--gsf-tog:28px;--gsf-gut:34px}
.gsf-node__row{display:flex;align-items:flex-start}
.gsf-node__row .gsf-opt{flex:1;min-width:0}
.gsf .gsf-node__toggle{flex:none;display:flex;align-items:center;justify-content:center;width:var(--gsf-tog);height:var(--gsf-tog);min-width:0;min-height:0;margin:2px 0 0 6px;padding:0;border:0;border-radius:50%;background:none;color:var(--gsf-muted);line-height:1;box-shadow:none;cursor:pointer}
@media (hover:hover){.gsf .gsf-node__toggle:hover{background:var(--gsf-soft);color:var(--gsf-text)}}
.gsf .gsf-node__toggle:focus-visible{outline:2px solid var(--gsf-text);outline-offset:1px}
.gsf-node__chev{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.gsf-node.is-open .gsf-node__chev{transform:translateY(2px) rotate(-135deg)}
.gsf-node__kids{margin:0 var(--gsf-gut) 4px 8px;padding-left:18px;border-left:1px solid var(--gsf-line)}
.gsf-node:not(.is-open) .gsf-node__kids{display:none}
.gsf-f__opts:has(.gsf-node)>.gsf-opt{padding-right:var(--gsf-gut)}
.gsf .gsf-opt--kid{padding:5px 0;font-size:13.5px;font-weight:400}
.gsf .gsf-more{min-height:0;margin:6px 0 0;padding:0;border:0;background:none;color:var(--gsf-accent);font-size:13px;font-weight:700;line-height:1.4;letter-spacing:0;text-transform:none}
.gsf-panel__foot{position:sticky;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--gsf-line);background:#fff}
.gsf .gsf-apply{width:100%;min-height:44px;margin:0;border:0;border-radius:999px;background:var(--gsf-accent);color:#fff;font-weight:700;letter-spacing:0;text-transform:none}

/* Products column */
.gsf-main{min-width:0;transition:opacity .15s}
.gsf.is-loading .gsf-main{opacity:.45}
.gsf.is-loading .gsf-opt small{opacity:.4}
.gsf-empty{padding:40px 16px;text-align:center}
.gsf-toast{position:fixed;left:50%;bottom:20px;z-index:100002;max-width:calc(100% - 32px);padding:12px 18px;border-radius:10px;background:#222;color:#fff;font-size:14px;transform:translateX(-50%)}

/* Phones: the panel is a sheet */
@media (max-width:849px){
	/* "Filtre" stands out (user) and stays reachable: a filled button in a bar that sticks under the header */
	.gsf-bar{position:sticky;top:var(--gsf-stick,0px);z-index:30;flex-wrap:nowrap;margin:0 0 14px;padding:8px 0;background:#fff;box-shadow:0 1px 0 var(--gsf-line)}
	.gsf .gsf-bar__open{flex:none;min-height:44px;padding:0 18px;border-color:var(--gsf-accent);background:var(--gsf-accent);color:#fff;font-size:15px}
	.gsf .gsf-bar__open .gsc-ico{width:18px;height:18px}
	.gsf .gsf-bar__open .gsf-bar__n{background:#fff;color:var(--gsf-accent)}
	.gsf-pills{flex-wrap:nowrap;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
	.gsf-pills::-webkit-scrollbar{display:none}
	.gsf .gsf-pill,.gsf .gsf-pills__clear{flex:none;white-space:nowrap}
	.gsf .gsf-panel{position:fixed;left:0;right:0;bottom:0;z-index:100001;max-height:86vh;overflow:auto;overscroll-behavior:contain;border-radius:18px 18px 0 0;transform:translateY(105%);visibility:hidden;transition:transform .25s ease-out,visibility 0s linear .25s}
	.gsf.is-sheet .gsf-panel{transform:none;visibility:visible;transition:transform .25s ease-out}
	.gsf .gsf-panel__close{display:flex}
	/* Bottom sheet: a grab handle (drag the head down to close) and finger-sized targets (≥ 40px) */
	.gsf .gsf-panel__head{position:relative;padding-top:22px;touch-action:none}
	.gsf .gsf-panel__head::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--gsf-line)}
	.gsf .gsf-opt{padding:10px 0}
	.gsf{--gsf-tog:40px;--gsf-gut:36px}
	.gsf .gsf-node__toggle{margin:0 -8px 0 4px}
	.gsf .gsf-opt--kid{padding:9px 0}
	.gsf .gsf-opt--chip{min-height:40px;padding:0 16px}
	.gsf .gsf-f--short .gsf-opt{padding:12px}
	.gsf .gsf-more{padding:8px 0}
	.gsf .gsf-top__chip{min-height:40px}
	.gsf-scrim{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.45)}
	html.gsf-lock{overflow:hidden}
}

/* Desktop: column on the left, no scrollbar of its own. A tall column scrolls with the page until its end shows,
   then stays (shop.js moves its sticky top with the scroll, both ways). */
@media (min-width:850px){
	.gsf-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:start}
	.gsf .gsf-bar__open,.gsf-scrim{display:none!important}
	.gsf .gsf-panel{position:sticky;top:var(--gsf-stick,16px)}
	.gsf.is-js .gsf-panel__foot{display:none}
	.gsf[data-cols="3"] .products.row>.col{flex-basis:33.333%;max-width:33.333%}
	.gsf[data-cols="4"] .products.row>.col{flex-basis:25%;max-width:25%}
}
@media (prefers-reduced-motion:reduce){.gsf *{transition:none!important}}
