/* Bottom sheets: the Filter dialogs (shop #filters-dialog, home #home-filter-dialog) and the phone Sort list. Behaviour is in ck-sheet.js. */
dialog#filters-dialog,dialog#home-filter-dialog,dialog.ck-sort-sheet{position:fixed;inset:auto 0 0 0;margin:0 auto;width:min(560px,100vw);max-width:100vw;height:auto;max-height:min(86dvh,760px);padding:0 20px 20px;border:0;border-radius:22px 22px 0 0;box-shadow:0 -12px 44px rgba(68,40,23,.2);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:var(--color-canvas);color:var(--color-ink)}
@keyframes ck-sheet-up{from{transform:translateY(100%)}to{transform:none}}
dialog.ck-sheet-dragging{transition:none!important;animation:none!important}
dialog.ck-sheet-settle{transition:transform .24s cubic-bezier(.22,.8,.24,1)}
/* phones: the page is zoomed .92; sheets use zoom 1.087 to cancel it */
@media(max-width:639px){dialog#filters-dialog,dialog#home-filter-dialog,dialog.ck-sort-sheet{zoom:1.08696}}
.ck-sheet-grab{display:flex;justify-content:center;touch-action:none;cursor:grab}
.ck-sheet-grab span{width:42px;height:5px;border-radius:999px;background:#d9cfc6}
dialog.ck-sheet-dragging .ck-sheet-grab{cursor:grabbing}
dialog#filters-dialog>.s-dialog-header,dialog#home-filter-dialog>.s-dialog-header,dialog.ck-sort-sheet>.s-dialog-header{touch-action:none}
/* Sort list (phones) */
dialog.ck-sort-sheet ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
dialog.ck-sort-sheet li button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;padding:0 12px;border:0;border-radius:12px;background:transparent;font:inherit;font-size:15px;font-weight:500;color:var(--color-ink);text-align:left;cursor:pointer}
dialog.ck-sort-sheet li button[aria-checked="true"]{font-weight:600;color:var(--color-brand)}
dialog.ck-sort-sheet li button[aria-checked="true"]::after{content:"";width:7px;height:12px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px)}
/* On phones the Sort pill opens the sheet, not the native picker */
@media(max-width:767px){.s-shop-sort select{pointer-events:none}.s-shop-sort{cursor:pointer}}
/* ===== shadcn Dialog (desktop) + Vaul Drawer (phone) look, 2026-11-13. Doubled :is() = id weight x2 so it beats ck-type.css / store.css. ===== */
@keyframes ck-ui-fade{from{opacity:0}to{opacity:1}}
@keyframes ck-ui-zoom{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
@keyframes ck-ui-zoom-out{to{opacity:0;transform:scale(.95)}}
html body dialog:is(#filters-dialog,#home-filter-dialog,.ck-sort-sheet):is(#filters-dialog,#home-filter-dialog,.ck-sort-sheet){
--b:#e9e1d9;--m:#f5efe9;--mf:#7a6f66;--ring:color-mix(in srgb,var(--color-brand) 35%,transparent);
display:none;padding:0!important;border:1px solid var(--b)!important;background:var(--color-canvas)!important;color:var(--color-ink);box-shadow:0 4px 6px -4px rgba(28,20,14,.1),0 25px 50px -12px rgba(28,20,14,.25)!important;overflow:hidden!important;font-size:14px;
&[open]{display:flex!important;flex-direction:column}
&::backdrop{background:rgba(10,8,6,.5);backdrop-filter:blur(2px);animation:ck-ui-fade .25s ease-out;opacity:var(--ck-bd,1);transition:opacity .5s cubic-bezier(.32,.72,0,1)}
&.ck-sheet-dragging::backdrop{transition:none}
&>.s-dialog-header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0!important;padding:20px 24px 12px!important;flex:none}
& h2{margin:0!important;font-size:18px!important;line-height:1.3;font-weight:600!important;letter-spacing:-.01em}
& .s-dialog-header .s-icon-button{width:34px!important;height:34px!important;min-width:0!important;min-height:0!important;padding:0!important;display:grid;place-items:center;border:0!important;border-radius:50%!important;background:var(--m)!important;box-shadow:none!important;color:var(--mf)!important;transition:background .15s,color .15s;cursor:pointer;
  &:hover{background:#ebe2d8!important;color:var(--color-ink)!important}
  &:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)!important}
  & svg{width:16px!important;height:16px!important}}
