/* ===================================================================
   BRAND RADIUS - corner layer
   -------------------------------------------------------------------
   The store's visual language is soft: pill navigation, pill badges,
   rounded section cards. But a lot of components were never given a
   corner at all, so square edges kept showing up next to those pills -
   the hero call-to-actions, every product image, the product info box,
   the login card, the filter panel, all form inputs.

   This file loads last, next to brand-colour.css, and settles corners
   the same way that file settles contrast: in one place, instead of
   hunting a value through 19k lines of component CSS.

   The scale - four steps and a pill, so corners stay related to each
   other rather than drifting to 2px, 5px, 6px, 7px, 9px and 13px as
   they had:

     --radius-xs    10px   tight controls - quantity steppers, chips
     --radius-sm    14px   inputs, selects, small buttons
     --radius-md    18px   cards, image frames, tiles
     --radius-lg    26px   large panels - login card, info box, filters
     --radius-pill  999px  buttons and badges, matching the navbar

   Anything full-bleed stays square on purpose: the navbar, hero
   sections, footer divider rows, and the carousel indicator bars.
   =================================================================== */

:root {
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;
}

/* -------------------------------------------------------------------
   BUTTONS -> pill

   The navbar's Account and Cart buttons were already pills while the
   hero's "Shop All Cutters" sat square directly beneath them. Buttons
   now share one shape site-wide.
   ------------------------------------------------------------------- */
.jp-btn,
.jp-btn-primary,
.jp-btn-secondary,
.jp-empty-btn,
.jp-btn-login,
.jp-back-button,
.jp-add-cart-btn,
.jp-apply-btn,
.jp-home-add-to-cart-btn,
.btn-cta-primary,
.btn-testimonials-cta,
.browse-btn,
.btn-community,
.desktop-apply-btn,
.filter-apply-btn,
.checkout-btn,
.btn-primary-action,
.jp-checkout-btn,
.jp-clear-cart-btn,
.jp-continue-shopping-btn,
.jp-promo-apply-btn,
.btn-cancel,
.btn-confirm,
.remove-promo-btn,
.mobile-delete-btn,
.jp-remove-btn {
  border-radius: var(--radius-pill);
}

/* Bootstrap's own buttons pick up the same shape rather than its 6px.
   Every variant carries .btn too, so the one selector covers them all. */
.btn {
  border-radius: var(--radius-pill);
}

/* Quantity steppers are small and sit in a row - a full pill on a 45px
   square would read as a circle pair, so they take the tight step. */
.qty-btn,
.mobile-qty-btn,
.jp-qty-btn {
  border-radius: var(--radius-xs);
}

/* -------------------------------------------------------------------
   FORM CONTROLS -> soft

   Every text field was on the Bootstrap 4px default, which is the
   sharpest thing on a page otherwise built from pills.
   ------------------------------------------------------------------- */
