/* Shop + product category archives (from new-theme-html pages.css archive slices). */

/* Layout with sidebar */
.with-side{display:grid;grid-template-columns:288px 1fr;gap:26px;align-items:start}
.with-side>*{min-width:0}
.shop-archive-sec{padding-top:26px}
.shop-cta-sec{padding-top:0}
.shop-archive-main{min-width:0}
.side{position:sticky;top:96px;display:grid;gap:16px}
.shop-filters{display:grid;gap:16px}
.side-box{background:#fff;border:1px solid var(--g3);border-radius:var(--r);
  box-shadow:var(--sh-xs);overflow:hidden}
.side-box>h2{font-size:15px;padding:15px 17px;border-bottom:1px solid var(--g3);
  display:flex;align-items:center;justify-content:space-between}
.side-in{padding:14px 17px 17px}
.side-box>h2 .rst{font-size:12px;font-weight:600;color:var(--orange5);border:0;background:transparent;
  cursor:pointer;padding:0;font-family:inherit}
.side-box>h2 .rst:hover{color:var(--orange6)}

/* Mobile filter drawer chrome (matches the reference design's pages.css) */
.side-head{display:none;align-items:center;justify-content:space-between;
  padding:15px 4px 13px;border-bottom:1px solid var(--g3);margin-bottom:2px;
  position:sticky;top:0;background:#fff;z-index:2}
.side-head b{font-size:15.5px}
.side-close{width:34px;height:34px;border-radius:var(--r-sm);border:0;background:var(--g2);
  color:var(--g8);display:grid;place-items:center;cursor:pointer;transition:.16s}
.side-close:hover{background:var(--redL);color:var(--red)}
.side-apply{display:none;position:sticky;bottom:0;padding:12px 0 4px;background:#fff;
  border-top:1px solid var(--g3);margin-top:6px}

/* Filters */
.check{display:flex;align-items:center;gap:10px;padding:8px 0;cursor:pointer;
  font-size:13.5px;color:var(--g8);transition:.15s}
.check:hover{color:var(--orange6)}
.check input{position:absolute;opacity:0;pointer-events:none}
.check .bx{width:19px;height:19px;border-radius:var(--r-xs);border:1.5px solid var(--g4);
  flex:none;display:grid;place-items:center;color:#fff;transition:.15s}
.check .bx svg{opacity:0;transform:scale(.6);transition:.15s}
.check input:checked + .bx{background:var(--orange);border-color:var(--orange)}
.check input:checked + .bx svg{opacity:1;transform:none}
.check .cnt{margin-inline-start:auto;font-size:11.5px;color:var(--g5);
  background:var(--g2);padding:2px 8px;border-radius:var(--r-pill)}
.check input:checked ~ .cnt{background:var(--orange1);color:var(--orange6)}
.shop-free-check{margin-top:8px}

/* Price range slider (dual handle) */
.price-slider{position:relative;height:26px;margin:10px 6px 6px}
.price-slider__track{position:absolute;inset-inline:0;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:var(--g3)}
.price-slider__fill{position:absolute;top:0;bottom:0;background:var(--orange);border-radius:4px}
.price-slider input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;background:none;
  pointer-events:none;-webkit-appearance:none;appearance:none;outline:none}
.price-slider input[type=range]::-webkit-slider-runnable-track{background:none;height:26px}
.price-slider input[type=range]::-moz-range-track{background:none}
.price-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;cursor:grab;
  width:20px;height:20px;margin-top:3px;border-radius:50%;background:#fff;border:3px solid var(--orange);box-shadow:var(--sh-s,0 1px 4px rgba(0,0,0,.2))}
.price-slider input[type=range]::-moz-range-thumb{pointer-events:auto;cursor:grab;width:14px;height:14px;
  border-radius:50%;background:#fff;border:3px solid var(--orange)}
.price-slider input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--orange1)}