&>form{display:flex!important;flex-direction:column;flex:1 1 auto;min-height:0;margin:0;overflow:hidden;padding:0!important;gap:0!important}
& .s-filter-cats{flex:0 1 auto;min-height:0;overflow:visible!important;margin:0!important;padding:4px 24px 12px!important;border:0!important}
&>ul{padding:4px 12px 16px!important;overflow-y:auto}
& .ck-cat-disclosure{border:0!important;background:none!important;padding:0!important;margin:0!important;box-shadow:none!important}
& .ck-cat-disclosure>summary{list-style:none;display:flex;align-items:center;gap:8px;padding:0 0 8px!important;margin:0!important;font-size:13px!important;font-weight:500!important;color:var(--mf)!important;cursor:default;background:none!important;border:0!important;min-height:0!important;
  &::-webkit-details-marker{display:none} &::after,&::before{display:none!important} & b{font-weight:500;color:var(--color-brand)}}
& .ck-cat-body,& .ck-cat-panel{max-height:none!important;height:auto!important;overflow:visible!important;border:0!important;border-radius:0!important;background:none!important;padding:0!important;margin:0!important;box-shadow:none!important;-webkit-mask-image:none!important;mask-image:none!important}
& .ck-cat-panel{display:grid!important;gap:2px!important;max-height:max(160px,calc(min(85dvh,680px) - 300px))!important;overflow-y:auto!important;overscroll-behavior:contain;margin:0 -8px!important;padding:0 8px!important;scrollbar-width:thin}
& .ck-cat-row{position:relative;display:flex!important;align-items:center;gap:12px!important;min-height:40px!important;padding:0 10px!important;margin:0!important;border:0!important;border-radius:8px!important;background:transparent!important;font-size:14px!important;font-weight:500!important;line-height:1.25;color:var(--color-ink)!important;cursor:pointer;transition:background .12s;
  &:hover{background:var(--m)!important}
  & input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
  & input:checked+.ck-cat-tick{background:var(--color-brand)!important;border-color:var(--color-brand)!important; & svg{opacity:1!important}}
  & input:focus-visible+.ck-cat-tick{box-shadow:0 0 0 3px var(--ring)!important}}
& .ck-cat-tick{flex:none;display:grid!important;place-items:center;width:16px!important;height:16px!important;margin:0!important;border:1px solid #c9bdb2!important;border-radius:4px!important;background:#fff!important;box-shadow:0 1px 2px rgba(0,0,0,.05)!important;transition:background .12s,border-color .12s;
  & svg{width:10px!important;height:10px!important;opacity:0;transition:opacity .12s}}
& .ck-price-range{flex:none;margin:0!important;padding:16px 24px 20px!important;border:0!important;border-top:1px solid var(--b)!important;border-radius:0!important;background:none!important;box-shadow:none!important}
& .ck-price-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 14px!important;font-size:13px!important;font-weight:500!important;color:var(--mf)!important}
& .ck-price-out{font-size:14px!important;font-weight:600!important;color:var(--color-ink)!important;font-variant-numeric:tabular-nums}
& .ck-price-track{position:relative;height:20px!important;margin:0 9px!important;background:none!important;border:0!important;
  &::before{content:""!important;display:block!important;position:absolute;left:0;right:0;top:50%;height:6px!important;margin-top:-3px;border-radius:999px;background:linear-gradient(90deg,var(--m) 0 var(--lo,0%),var(--color-brand) var(--lo,0%) var(--hi,100%),var(--m) var(--hi,100%))!important;border:0!important}
  &::after{display:none!important}
  & input[type=range]{position:absolute!important;left:-9px!important;width:calc(100% + 18px)!important;top:0!important;height:20px!important;margin:0!important;background:none!important;-webkit-appearance:none;appearance:none;pointer-events:none;
    &::-webkit-slider-runnable-track{background:none!important;border:0;height:20px}
    &::-moz-range-track{background:none!important;border:0}
    &::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:18px;height:18px;margin-top:1px;border-radius:50%;border:2px solid var(--color-brand)!important;background:#fff!important;box-shadow:0 1px 3px rgba(0,0,0,.2)!important;cursor:grab}
    &::-moz-range-thumb{pointer-events:auto;width:14px;height:14px;border-radius:50%;border:2px solid var(--color-brand);background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:grab}
    &:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--ring)!important}}}
