/**
 * SCHOOLY — store-wide responsive layer
 * Loaded after schooly-figma.css so it wins for tablet / small / mobile.
 *
 * Breakpoints:
 *   1199  large tablet / small laptop
 *    991  tablet portrait + large phone (hamburger + tab bar)
 *    767  phone
 *    575  small phone
 *    380  very small phone
 */

/* ── Shared safety ─────────────────────────────────────────────── */
html {
  overflow-x: clip;
}

img,
video,
svg,
iframe {
  max-width: 100%;
}

/* ════════════════════════════════════════════════════════════════
   1199px — large tablet / small laptop
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  .container {
    width: min(calc(100% - 40px), 1120px);
  }

  .schooly-global-header__container {
    width: min(calc(100% - 32px), 1120px);
  }

  .schooly-global-menu > li > a {
    padding-inline: 8px;
    font-size: 11px;
  }

  .sf__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 32px;
  }

  .sf__col--connect {
    grid-column: 1 / -1;
  }

  .sf__app-badges {
    max-width: 420px;
  }

  .sf__trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sf__trust-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* ════════════════════════════════════════════════════════════════
   991px — tablet portrait + large phones
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  .container {
    width: min(calc(100% - 28px), 920px);
  }

  /* Header: logo on the start edge, actions on the end edge.
     The desktop 1fr / auto / 1fr grid is what left the empty gap. */
  body .schooly-global-header__container {
    width: 100% !important;
    padding-inline: max(14px, env(safe-area-inset-left), env(safe-area-inset-right)) !important;
  }

  body .schooly-global-nav__row,
  body.schooly-figma-home .schooly-global-nav__row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    grid-template-columns: none !important;
    min-height: 58px !important;
    gap: 8px !important;
  }

  body .schooly-global-brand {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    justify-self: unset !important;
  }

  body .schooly-global-brand img,
  body .schooly-global-brand .custom-logo {
    max-width: min(132px, 42vw) !important;
    max-height: 40px !important;
    width: auto !important;
    height: auto !important;
  }

  body .schooly-global-actions {
    flex: 0 0 auto !important;
    margin-inline-start: auto !important;
    justify-self: unset !important;
    gap: 6px !important;
  }

  body .schooly-global-actions .schooly-global-action,
  body .schooly-global-actions .schooly-global-cart,
  body .schooly-global-actions .schooly-figma-lang,
  body .schooly-account-dropdown {
    display: none !important;
  }

  body .schooly-global-search,
  body .schooly-global-menu-toggle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    flex: 0 0 42px !important;
  }

  body .schooly-global-menu-toggle {
    display: grid !important;
    place-content: center !important;
    border-radius: 10px !important;
  }

  /* Drawer + overlay must exist on tablet too (toggle is visible here). */
  .schooly-mobile-overlay {
    display: block;
  }

  .schooly-mobile-drawer {
    width: min(88vw, 400px) !important;
  }

  /* Footer body */
  .sf__body {
    padding: 44px 0 32px;
  }

  .sf__grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px 24px !important;
  }

  .sf__col--brand,
  .sf__col--connect {
    grid-column: 1 / -1;
  }

  .sf__tagline {
    max-width: none;
  }

  .sf__app-badges {
    max-width: none;
    flex-wrap: wrap;
  }

  .sf__app-badge {
    flex: 1 1 180px;
  }

  .sf__trust-item {
    padding: 16px 14px;
  }

  .sf__trust-item strong {
    font-size: 13px;
  }

  .sf__payments-inner {
    gap: 12px;
  }

  /* Copyright: leave physical-left room — scroll-to-top is pinned left on mobile */
  .sf__bottom {
    padding: 14px 0 calc(14px + env(safe-area-inset-bottom));
  }

  .sf__bottom-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding-left: 56px;
    padding-right: 12px;
  }

  .sf__copy {
    font-size: 12.5px;
    line-height: 1.7;
  }

  .sf__legal {
    justify-content: center;
    gap: 0;
  }

  .sf__legal a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 13px;
  }

  /* Floating buttons sit above the tab bar, opposite sides */
  .scroll-top-btn {
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    left: 12px !important;
    right: auto !important;
    width: 44px;
    height: 44px;
    z-index: 1195;
  }

  html[dir="rtl"] .scroll-top-btn {
    left: 12px !important;
    right: auto !important;
  }

  .schooly-whatsapp-float {
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    right: 12px !important;
    left: auto !important;
    width: 48px;
    height: 48px;
    font-size: 24px;
    z-index: 1195;
  }

  html[dir="rtl"] body.has-whatsapp-float .scroll-top-btn {
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
  }

  /* Shop / catalog — kill Bootstrap row bleed that pushes cards off-screen */
  .schooly-shop-page,
  .sv2-shop,
  .sv2-school-filter-layout,
  .sv2-school-results,
  .shop-products-wrapper,
  .shop-products-wrapper .woocommerce {
    min-width: 0;
    max-width: 100%;
  }

  .woocommerce ul.products.row,
  .ecommza-products-grid.row,
  .shop-products-wrapper ul.products.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    --bs-gutter-x: 12px;
    width: 100% !important;
    max-width: 100% !important;
  }

  .woocommerce ul.products.row > li.product,
  .sv2-shop-products ul.products.row > li.product,
  .sv2-school-results .sv2-shop-products ul.products.row > li.product,
  .ecommza-products-grid.row > [class*="col-"] {
    flex: 0 0 50% !important;
    flex-basis: 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    padding-inline: 6px !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  .schooly-product-card,
  .figma-product-card {
    min-width: 0;
    max-width: 100%;
  }

  .schooly-product-card h3,
  .figma-product-card h3,
  .schooly-product-card__body {
    overflow-wrap: anywhere;
  }

  .sv2-school-filter-mobile-head {
    min-width: 0;
    gap: 8px;
    padding: 8px !important;
  }

  .sv2-school-filter-mobile-head button {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 70%;
    padding: 0 12px !important;
    font-size: 11px !important;
  }

  .sv2-school-filter-mobile-head span {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .schooly-unified-breadcrumb {
    overflow: hidden;
  }

  .schooly-unified-breadcrumb__inner {
    align-items: flex-start !important;
    min-width: 0;
  }

  .schooly-unified-breadcrumb__content {
    min-width: 0;
    max-width: 100% !important;
  }

  .schooly-unified-breadcrumb__title {
    font-size: clamp(1.35rem, 5.4vw, 2rem) !important;
    overflow-wrap: anywhere;
  }

  .schooly-unified-breadcrumb__mark {
    display: none;
  }

  .schooly-shop-page {
    padding: 28px 0 48px;
    overflow-x: clip !important;
  }

  .shop-toolbar,
  .sv2-shop-toolbar,
  .ecommza-archive-toolbar {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 14px !important;
    min-height: 0 !important;
  }

  .product-action_list {
    opacity: 1 !important;
    transform: none !important;
  }

  .box-icon,
  .product-action_list .box-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 13px !important;
  }

  /* Account: horizontal nav chips instead of a tall stacked menu */
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr !important;
    padding: 20px 0;
    gap: 16px;
  }

  .woocommerce-MyAccount-navigation {
    position: static !important;
  }

  .woocommerce-MyAccount-navigation ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 8px !important;
    scrollbar-width: none;
  }

  .woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
    display: none;
  }

  .woocommerce-MyAccount-navigation ul li {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .woocommerce-MyAccount-navigation ul li a {
    white-space: nowrap !important;
    min-height: 42px !important;
    padding: 10px 14px !important;
  }

  .woocommerce-MyAccount-content {
    padding: 18px 16px !important;
  }

  table.shop_table,
  .woocommerce-orders-table,
  .woocommerce-table--order-details {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Cart sidebar: use more of the tablet width */
  .cart-sidebar {
    width: min(420px, 92vw);
  }

  .quickview-modal {
    width: min(96vw, 720px);
  }

  .compare-bar__inner {
    flex-wrap: wrap;
    gap: 10px;
  }

  .compare-bar__items {
    max-width: 100%;
  }

  .woocommerce-pagination {
    margin-top: 32px;
  }

  .woocommerce-pagination ul {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Home grids: 3 school tiles is cramped on a 768px tablet */
  body.schooly-figma-home .figma-schools__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  body.schooly-figma-home .figma-products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* ════════════════════════════════════════════════════════════════
   767px — phones
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .container {
    width: calc(100% - 24px);
  }

  body .schooly-global-header__container {
    padding-inline: max(12px, env(safe-area-inset-left), env(safe-area-inset-right)) !important;
  }

  body .schooly-global-nav__row,
  body.schooly-figma-home .schooly-global-nav__row {
    min-height: 54px !important;
  }

  body .schooly-global-brand img,
  body .schooly-global-brand .custom-logo {
    max-width: min(118px, 46vw) !important;
    max-height: 36px !important;
  }

  body .schooly-global-search,
  body .schooly-global-menu-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex-basis: 40px !important;
  }

  .sf__body {
    padding: 36px 0 28px;
  }

  .sf__grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .sf__col,
  .sf__col--brand,
  .sf__col--connect {
    grid-column: auto;
  }

  .sf__heading {
    margin-bottom: 14px;
    padding-bottom: 8px;
  }

  .sf__app-badges {
    flex-direction: column;
  }

  .sf__app-badge {
    width: 100%;
    flex: 1 1 auto;
  }

  .sf__payments-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .sf__bottom-inner {
    padding-left: 52px;
    padding-right: 8px;
  }

  .schooly-shop-page {
    padding: 20px 0 40px;
  }

  .shop-toolbar,
  .sv2-shop-toolbar,
  .ecommza-archive-toolbar {
    flex-direction: column;
    align-items: stretch !important;
  }

  .shop-toolbar__left,
  .shop-toolbar__right,
  .sv2-shop-toolbar .woocommerce-ordering,
  .sv2-shop-toolbar select {
    width: 100% !important;
  }

  .schooly-product-card h3,
  .figma-product-card h3 {
    font-size: 13px;
    line-height: 1.45;
  }

  .schooly-product-card__price,
  .figma-product-card__price {
    font-size: 13px;
  }

  .schooly-product-link {
    min-height: 38px;
    font-size: 11px;
  }

  .figma-product-card__sizes {
    max-height: 48px;
    overflow: hidden;
  }

  .figma-product-card__sizes span {
    min-width: 26px;
    padding: 2px 5px;
    font-size: 9px;
  }

  .sv2-school-filter-mobile-head {
    flex-wrap: wrap;
  }

  .sv2-school-filter-mobile-head button {
    max-width: 100%;
    justify-content: center;
  }

  .ecommza-cat-hero {
    min-height: 200px;
  }

  .ecommza-cat-hero__content {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 0;
    gap: 12px;
  }

  .ecommza-cat-hero__logo {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }

  .quickview-modal {
    width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
  }

  .quickview-product {
    grid-template-columns: 1fr;
  }

  .compare-bar__items {
    display: none;
  }

  .wishlist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
  }

  body.schooly-figma-home .figma-schools__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.schooly-figma-home .figma-features__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .schooly-mobile-tabbar__label {
    font-size: 10px;
  }

  .schooly-command-search__category-grid {
    grid-template-columns: 1fr;
  }

  .schooly-campaign-card {
    height: min(380px, 78vw) !important;
    min-height: 220px !important;
  }

  .schooly-showcase__slider {
    height: min(520px, 78vh) !important;
  }

  .schooly-unified-breadcrumb,
  .ecommza-breadcrumb,
  .woocommerce-breadcrumb {
    overflow-wrap: anywhere;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  input[type="number"],
  input[type="password"],
  select,
  textarea,
  .woocommerce form .form-row input.input-text,
  .woocommerce form .form-row select {
    min-height: 44px;
    font-size: 16px !important;
  }

  textarea {
    min-height: 96px;
  }

  .compare-modal,
  .compare-modal__panel {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   575px — small phones
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 575px) {
  .container {
    width: calc(100% - 20px);
  }

  body .schooly-global-header__container {
    padding-inline: max(12px, env(safe-area-inset-left), env(safe-area-inset-right)) !important;
  }

  body .schooly-global-brand img,
  body .schooly-global-brand .custom-logo {
    max-width: min(104px, 44vw) !important;
    max-height: 32px !important;
  }

  body .schooly-global-search,
  body .schooly-global-menu-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex-basis: 38px !important;
  }

  .sf__trust-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .sf__trust-item {
    padding: 12px 10px;
    gap: 10px;
  }

  .sf__trust-icon {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .sf__trust-item strong {
    font-size: 12px;
  }

  .sf__trust-item > div > span {
    font-size: 11px;
  }

  .sf__payments-list {
    gap: 6px;
  }

  .sf__payment-badge {
    height: 32px;
    min-width: 46px;
    font-size: 18px;
  }

  .sf__legal a {
    padding: 6px 8px;
    font-size: 12px;
  }

  /* Keep a 2-column catalog — 1 column makes the shop feel empty and long */
  .woocommerce ul.products.row > li.product,
  .sv2-shop-products ul.products.row > li.product,
  .sv2-school-results .sv2-shop-products ul.products.row > li.product {
    flex-basis: 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    padding-inline: 6px !important;
  }

  .sv2-school-product-skeleton {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-products-wrapper ul.products.row {
    row-gap: 14px !important;
  }

  .ecommza-products-grid.row > [class*="col-"] {
    width: 50%;
  }

  body.schooly-figma-home .figma-schools__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }

  body.schooly-figma-home .figma-trending__grid {
    grid-template-columns: 1fr;
  }

  .cart-sidebar {
    width: 100%;
    max-width: 100%;
  }
}

/* ════════════════════════════════════════════════════════════════
   380px — very small phones
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  body .schooly-global-actions {
    gap: 4px !important;
  }

  body .schooly-global-search,
  body .schooly-global-menu-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex-basis: 36px !important;
  }

  .sf__trust-grid {
    grid-template-columns: 1fr !important;
  }

  .sf__bottom-inner {
    padding-left: 48px;
    padding-right: 6px;
  }

  .schooly-mobile-tabbar {
    padding-inline: 2px;
  }

  .schooly-mobile-tabbar__label {
    font-size: 9px;
  }
}