/* Price range */
.range{display:flex;align-items:center;gap:9px;margin-top:6px}
.range input{width:100%;height:42px;border:1px solid var(--g4);border-radius:var(--r-sm);
  padding-inline:11px;font-size:13px;outline:none;min-width:0;background:#fff;font-family:inherit}
.range input:focus{border-color:var(--orange)}
.range span{color:var(--g5);font-size:12px;flex:none}

/* Category chips */
.chips-f{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.chip-f{font-size:12.5px;padding:7px 12px;border-radius:var(--r-pill);border:1px solid var(--g4);
  color:var(--g7);cursor:pointer;transition:.15s;background:#fff;font-family:inherit}
.chip-f:hover{border-color:var(--orange3);color:var(--orange6)}
.chip-f.on{background:var(--orange1);border-color:var(--orange3);color:var(--orange6);font-weight:600}

/* Toolbar */
.toolbar{background:#fff;border:1px solid var(--g3);border-radius:var(--r);
  box-shadow:var(--sh-xs);padding:12px 16px;display:flex;align-items:center;
  gap:14px;flex-wrap:wrap;margin-bottom:22px}
.toolbar .res{font-size:13.5px;color:var(--g7)}
.toolbar .res b{color:var(--g9)}
.toolbar .sp{margin-inline-start:auto}
.sortbar{display:flex;align-items:center;gap:4px;font-size:13.5px;min-width:0}
.sortbar .lbl{color:var(--g6);margin-inline-end:5px}
.sortbar button,.sortbar a{padding:7px 12px;border-radius:var(--r-btn);color:var(--g7);font-weight:500;transition:.15s}
.sortbar button:hover,.sortbar a:hover{background:var(--g2);color:var(--orange6)}
.sortbar button.on,.sortbar a.on{background:var(--orange1);color:var(--orange6);font-weight:700}
.filter-toggle{display:none}

/* Active filters */
.active-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.active-filters[hidden]{display:none!important}
.af{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--orange2);
  color:var(--orange6);font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:var(--r-pill)}
.af button{color:var(--orange5);display:grid;place-items:center;border:0;background:transparent;
  width:24px;height:24px;margin-inline-end:-6px;border-radius:50%;cursor:pointer;transition:.15s;padding:0}
.af button:hover{background:var(--orange1)}

/* Shop sidebar search (not header .searchbar) */
.shop-searchbar{display:flex;align-items:center;gap:10px;background:#fff;border-radius:var(--r-sm);
  border:1px solid var(--g4);margin:0;max-width:none;box-shadow:none;padding:0 4px 0 0}
.shop-searchbar:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange1)}
.shop-searchbar .si{width:44px;display:grid;place-items:center;color:var(--g5);flex:none}
.shop-searchbar input{flex:1;border:none;outline:none;font-size:14.5px;background:transparent;
  height:42px;min-width:0;font-family:inherit}
.shop-searchbar input::placeholder{color:var(--g5)}

