/* Empire Chopsticks — category archive.
   Hand-written to match the existing design. Loaded only on product category archives. */

.ec-archive{--ec-ink:#0c2835;--ec-muted:#5a6a72;--ec-line:#e6e9eb;--ec-max:1360px;font-family:Questrial,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--ec-ink)}
.ec-wrap{max-width:var(--ec-max);margin:0 auto;padding:0 50px}

/* hero */
.ec-hero{position:relative;min-height:200px;display:flex;align-items:center;justify-content:center;text-align:center;background-size:cover;background-position:50% 50%;color:#fff}
.ec-hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45)}
.ec-hero__inner{position:relative;z-index:1;padding:38px 20px;max-width:900px}
.ec-hero h1{font-family:Questrial,sans-serif;font-size:60px;font-weight:400;line-height:1.1;letter-spacing:10px;text-transform:uppercase;color:#fff;margin:0}
.ec-hero p{margin:14px auto 0;font-size:15px;line-height:1.55;color:#fff;max-width:760px}

/* toolbar */
.ec-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--ec-line);margin-bottom:26px}
.ec-sort select{font-family:inherit;font-size:14px;color:var(--ec-ink);border:1px solid var(--ec-line);border-radius:4px;padding:8px 34px 8px 12px;background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%230c2835' d='M0 0h10L5 6z'/%3E%3C/svg%3E") no-repeat right 12px center;appearance:none}

/* grid */
.ec-grid{display:grid;grid-template-columns:repeat(4,1fr);column-gap:20px;row-gap:39px;list-style:none;margin:0;padding:0}
.ec-card{background:#fff;border-radius:4px;position:relative}
.ec-card a{text-decoration:none;color:inherit;display:block}
.ec-card__media{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:4px;background:#f6f7f8}
.ec-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.ec-badge{position:absolute;top:0;right:0;z-index:2;background:#0c2835;color:#fff;font-size:11px;line-height:1;letter-spacing:.6px;padding:7px 11px;border-radius:0 4px 0 4px}
.ec-card__title{font-size:16px;font-weight:400;line-height:24px;margin:14px 0 0;color:var(--ec-ink)}
.ec-card__reviews{margin:8px 0 0;font-size:13px;color:var(--ec-muted)}
.ec-card__price{margin:8px 0 0;font-size:15px;color:var(--ec-ink)}
.ec-card__price del{opacity:.55;margin-right:6px}
.ec-card__price ins{text-decoration:none}
.ec-card__cart{margin-top:12px}
.ec-card__cart .button{display:inline-block;font-size:13px;letter-spacing:.5px;padding:9px 16px;border-radius:4px;background:var(--ec-ink);color:#fff;text-decoration:none}

/* pagination */
.ec-pagination{display:flex;gap:8px;justify-content:center;margin:44px 0 0;padding:0;list-style:none}
.ec-pagination a,.ec-pagination span{display:inline-block;min-width:38px;text-align:center;padding:9px 10px;border:1px solid var(--ec-line);border-radius:4px;font-size:14px;color:var(--ec-ink);text-decoration:none}
.ec-pagination .current{background:var(--ec-ink);border-color:var(--ec-ink);color:#fff}
.ec-empty{padding:60px 0;text-align:center;color:var(--ec-muted)}
.ec-archive__foot{padding:0 0 60px}

@media(max-width:1100px){
  .ec-grid{grid-template-columns:repeat(3,1fr);row-gap:40px}
  .ec-hero h1{font-size:48px;letter-spacing:8px}
}
@media(max-width:700px){
  .ec-wrap{padding:0 10px}
  .ec-grid{grid-template-columns:repeat(2,1fr);column-gap:10px;row-gap:20px}
  .ec-hero{min-height:230px}
  .ec-hero h1{font-size:32px;letter-spacing:6px}
  .ec-hero p{font-size:14px}
  .ec-toolbar{padding:14px 0;margin-bottom:18px}
  .ec-card__title{font-size:15px;line-height:21px}
}

/* Star ratings — drawn here rather than depending on the review plugin's remote stylesheet. */
.ec-card__reviews .Wsrspfapp-stars-list{display:flex;align-items:center;gap:7px;line-height:1}
.ec-card__reviews .Wsrspfapp-stars-list-fullret{
  position:relative;display:inline-block;width:88px;height:17px;
  background:none !important;-webkit-mask:none !important;mask:none !important;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath fill='%23dfe3e5' d='M10 0l2.9 6.2 6.6.9-4.8 4.9 1.2 6.9L10 15.6 3.9 18.9l1.2-6.9L.3 7.1l6.6-.9z'/%3E%3C/svg%3E") !important;
  background-repeat:repeat-x !important;
  /* 20% of the element, so exactly five stars fit whatever width the plugin gives it —
     a fixed tile width produced six misaligned stars when the plugin sized it at 95px. */
  background-size:20% 100% !important}
.ec-card__reviews .Wsrspfapp-stars-list-fullret::after{
  content:"" !important;position:absolute !important;inset:0 !important;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath fill='%234a604e' d='M10 0l2.9 6.2 6.6.9-4.8 4.9 1.2 6.9L10 15.6 3.9 18.9l1.2-6.9L.3 7.1l6.6-.9z'/%3E%3C/svg%3E") !important;
  background-repeat:repeat-x !important;background-size:20% 100% !important;
  background-color:transparent !important;opacity:1 !important;display:block !important;
  /* clip rather than resize, so the filled stars stay aligned with the grey ones beneath */
  clip-path:inset(0 calc(100% - var(--avg-per,0%)) 0 0) !important}
.ec-card__reviews .Wsrspfapp-review-count{font-size:13px;color:var(--ec-muted)}
.ec-card__reviews [id^="ask_ai"]{display:none}


/* ---------------------------------------------------------------------------------------------
   Filters.

   The live page opens a 400px Elementor popup flush to the left edge over a 24% black scrim.
   This is the same panel, built from a <details> and a GET form, so it opens and applies with
   JavaScript switched off. Measurements taken from the live drawer at 1440 and 412.
   --------------------------------------------------------------------------------------------- */

.ec-filters{position:static}
.ec-filters__panel *{box-sizing:border-box}
.ec-filters__toggle{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-size:14px;letter-spacing:.5px;color:var(--ec-ink);border:1px solid var(--ec-line);border-radius:4px;padding:9px 16px;background:#fff;user-select:none}
.ec-filters__toggle::-webkit-details-marker{display:none}
.ec-filters__toggle:hover{border-color:var(--ec-ink)}
.ec-filters__toggle-icon{width:14px;height:10px;background:linear-gradient(var(--ec-ink) 0 2px,transparent 0 4px) 0 0/14px 4px repeat}
.ec-filters__badge{min-width:18px;height:18px;border-radius:9px;background:var(--ec-ink);color:#fff;font-size:11px;line-height:18px;text-align:center;padding:0 5px}

.ec-filters__scrim{position:fixed;inset:0;background:rgba(0,0,0,.24);z-index:9998}
.ec-filters__panel{box-sizing:border-box;position:fixed;top:0;left:0;width:400px;max-width:100vw;height:100%;overflow-y:auto;overscroll-behavior:contain;background:#fff;padding:30px;z-index:9999;display:flex;flex-direction:column;gap:0;box-shadow:0 0 40px rgba(0,0,0,.12)}
/* keep the page behind from scrolling while the drawer is over it */
html:has(.ec-filters[open]){overflow:hidden}

.ec-filters__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px}
.ec-filters__close{border:0;background:none;font-size:26px;line-height:1;color:var(--ec-ink);cursor:pointer;padding:0 2px}

.ec-filters__clear{align-self:flex-start;display:inline-block;font-size:14px;letter-spacing:.3px;color:var(--ec-ink);text-decoration:none;border:1px solid var(--ec-line);background:#f6f7f8;border-radius:3px;padding:10px 16px;margin-bottom:26px}
.ec-filters__clear:hover{border-color:var(--ec-ink)}

.ec-filters__title{font-size:15px;font-weight:700;letter-spacing:.3px;color:var(--ec-ink);margin:0 0 22px}

.ec-f{border:0;padding:0;margin:0}
.ec-f__legend{padding:0;font-size:15px;font-weight:700;color:var(--ec-ink);margin-bottom:14px}
.ec-f__rule{border:0;border-top:1px solid var(--ec-line);margin:26px 0}
.ec-f__row{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:14px;color:var(--ec-ink);cursor:pointer}
.ec-f__row input{margin:0;flex:none;accent-color:var(--ec-ink)}
.ec-f__swatch{width:22px;height:22px;flex:none;border:1px solid #cfd6d9;border-radius:2px}
.ec-f--colour .ec-f__row{position:relative}
.ec-f--colour .ec-f__row input{position:absolute;left:0;top:50%;transform:translateY(-50%);width:22px;height:22px;opacity:0;margin:0}
.ec-f--colour .ec-f__row input:checked+.ec-f__swatch{box-shadow:0 0 0 2px var(--ec-ink)}
.ec-f--colour .ec-f__row input:focus-visible+.ec-f__swatch{outline:2px solid var(--ec-ink);outline-offset:2px}
.ec-f__name{min-width:0}

.ec-f__more{margin-top:2px}
.ec-f__more summary{list-style:none;cursor:pointer;font-size:16px;text-decoration:underline;color:var(--ec-ink);padding:6px 0}
.ec-f__more summary::-webkit-details-marker{display:none}
.ec-f__more .ec-f__more-off,.ec-f__more[open] .ec-f__more-on{display:none}
.ec-f__more[open] .ec-f__more-off{display:inline}
/* A summary paints before its content, so "Show Less" lands above the terms it just revealed,
   stranded in the middle of the list. Reorder it to the bottom where it belongs. Scoped to
   [open] on purpose: closed, the element keeps its native display so the rows stay hidden
   without script. */
.ec-f__more[open]{display:flex;flex-direction:column}
.ec-f__more[open]>summary{order:1}

/* Two range inputs stacked on one track. Without the enhancement script the handles can cross;
   the template un-crosses the values server-side, so the query is right either way. */
.ec-range{position:relative;height:20px;margin:4px 0 14px}
/* the rail and its fill sit over the middle of the track, where they would otherwise swallow
   the pointer in a ~4px strip through the centre of both handles */
.ec-range::before,.ec-range::after{pointer-events:none}
.ec-range::before{content:"";position:absolute;left:0;right:0;top:9px;height:3px;border-radius:2px;background:#d9dde0}
.ec-range::after{content:"";position:absolute;top:9px;height:3px;border-radius:2px;background:#9aa4a9;left:var(--ec-from,0%);right:calc(100% - var(--ec-to,100%))}
/* the parent theme styles input[type=range] together with its text inputs, which gives it a
   border, a 3px radius and 8.5px of padding — an outlined pill where the rail should be */
.ec-range input[type=range]{position:absolute;left:0;top:0;width:100%;height:20px;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.ec-range input[type=range]:focus-visible{outline:2px solid var(--ec-ink);outline-offset:4px}
/* the native track keeps drawing itself as an outlined pill even with appearance:none on the
   input, so it is flattened explicitly; the rail is the ::before above */
.ec-range input[type=range]::-webkit-slider-runnable-track{height:20px;background:transparent;border:0}
.ec-range input[type=range]::-moz-range-track{height:20px;background:transparent;border:0}
.ec-range input[type=range]::-moz-range-progress{background:transparent}
.ec-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:15px;height:15px;margin-top:2.5px;border-radius:50%;background:#fafafa;border:1.5px solid #9aa4a9;cursor:pointer}
.ec-range input[type=range]::-moz-range-thumb{pointer-events:auto;width:15px;height:15px;border-radius:50%;background:#fafafa;border:1.5px solid #9aa4a9;cursor:pointer}
.ec-range__readout{font-size:14px;color:var(--ec-ink);margin:0}

.ec-filters__actions{margin-top:28px;position:sticky;bottom:-30px;background:#fff;padding:14px 0 0}
.ec-filters__apply{width:100%;font-family:inherit;font-size:15px;letter-spacing:.5px;text-transform:uppercase;color:#fff;background:var(--ec-ink);border:1px solid var(--ec-ink);border-radius:3px;padding:14px 20px;cursor:pointer}
.ec-filters__apply:hover{background:#fff;color:var(--ec-ink)}

/* chips */
.ec-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ec-chips--above{margin:0 0 14px}
.ec-chips__label{font-size:14px;color:var(--ec-muted)}
.ec-chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:1;color:var(--ec-ink);text-decoration:none;border:1px solid var(--ec-line);border-radius:3px;padding:7px 10px;background:#f6f7f8}
.ec-chip:hover{border-color:var(--ec-ink)}
.ec-chip--term{background:none}
.ec-chip span[aria-hidden]{font-size:15px;line-height:1;opacity:.65}
.ec-chips__clear{font-size:13px;color:var(--ec-muted);text-decoration:underline}

.ec-count{font-size:14px;color:var(--ec-muted);margin:0 0 16px}

@media(max-width:767px){
	.ec-filters__panel{width:100vw;padding:22px}
	.ec-chips--above{gap:6px}
}