.form-input,
.form-control,
.form-select,
.jp-form-input,
.jp-promo-input,
.jp-quantity-input,
.mobile-quantity-input,
.desktop-filter-input,
.desktop-price-input,
.desktop-filter-select,
.qty-value,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
select,
textarea {
  border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------------
   BADGES AND CHIPS -> pill
   ------------------------------------------------------------------- */
.jp-badge,
.jp-hero-badge,
.stock-badge,
.badge,
.arrivals-badge,
.carousel-badge-premium,
.badge-low-stock,
.badge-out,
.jp-trust-badge,
.jp-in-stock-badge,
.suggestion-tag,
.hero-badge,
.status-pending,
.status-packed,
.status-shipped,
.status-delivered,
.status-completed,
.status-cancelled,
.status-refunded,
.currency-toggle-btn,
.tax-card__count,
.tax-chip {
  border-radius: var(--radius-pill);
}

/* -------------------------------------------------------------------
   PRODUCT IMAGERY -> rounded, and clipped so the picture actually
   follows the corner instead of poking through it.
   ------------------------------------------------------------------- */
.jp-home-product-image-container,
.jp-product-image-container,
.product-image-wrapper,
.theme-card-image,
.jp-cart-item-image,
.saved-card-image,
.mobile-cart-image,
.jp-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* The overlays sit on top of those images at the same size, so they
   need the same corner or a square tint shows at each edge on hover. */
.jp-home-product-overlay,
.jp-product-overlay,
.product-overlay,
.theme-card-overlay {
  border-radius: var(--radius-md);
}

.jp-home-product-image,
.jp-product-image,
.card-img-top.product-image,
.main-image,
.jp-frame img {
  border-radius: var(--radius-md);
}

/* The mobile breakpoints explicitly squared these off with !important,
   which left product pictures round on desktop and sharp on a phone. */
@media (max-width: 991.98px) {
  body .featured-products-section .product-image,
  body .product-image-wrapper,
  body .jp-home-product-image-container,
  body .jp-product-image-container {
    border-radius: var(--radius-md) !important;
  }
}

/* -------------------------------------------------------------------
   PANELS AND CARDS -> the large step

   These are the big square boxes: the product info column, the tab
   body beneath it, the login/signup card, the empty-cart panel and the
   desktop filter bar.
   ------------------------------------------------------------------- */
.product-info-box,
.tabs-content,
.jp-login-card,
.jp-empty-cart,
.jp-empty-wishlist,
.desktop-inline-filters,
.cart-item-picks,
.jp-cart-header,
.jp-cart-item,
.jp-cart-footer,
.jp-promo-card,
.jp-summary-card,
.jp-summary-content,
.checkout-card,
.promise-card-new,
.content-note {
  border-radius: var(--radius-lg);
}

/* These panels hold a header and a body that run edge to edge, so the
   panel clips them instead of each child restating the corner. */
.jp-summary-card,
.jp-promo-card,
.jp-cart-item,
.jp-cart-header {
  overflow: hidden;
}

/* Segmented controls - the stepper and the promo field+button pair.
   The group carries the corner and clips, so the parts inside stay
   square against each other instead of each rounding separately. */
.jp-quantity-controls,
.jp-promo-input-group {
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Clipping the group was not enough on its own: the parts kept the radius
   the rules above give every input and button, and a 14px corner on a
   40px-wide quantity field rounded the digit itself out of view. */
.jp-quantity-controls .jp-qty-btn,
.jp-quantity-controls .jp-quantity-input,
.jp-promo-input-group .jp-promo-input,
.jp-promo-input-group .jp-promo-apply-btn {
  border-radius: 0;
}

/* Boxes nested inside a rounded panel take the step below it */
.jp-summary-info,
.jp-trust-badges,
.jp-empty-suggestions {
  border-radius: var(--radius-md);
}

/* Panel headers and feet sit flush against their panel, so they round
   only on the edge they actually meet. */
.jp-summary-header,
.jp-promo-header,
.card-header {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* A card header sits flush inside its card, so it rounds only where it
   meets the card's own top corners. */
.jp-card-header {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.desktop-inline-form {
  border-radius: var(--radius-lg);
}

/* Product and theme cards themselves */
.product-card,
.jp-home-product-card,
.jp-product-card,
.theme-card,
.tax-card,
.card {
  border-radius: var(--radius-md);
}

/* Taxonomy panels: the editorial asides on a category landing page and
   its empty state are the same weight as the panels above. */
.tax-note,
.tax-noresults {
  border-radius: var(--radius-lg);
}

/* The quick-facts icon is a 42px square - the tight step, same as the
   quantity steppers, or it reads as a circle. */
.tax-fact__icon {
  border-radius: var(--radius-xs);
}

/* Range index cells are small tiles, not cards. At ~70px tall the card
   step rounds them most of the way to a lozenge. */
.tax-range {
  border-radius: var(--radius-sm);
}

/* Card feet sit against the card's bottom edge */
.jp-home-product-footer,
.jp-product-footer {
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Tab headers sit directly on top of .tabs-content, so they round at the
   top only - a full corner would float them off the panel they label. */
.tab-btn {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* -------------------------------------------------------------------
   MENUS AND POPOVERS
   ------------------------------------------------------------------- */
.dropdown-menu,
.currency-dropdown,
.modal-content,
.delete-modal-content,
.alert {
  border-radius: var(--radius-md);
}

/* -------------------------------------------------------------------
   Deliberately left square
   -------------------------------------------------------------------
   .jp-indicators button   - carousel progress bars, meant to be bars
   .navbar                 - full-bleed sticky bar
   .row.border-top         - footer rules, a divider not a box
   full-width mobile menus - edge-to-edge by design at < 992px
   ------------------------------------------------------------------- */