/* ============================================================
 * DFS radius — one value everywhere: 32px.
 * OdioBook's own `:root --radius: 2rem`, copied exactly, so the
 * WordPress frontend (shop + blogs) rounds the same way as the SPA.
 * Button ho, card ho, input, notice, box — har corner wahi 32px.
 *
 * Safe by design: only `border-radius` (never layout) is touched, so
 * checkout, cart and widgets keep working — only their corners change.
 * Pill/round functional shapes (checkbox, radio, range, toggle knobs,
 * avatars) are excluded; true circles stay circular, like OdioBook.
 * `corner-shape` is progressive enhancement — browsers without
 * squircle support ignore it and show normal round corners.
 * ============================================================ */

/* Squircle corners wherever a radius exists (OdioBook parity). */
*,
::before,
::after {
  corner-shape: squircle;
}

:root {
  --dfs-radius: 32px;
}

/* — Buttons: every button, whatever the theme calls it — */
button,
input[type="submit"],
input[type="button"],
.button,
a.button,
.wp-element-button,
.wp-block-button__link,
.wp-block-search__button {
  border-radius: 32px !important;
}

/* — Fields: text-like inputs, textarea, select (functional shapes
     like checkbox / radio / range / hidden are left alone) — */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="image"]),
textarea,
select {
  border-radius: 32px !important;
}

/* — Notice + box surfaces that carry their own background — */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice,
.woocommerce-Message,
.cart_totals,
.woocommerce-checkout-review-order,
.woocommerce-checkout-payment,
.comment-respond,
.wp-block-group.has-background {
  border-radius: 32px;
}

/* — Product cards (1px site-line border + 32px; overflow clips inner
     media to the same 32px; sale badges sit inside, so they clip
     cleanly too) — */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  border: 1px solid #e4eaec;
  border-radius: 32px !important;
  overflow: hidden;
}

/* — Product card content breathing room: the photo stays full-bleed at
     the top, but title / price / buttons sit 16px inside the border
     instead of touching it (Neve gives them no side padding by
     default), with 18px of air at the bottom — */
.woocommerce ul.products li.product .nv-card-content-wrapper,
.woocommerce-page ul.products li.product .nv-card-content-wrapper {
  padding-bottom: 18px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product h3,
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product .woocommerce-loop-category__title,
.woocommerce-page ul.products li.product h3,
.woocommerce-page ul.products li.product .price {
  padding-left: 16px;
  padding-right: 16px;
}
.woocommerce ul.products li.product .button,
.woocommerce-page ul.products li.product .button {
  margin-left: 16px;
  margin-right: 16px;
}

/* — Single-product gallery + sale badge — */
.woocommerce div.product div.images img,
.woocommerce span.onsale {
  border-radius: 32px;
}

/* — Product tabs sit flush on their panel: round the top only,
     the join stays square like card-image tops in the SPA — */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  border-radius: 32px 32px 0 0;
}

/* — Pagination (both themes + Woo) and comments (avatars stay
     circular — shapes, not corners) — */
.page-numbers,
.pagination .page-link,
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.comment-body {
  border-radius: 32px !important;
}