& .s-filter-actions{position:static!important;flex:none;display:flex!important;justify-content:flex-end;gap:8px!important;margin:0!important;padding:14px 24px 20px!important;border:0!important;border-top:1px solid var(--b)!important;background:var(--color-canvas)!important;
  & .s-button{height:40px!important;min-height:0!important;padding:0 16px!important;border-radius:8px!important;font-size:14px!important;font-weight:500!important;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.05)!important;transition:background .15s,opacity .15s;
    &:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring)!important}}
  & .s-outline{background:#fff!important;border:1px solid var(--b)!important;color:var(--color-ink)!important; &:hover{background:var(--m)!important}}
  & .s-primary{background:var(--color-brand)!important;border:1px solid var(--color-brand)!important;color:#fff!important; &:hover{opacity:.9}}}
& li button{min-height:44px!important;border-radius:8px!important;font-size:14px!important; &:hover,&:focus-visible{background:var(--m)!important;outline:none}}
@media(min-width:768px){
  inset:0!important;margin:auto!important;width:min(440px,calc(100vw - 32px))!important;max-width:none!important;height:fit-content!important;max-height:min(85dvh,680px)!important;border-radius:14px!important;zoom:1!important;
  &[open]{animation:ck-ui-zoom .2s cubic-bezier(.16,1,.3,1)!important}
  & .ck-sheet-grab{display:none!important}
  &.ck-ui-closing{animation:ck-ui-zoom-out .15s ease-in forwards!important; &::backdrop{animation:ck-ui-fade .15s ease-in reverse forwards}}}
@media(max-width:767px){
  inset:auto 0 0 0!important;margin:0!important;width:100vw!important;max-width:none!important;height:auto!important;max-height:88dvh!important;border-width:1px 0 0!important;border-radius:16px 16px 0 0!important;padding-bottom:env(safe-area-inset-bottom)!important;
  &[open]{animation:ck-sheet-up .5s cubic-bezier(.32,.72,0,1)!important}
  &.ck-sheet-settle{transition:transform .5s cubic-bezier(.32,.72,0,1)!important}
  & .ck-sheet-grab{position:static!important;flex:none;margin:0!important;padding:14px 0 6px!important;background:transparent!important; & span{width:48px!important;height:5px!important;background:#e2d8cf!important}}
  &>.s-dialog-header{justify-content:center;min-height:44px;padding:4px 60px 10px!important;text-align:center; & .s-icon-button{position:absolute!important;right:16px;top:calc(50% - 3px);transform:translateY(-50%)}}
  & .s-filter-cats{padding:4px 16px 12px!important}
  & .ck-cat-panel{max-height:max(160px,calc(88dvh - 320px))!important}
  & .ck-cat-row{min-height:46px!important}
  & .ck-price-range{padding:16px 20px 20px!important}
  & .s-filter-actions{display:grid!important;grid-template-columns:1fr 2fr;padding:12px 16px 16px!important; & .s-button{height:44px!important;width:100%}}}
}

/* ===== Product card badges + pagination polish, 2026-11-13 ===== */
html body .s-product-card .s-bestseller-badge{display:inline-flex!important;align-items:center;height:22px!important;padding:0 9px!important;border:0!important;border-radius:999px!important;font-size:11px!important;font-weight:600!important;letter-spacing:.01em!important;line-height:1!important;text-transform:none!important;box-shadow:0 1px 2px rgba(36,38,32,.14)!important}
html body .s-product-card .s-new-badge{background:var(--color-brand)!important;color:#fff!important}
html body .s-product-card .ck-img-discount{display:inline-flex!important;align-items:center;height:22px!important;padding:0 8px!important;border:1px solid #f0d2bd!important;border-radius:999px!important;background:#fffdf9!important;color:var(--color-brand)!important;font-size:11px!important;font-weight:700!important;line-height:1!important;font-variant-numeric:tabular-nums;box-shadow:0 1px 2px rgba(36,38,32,.1)!important}
html body .s-listing-bottom{display:flex!important;flex-direction:column!important;align-items:center!important;gap:16px!important;margin:56px 0 -12px!important;padding:0!important;width:100%}
@media(max-width:767px){html body .s-listing-bottom{margin:40px 0 -8px!important}}
html body .s-pagination-controls{display:flex!important;justify-content:center!important;margin:0!important;padding:0!important;width:auto!important}
html body .s-pagination-controls nav{display:flex!important;align-items:center;gap:8px!important}
html body .s-pagination-controls .ck-page-numbers{display:flex!important;align-items:center;gap:6px!important}
html body .s-pagination-controls .ck-page-num,html body .s-pagination-controls .ck-page-step{display:grid!important;place-items:center;min-width:40px!important;width:40px!important;height:40px!important;padding:0!important;border-radius:50%!important;border:1px solid transparent!important;font-size:15px!important;font-weight:500!important;color:var(--color-ink)!important;text-decoration:none!important;font-variant-numeric:tabular-nums;transition:background .15s,border-color .15s,color .15s}
html body .s-pagination-controls a.ck-page-num:hover{background:#f5efe9!important}
html body .s-pagination-controls .ck-page-num.is-current{background:var(--color-brand)!important;color:#fff!important;font-weight:600!important}
html body .s-pagination-controls .ck-page-step{border-color:#ebc5a6!important;background:#fff!important;color:var(--color-brand)!important}
html body .s-pagination-controls .ck-page-step:hover{background:var(--color-brand)!important;border-color:var(--color-brand)!important;color:#fff!important}
html body .s-pagination-controls .ck-page-step svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}