/* WooCommerce and Tutor LMS layout compatibility.
   =========================================================================
   Both render straight into <main> with no theme container, so their pages
   ran edge-to-edge while every RevoHub section sat inside .rh-wrap. This
   gives them the same measure without editing templates.

   Deliberately colour-neutral: every value is a --wp--preset--* token, so
   this file follows whatever palette tokens.css defines and does not need
   changing if the theme direction changes again. Kept when the Deep Forest
   dark direction was reverted on 2026-08-13, because the container bug it
   fixes is a layout problem, not a colour one.
   ========================================================================= */

.rh-main > .woocommerce,
.rh-main > .woocommerce-notices-wrapper,
.rh-main > .tutor-wrap,
.rh-main > .tutor-container,
.woocommerce-account .woocommerce,
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.single-product .woocommerce{
  max-width:1280px;
  margin-inline:auto;
  padding-inline:24px;
  padding-block:var(--wp--preset--spacing--70);
}
@media (min-width:768px){
  .rh-main > .woocommerce,
  .rh-main > .tutor-wrap{padding-block:var(--wp--preset--spacing--90)}
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{margin-bottom:24px}

/* Give WooCommerce's controls the same shape as the theme's own. */
.woocommerce select,
.woocommerce-page select,
.tutor-wrap select,
select.orderby{
  border:1px solid var(--wp--preset--color--green-200);
  border-radius:var(--wp--custom--radius--input);
  padding:10px 14px;
  font:inherit;
}
.woocommerce .quantity .qty{
  border:1px solid var(--wp--preset--color--green-200);
  border-radius:var(--wp--custom--radius--input);
  padding:10px;
}
.woocommerce ul.products li.product{padding:14px}
.woocommerce ul.products li.product a img{
  border-radius:var(--wp--custom--radius--image);
  margin-bottom:14px;
}

/* Focus is never removed anywhere in this design, including on third-party UI. */
.woocommerce :where(a,button,input,select,textarea):focus-visible,
.tutor-wrap :where(a,button,input,select,textarea):focus-visible{
  outline:2px solid var(--wp--preset--color--green-700);
  outline-offset:2px;
}

/* ---------------------------------------------------------------
   Tutor LMS course archive - filter panel.
   Below 1200px Tutor turns the filter sidebar into a fixed
   off-canvas drawer (left:100%) opened by a toggle button that this
   theme's archive template does not render, which left course search
   and category filtering unreachable on tablets and phones. Keep the
   panel in normal document flow at every width: a column beside the
   grid on wide screens, a stacked block above it on narrow ones.
   No new colours are introduced and focus styling is inherited.
   --------------------------------------------------------------- */
@media (max-width:1199.98px){
  .tutor-wrap .tutor-course-filter-container,
  .tutor-course-filter-container{
    position:static;
    inset:auto;
    width:100%;
    max-width:none;
    height:auto;
    max-height:none;
    overflow:visible;
    z-index:auto;
    box-shadow:none;
    transition:none;
    margin-block-end:var(--wp--preset--spacing--50,32px);
  }
  .tutor-course-filter-container .tutor-course-filter{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:var(--wp--preset--spacing--40,24px);
    align-items:start;
  }
}