/* Final responsive safeguards for catalog semantics and mobile usability. */
@media (max-width: 768px) {
    body:not(.admin-shell) .catalog-grid-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        justify-content: stretch !important;
        gap: 24px 14px;
    }

    body:not(.admin-shell) :where(
        button,
        .button,
        input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
        select,
        textarea,
        summary,
        [role="button"],
        .site-header a,
        .main-nav a,
        .mobile-nav a,
        .filters a,
        .catalog-toolbar a,
        .pagination a,
        .product-section-nav a,
        .text-link
    ) {
        min-inline-size: 48px;
        min-block-size: 48px;
        touch-action: manipulation;
    }

    body:not(.admin-shell) :where(
        .site-header a,
        .main-nav a,
        .mobile-nav a,
        .filters a,
        .catalog-toolbar a,
        .pagination a,
        .product-section-nav a,
        .text-link
    ) {
        display: inline-flex;
        align-items: center;
    }

    body:not(.admin-shell) :where(label.check, label:has(> input[type="checkbox"]), label:has(> input[type="radio"])) {
        min-block-size: 48px;
        padding-block: 10px;
        cursor: pointer;
        touch-action: manipulation;
    }
}

@media (max-width: 480px) {
    body:not(.admin-shell) .catalog-grid-wrapper {
        grid-template-columns: minmax(0, 1fr) !important;
        gap-block: 28px;
    }

    body:not(.admin-shell) main dl {
        display: flex !important;
        width: 100%;
        min-width: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    body:not(.admin-shell) main dl > div {
        width: 100%;
        min-width: 0;
    }

    body:not(.admin-shell) main dl :where(dt, dd) {
        max-width: 100%;
        margin-inline: 0;
        overflow-wrap: anywhere;
    }
}

/* Every shared strain card follows the same image-first phone composition. */
@media (max-width: 600px) {
    body:not(.admin-shell) .product-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        justify-content: stretch !important;
        gap: 18px;
    }

    body:not(.admin-shell) .product-grid > .product-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        width: min(100%, 420px) !important;
        margin-inline: auto;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--border), transparent 8%);
        border-radius: 10px;
        background: color-mix(in srgb, var(--surface), transparent 3%);
        box-shadow: none;
    }

    body:not(.admin-shell) .product-grid .product-media {
        grid-column: 1;
        grid-row: 1;
        width: min(52vw, 190px) !important;
        height: auto;
        margin: 16px auto 0;
        align-self: start;
        aspect-ratio: 9 / 16 !important;
        border: 0;
        border-radius: 8px;
        background: var(--surface-2);
    }

    body:not(.admin-shell) .product-grid .product-card-body {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        min-height: 0 !important;
        height: auto !important;
        padding: 16px !important;
        overflow: visible !important;
    }

    body:not(.admin-shell) .product-grid .product-card h3 {
        margin: 0 0 14px;
        font-size: clamp(1.15rem, 6vw, 1.4rem);
        line-height: 1.15;
    }

    body:not(.admin-shell) .product-grid .product-card h3 a {
        min-height: 0;
    }

    body:not(.admin-shell) .product-grid .profile-overview {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin-bottom: 12px;
        padding: 0 0 12px !important;
        border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 18%);
    }

    body:not(.admin-shell) .product-grid .profile-column {
        display: grid !important;
        width: 100%;
        gap: 8px;
    }

    body:not(.admin-shell) .product-grid .profile-column-right {
        padding-left: 14px;
    }

    body:not(.admin-shell) .product-grid .profile-column dd {
        overflow: visible;
        font-size: .78rem;
        line-height: 1.35;
        text-overflow: clip;
        white-space: normal;
    }

    body:not(.admin-shell) .product-grid .profile-potency {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body:not(.admin-shell) .product-grid .profile-effect-icons {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        margin-top: 14px;
    }

    body:not(.admin-shell) .product-grid .profile-effect-icons dd {
        display: flex;
        min-width: 0;
        flex-wrap: wrap;
        gap: 8px;
    }

    body:not(.admin-shell) .product-grid .product-bottom {
        margin-top: 14px;
        padding-top: 12px;
    }

    body:not(.admin-shell) .product-grid .product-media-tastes {
        bottom: 9px;
        gap: 5px;
    }

    body:not(.admin-shell) .product-grid .product-media-tastes .taste-icon {
        width: 34px;
        height: 34px;
    }

    /* PDP key figures stay scannable instead of inheriting the global stacked dl rule. */
    body:not(.admin-shell) .product-info .spec-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 8px;
        width: 100%;
        margin: 18px 0 20px;
    }

    body:not(.admin-shell) .product-info .spec-row > div {
        display: grid;
        width: auto;
        min-width: 0;
        min-height: 76px;
        align-content: center;
        gap: 5px;
        padding: 12px 14px;
        border: 1px solid color-mix(in srgb, var(--border), transparent 12%);
        border-radius: 10px;
        background: color-mix(in srgb, var(--surface), transparent 3%);
    }

    body:not(.admin-shell) .product-info .spec-row dt,
    body:not(.admin-shell) .product-info .spec-row dd {
        width: 100%;
        max-width: 100%;
        margin: 0;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    body:not(.admin-shell) .product-info .spec-row dt {
        color: var(--muted);
        font-size: .67rem;
        font-weight: 750;
        letter-spacing: .06em;
        line-height: 1.2;
        text-transform: uppercase;
    }

    body:not(.admin-shell) .product-info .spec-row dd {
        color: var(--text);
        font-size: clamp(.92rem, 4.2vw, 1.05rem);
        font-weight: 750;
        line-height: 1.25;
    }

    body:not(.admin-shell) .product-info .spec-row + .buy-box {
        margin-top: 0;
    }
}