/* jdtheme26 - tablet polish, 768-1024px only. Loaded last on every page.
   Rule: nothing here may touch phones (<= 767px) or desktop (>= 1025px). WoodMart treats a 768px viewport as "phone"
   (its breakpoint is 768.98px), so a few rules below carry the narrow range 768 - 768.98px to give exactly 768px
   the same layout as 769 - 1024px. */

/* ---- product grids: WoodMart drops to 2 columns at exactly 768px; keep the tablet column count ---- */
@media (min-width: 768px) and (max-width: 768.98px) {
  body .wd-products.wd-grid-g { --wd-col: var(--wd-col-md); --wd-gap: var(--wd-gap-lg); }
  /* login / register: side by side from 769px on, so also at exactly 768px */
  body #customer_login { --wd-col: var(--wd-col-lg); --wd-gap: var(--wd-gap-md); }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* ---- my account (logged in): content used 8 of 12 grid columns (about 520px); use the full width ---- */
  /* the address pages (body.woocommerce-edit-address) are styled by their own sheet, jd-account-address.css */
  body.woocommerce-account.logged-in:not(.woocommerce-edit-address) .woocommerce-MyAccount-content {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
  }

  body.woocommerce-account.logged-in:not(.woocommerce-edit-address) .jdsl-card { max-width: 760px; }   /* member card as wide as the list under it */

  /* ---- checkout: WoodMart caps the details at 50% and the summary at 60%; one column should use the full width ---- */
  body.woocommerce-checkout form.woocommerce-checkout > #customer_details,
  body.woocommerce-checkout form.woocommerce-checkout > .checkout-order-review,
  body.woocommerce-checkout form.woocommerce-checkout > #payment {
    max-width: none;
    width: 100%;
  }

  /* ---- brands index (page of letters + plain link lists): wrap the letter chips, two letter groups per row ---- */
  body.page-id-987964 .entry-content {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 8px;
    align-items: start;
  }
  body.page-id-987964 .entry-content > h6 { grid-column: span 1; margin: 0; }
  body.page-id-987964 .entry-content > h6 > a { display: flex; align-items: center; justify-content: center; min-height: 44px; }
  body.page-id-987964 .entry-content > h2 { grid-column: span 1; margin: 18px 0 0; }
  body.page-id-987964 .entry-content > p { grid-column: span 5; margin: 18px 0 0; }
  body.page-id-987964 .entry-content > p > a { display: inline-block; padding-block: 6px; }

  /* ---- touch targets: at least 44px (tablets are touch devices) ---- */
  body .whb-header .wd-tools-element > a { min-width: 44px; min-height: 44px; justify-content: center; }
  body .wd-product .wd-add-btn > a.button { width: 44px; height: 44px; }
  body .jd-subcats .jd-subcat > a { padding-block: 13px; }
  body .wd-pagination :is(a, span).page-numbers,
  body .woocommerce-pagination :is(a, span).page-numbers { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  body .footer-widget .menu > li > a { display: inline-block; padding-block: 12px; }
  body .jd-hero .jd-btn { min-height: 44px; }
  body .wd-nav-arrows .wd-btn-arrow { min-width: 44px; min-height: 44px; }
  body.single-product form.cart .quantity { width: 136px; }
  body.single-product form.cart .quantity :is(.minus, .plus) { flex-basis: 44px; width: 44px; }
  body.woocommerce-cart .shop_table .quantity :is(.minus, .plus) { min-width: 44px; min-height: 44px; }
  body.woocommerce-cart .shop_table a.remove { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  body .wd-product .wd-action-btn.wd-wishlist-btn > a { width: 44px !important; height: 44px !important; }   /* !important: late WoodMart part CSS sets 32-34px with equal weight */
  body .jd-bestsell__all { display: inline-flex; align-items: center; min-height: 44px; }
}