/* Promo card */
.shop-promo-box{background:linear-gradient(150deg,var(--orange1),#fff)}
.shop-promo-in{text-align:center;padding:22px 17px}
.shop-promo-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:#fff;color:var(--orange5);margin:0 auto 12px}
.shop-promo-title{font-size:14.5px;display:block;margin-bottom:7px}
.shop-promo-text{font-size:12.5px;color:var(--g7);line-height:1.95;margin-bottom:14px}

/* Pager / empty / load-more */
.pager{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:34px;flex-wrap:wrap}
.pager a,.pager span{min-width:42px;height:42px;padding:0 12px;border-radius:var(--r-btn);
  display:grid;place-items:center;font-size:14px;font-weight:600;color:var(--g7);
  background:#fff;border:1px solid var(--g3);transition:.15s}
.pager a:hover{border-color:var(--orange3);color:var(--orange6)}
.pager .on{background:var(--orange);border-color:var(--orange);color:#fff;
  box-shadow:0 6px 14px rgba(255,150,6,.3)}
.pager .dots{border:none;background:transparent;min-width:24px}
.empty{grid-column:1/-1}
#shopArchive{display:grid;gap:20px}
.shop-pager-wrap{margin-top:34px}
.shop-pager-wrap[hidden]{display:none!important}
.shop-pager-wrap .pager{margin-top:0}
.load-more{display:grid;place-items:center;gap:12px;padding:26px 0 6px;margin-top:8px}
.load-more[hidden]{display:none!important}
.load-more .spin{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--orange2);
  border-top-color:var(--orange);animation:zhaket-shop-spin .7s linear infinite}
@keyframes zhaket-shop-spin{to{transform:rotate(360deg)}}
.load-more .txt{font-size:12.5px;color:var(--g6)}
.load-more.done .spin{display:none}
.grid .course.fade-in{animation:zhaket-shop-fadeUp .38s ease both}
@keyframes zhaket-shop-fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* CTA */
.cta-band{background:linear-gradient(115deg,var(--orange),#FFB44A);color:#fff;
  border-radius:var(--r);padding:28px 30px;display:flex;align-items:center;
  justify-content:space-between;gap:22px;flex-wrap:wrap;position:relative;overflow:hidden;margin:22px 0}
.cta-band::before{content:"";position:absolute;inset-inline-end:-60px;top:-60px;width:210px;height:210px;
  border-radius:50%;background:rgba(255,255,255,.14)}
.cta-band h3{font-size:20px;position:relative;line-height:1.6}
.cta-band p{font-size:13.5px;opacity:.95;margin-top:7px;position:relative}
.cta-band .btn{position:relative;background:#fff;color:var(--orange6);box-shadow:var(--sh-s)}

/* Hide default WC archive chrome leftovers */
.woocommerce-products-header,.woocommerce-result-count,.woocommerce-ordering,
.woocommerce-breadcrumb,.woocommerce.woocommerce-page .woocommerce-notices-wrapper{display:none!important}

/* Category about block (above CTA) */
.cat-about{background:#fff;border:1px solid var(--g3);border-radius:var(--r);
  box-shadow:var(--sh-xs);padding:26px 28px;margin:0 0 22px;position:relative;overflow:hidden}
.cat-about::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--orange),#FFB44A)}
.cat-about__head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.cat-about__title{font-size:18px;line-height:1.6;color:var(--g10);margin:0}
.cat-about__clip{position:relative;max-height:500px;overflow:hidden}
.cat-about.is-expanded .cat-about__clip{max-height:none;overflow:visible}
.cat-about__clip::after{content:"";position:absolute;inset-inline:0;bottom:0;height:72px;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff 78%);pointer-events:none}
.cat-about.is-expanded .cat-about__clip::after,
.cat-about.is-short .cat-about__clip::after{display:none}
.cat-about__body{font-size:14.5px;line-height:2.15;color:var(--g8)}
.cat-about__body > *+*{margin-top:12px}
.cat-about__body p{margin:0}
.cat-about__body h2{font-size:18px;line-height:1.7;color:var(--g10);margin:18px 0 8px}
.cat-about__body h3{font-size:16px;line-height:1.7;color:var(--g10);margin:16px 0 6px}
.cat-about__body a{color:var(--orange6);font-weight:600;border-bottom:1px solid var(--orange2)}
.cat-about__body ul,.cat-about__body ol{padding-inline-start:20px;display:grid;gap:6px;margin:0}
.cat-about__body ul li{list-style:none;position:relative;padding-inline-start:4px}
.cat-about__body ul li::before{content:"";position:absolute;inset-inline-start:-14px;top:14px;
  width:6px;height:6px;border-radius:50%;background:var(--orange3)}
.cat-about__body blockquote{border-inline-start:3px solid var(--orange);background:var(--orange1);
  padding:14px 16px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:0}
.cat-about__more{margin-top:18px;border:0;background:transparent;color:var(--orange6);
  font:inherit;font-size:15.5px;font-weight:700;cursor:pointer;padding:8px 14px;
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  transition:color .15s}
.cat-about__more:hover{color:var(--orange5)}
.cat-about__more[hidden]{display:none!important}
.cat-about__more-icon{flex:none;transition:transform .25s ease}
.cat-about.is-expanded .cat-about__more-icon{transform:rotate(180deg)}

/* Course card skeletons (match .course anatomy) */
.course-skel{pointer-events:none;cursor:default;box-shadow:var(--sh-xs);display:flex;flex-direction:column;
  background:#fff;border-radius:var(--r);overflow:hidden}
.course-skel:hover{transform:none;box-shadow:var(--sh-xs)}
.course-skel__cover{aspect-ratio:16/9;display:block;
  background:linear-gradient(90deg,#eceef2 0%,#f7f8fa 45%,#eceef2 100%);
  background-size:200% 100%;animation:zhaket-shop-skel 1.2s ease infinite}
.course-skel__body{padding:16px 16px 0;flex:1;display:grid;gap:10px}
.course-skel__line{display:block;height:12px;border-radius:6px;
  background:linear-gradient(90deg,#e6e8ee 0%,#f4f5f7 45%,#e6e8ee 100%);
  background-size:200% 100%;animation:zhaket-shop-skel 1.2s ease infinite}
.course-skel__line--title{width:88%;height:14px}
.course-skel__line--title2{width:62%;height:14px}
.course-skel__line--text{width:100%;height:11px}
.course-skel__line--text2{width:78%;height:11px}
.course-skel__avatars{display:flex;gap:6px;margin-top:4px}
.course-skel__av{width:28px;height:28px;border-radius:50%;
  background:linear-gradient(90deg,#e6e8ee 0%,#f4f5f7 45%,#e6e8ee 100%);
  background-size:200% 100%;animation:zhaket-shop-skel 1.2s ease infinite}
.course-skel__foot{border-top:1px solid var(--g3);padding:14px 13px;margin-top:14px;
  display:flex;justify-content:space-between;gap:12px}
.course-skel__pill{display:block;height:12px;border-radius:999px;width:72px;
  background:linear-gradient(90deg,#e6e8ee 0%,#f4f5f7 45%,#e6e8ee 100%);
  background-size:200% 100%;animation:zhaket-shop-skel 1.2s ease infinite}
.course-skel__pill--price{width:96px;height:16px}
@keyframes zhaket-shop-skel{0%{background-position:100% 0}100%{background-position:-100% 0}}
#shopArchive.is-searching{pointer-events:none}

/* Responsive */
@media (max-width:980px){
  .with-side{grid-template-columns:1fr}
  .filter-toggle{display:inline-flex;align-items:center;gap:7px}
  /* The drawer is anchored to the inline-start edge, so it has to hide *through that edge*:
     leftwards in LTR, rightwards in RTL. With the signs the other way round it slides across the
     viewport instead, and how much of it stays on screen depends on the window width -- at phone
     widths it happened to land just off-screen, but between ~400px and 980px part (or all) of the
     panel sat on top of the page on load. */
  .side{display:block;position:fixed;inset-inline-start:0;top:0;bottom:0;width:min(340px,88vw);
    z-index:1000;background:#fff;box-shadow:var(--sh-xl);transform:translateX(-100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);overflow-y:auto;overscroll-behavior:contain;
    padding:0 15px 18px;border-radius:0}
  html[dir="rtl"] .side{transform:translateX(100%)}
  /* Must out-specify `html[dir="rtl"] .side` above, otherwise the open state loses the cascade
     and the drawer stays parked off-screen no matter how often the filter button is pressed. */
  .side.open,html[dir="rtl"] .side.open{transform:none}
  .side>*+*{margin-top:14px}
  .side .side-box{border-radius:var(--r-sm)}
  .side-head,.side-apply{display:flex}
  .side-apply{display:block}
  .side-scrim{position:fixed;inset:0;background:rgba(31,32,37,.5);z-index:999;
    opacity:0;pointer-events:none;transition:.2s}
  .side-scrim.on{opacity:1;pointer-events:auto}
  .sortbar{overflow-x:auto;scrollbar-width:none;margin-inline:-13px;padding-inline:13px;
    flex-wrap:nowrap}
  .sortbar button,.sortbar a{flex:none}
  .sortbar::-webkit-scrollbar{display:none}
  .cta-band{padding:20px;text-align:center;justify-content:center}
  .cta-band h3{font-size:17px}
  .cat-about{padding:20px 18px}
  .cat-about__title{font-size:16px}
}
@media (max-width:720px){
  .grid.g-1m{grid-template-columns:1fr;gap:14px}
}