/* JC Theme v221 - Visual Stability Layer
   Purpose: keep aesthetic/layout-critical primitives stable after v215-v218 cleanup, performance split, and modularization.
   This file is intentionally small and loaded after the main stylesheet. It does not change WooCommerce business logic. */

/* Accessibility utility must be global; many WordPress/WooCommerce forms rely on it. */
.screen-reader-text,
.screen-reader-text span,
.ui-helper-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.screen-reader-text:focus {
    clip: auto !important;
    clip-path: none !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    z-index: 100000 !important;
    top: 8px !important;
    left: 8px !important;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    background: var(--jc-text, #111111) !important;
    color: var(--jc-bg, #fffaf2) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .18) !important;
}

/* Defensive media/form primitives. */
img,
picture,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
}

input[type="search"],
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
textarea,
select {
    max-width: 100%;
}

/* Prevent WooCommerce clearfix/floats from fighting CSS grid layouts. */
.woocommerce ul.products,
.woocommerce-page ul.products {
    clear: both;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
    content: none !important;
    display: none !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    float: none !important;
    clear: none !important;
    margin-left: 0;
    margin-right: 0;
}

/* Keep product cards visually even when titles/prices/buttons have different lengths. */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.jc-product-card-title,
.jc-product-title {
    overflow-wrap: anywhere;
}

/* Homepage search bar guard. The detailed shape lives in home-search.css; this keeps the DOM stable globally. */
.jc-home-search {
    isolation: isolate;
}

.jc-home-search > input[type="hidden"],
.jc-home-search input[type="hidden"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    grid-column: auto !important;
    flex: 0 0 0 !important;
}

.jc-home-search > label,
.jc-home-search > .screen-reader-text {
    grid-column: 1 / -1;
}

/* Product page guards: avoid broken overflow after CSS order changes. */
.jc-product-page,
.jc-product-hero,
.jc-product-panel,
.jc-font-tester,
.jc-glyph-viewer,
.jc-license-panel {
    min-width: 0;
}

.jc-font-tester textarea,
.jc-font-tester input,
.jc-variable-tester textarea,
.jc-variable-tester input {
    max-width: 100%;
}

/* Admin/front button polish guard: keep WordPress/Woo buttons from inheriting odd browser defaults. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.jc-button,
.jc-btn,
button[type="submit"] {
    text-decoration: none;
    cursor: pointer;
}

/* Mobile overflow safety for aesthetic stability. */
@media (max-width: 782px) {
    html,
    body {
        overflow-x: hidden;
    }

    .jc-container,
    .jc-home-hero__panel,
    .jc-product-wrap,
    .jc-product-main,
    .woocommerce,
    .woocommerce-page {
        max-width: 100%;
    }
}