/* ==========================================================================
   Pharma Composition Manager — Storefront Catalog
   Design intent: a clinical reference/formulary tool, not a marketing page.
   Color: deep teal-blue accent on a clean clinical white/slate field.
   Type: Inter for body/UI text, Poppins for headings and emphasis — no
   third face, both loaded from Google Fonts by class-shortcodes.php.

   Variables live on :root (not #pcm-app) because [pharma_catalog] and
   [pharma_selected] are independent shortcodes that may end up on
   different pages — .pcm-selected-wrapper needs these tokens even when
   #pcm-app isn't present anywhere on that page.
   ========================================================================== */

:root {
    --pcm-ink: #0f172a;
    --pcm-ink-soft: #475569;
    --pcm-ink-faint: #94a3b8;

    --pcm-paper: #f8fafc;
    --pcm-card: #ffffff;
    --pcm-border: #e2e8f0;
    --pcm-border-soft: #eef2f6;

    /* Primary Brand — overridden per-site by an inline <style> block
       that PCM_Settings::palette() generates from the single Accent
       Color chosen on the Pharma Catalog → Settings screen. These are
       just the compiled-in fallback if that inline block is ever
       missing, so the catalog still renders sensibly on its own. */
    --pcm-accent: #4a0054;
    --pcm-accent-dark: #34003b;
    --pcm-accent-soft: #f3e6f5;
    --pcm-accent-rgb: 74, 0, 84;
    --pcm-accent-ink: #ffffff;

    /* Status Colors */
    --pcm-confirm: #15803d;
    --pcm-confirm-soft: #e9f7ef;

    --pcm-danger: #dc2626;

    /* Radius */
    --pcm-radius-sm: 8px;
    --pcm-radius-md: 12px;
    --pcm-radius-lg: 18px;

    /* Shadows — tinted with the accent color's own RGB so they stay in
       harmony with whatever color is chosen, instead of a fixed hue. */
   

    
}

.header-table{
    background-color: var(--pcm-accent);
}

#pcm-app {
    font-family: var(--pcm-font-body);
    color: var(--pcm-ink);
    margin: 32px 0;
}
#pcm-app *,
.pcm-selected-wrapper * {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------
   Toolbar: search + filter toggle
   -------------------------------------------------------------------- */

/* Shown only when [pharma_catalog] has a category/segment/dosage_form
   default set, so a visitor landing on e.g. a dedicated "Tablets" page
   can see at a glance what the page is scoped to. */
.pcm-locked-context {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 4px 12px;
}

.pcm-locked-context-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--pcm-ink-soft);
}

.pcm-locked-context-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--pcm-accent-soft);
    color: var(--pcm-accent-dark);
    font-family: var(--pcm-font-heading);
    font-weight: 600;
    font-size: 13px;
}

.pcm-toolbar {
    background: var(--pcm-card);
    border: 1px solid var(--pcm-border);
    border-radius: var(--pcm-radius-lg);
    padding: 14px;
    box-shadow: var(--pcm-shadow);
    margin-bottom: 16px;
}

.pcm-search-row {
    display: flex;
    gap: 10px;
}

.pcm-search-field {
    position: relative;
    flex: 1;
    min-width: 0;
}

.pcm-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pcm-ink-faint);
    pointer-events: none;
}

#pcm-search {
    width: 100%;
    height: 52px;
    border: 1px solid var(--pcm-border);
    border-radius: var(--pcm-radius-md);
    padding: 0 16px 0 44px;
    font-size: 15px;
    background: var(--pcm-paper);
    color: var(--pcm-ink);
    transition: border-color .15s ease, background .15s ease;
}

#pcm-search::placeholder {
    color: var(--pcm-ink-faint);
}

#pcm-search:focus {
    outline: none;
    border-color: var(--pcm-accent);
    background: var(--pcm-card);
    box-shadow: 0 0 0 3px var(--pcm-accent-soft);
}

.pcm-filter-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 18px;
    border: 1px solid var(--pcm-border);
    border-radius: var(--pcm-radius-md);
    background: var(--pcm-paper);
    color: var(--pcm-ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color .15s ease, background .15s ease;
}

.pcm-filter-toggle:hover {
    background: var(--pcm-border-soft);
}

.pcm-filter-toggle[aria-expanded="true"] {
    border-color: var(--pcm-accent);
    background: var(--pcm-accent-soft);
    color: var(--pcm-accent-dark);
}

.pcm-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--pcm-accent);
    color: var(--pcm-accent-ink);
    font-size: 12px;
    font-weight: 700;
}

.pcm-filter-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

/* Each select lives inside a .pcm-filter-item so a page-level default
   (e.g. [pharma_catalog dosage_form="Tablets"]) can hide just that one
   field from the panel — the page already represents that filter, so
   showing a redundant dropdown for it would only confuse visitors. */
.pcm-filter-item {
    flex: 1;
    min-width: 160px;
}

.pcm-filter-item.pcm-filter-locked {
    display: none;
}

.pcm-filter-panel select {
    width: 100%;
    height: 46px;
    border: 1px solid var(--pcm-border);
    border-radius: var(--pcm-radius-md);
    padding: 0 12px;
    background: var(--pcm-paper);
    color: var(--pcm-ink);
    font-size: 14px;
    cursor: pointer;
}

.pcm-filter-panel select:focus {
    outline: none;
    border-color: var(--pcm-accent);
    box-shadow: 0 0 0 3px var(--pcm-accent-soft);
}

.pcm-clear-filters {
    border: none;
    background: none;
    color: var(--pcm-accent-dark);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    padding: 0 4px;
    flex-shrink: 0;
    align-self: center;
}

.pcm-results-row {
    margin: 4px 4px 14px;
}

.pcm-results-count {
    font-size: 13px;
    color: var(--pcm-ink-soft);
    font-weight: 500;
}

/* --------------------------------------------------------------------
   Products container
   -------------------------------------------------------------------- */

.pcm-products {
    min-width: 0;
}

/* --------------------------------------------------------------------
   Results table
   -------------------------------------------------------------------- */

.pcm-table-wrap {
    background: var(--pcm-card);
    border: 1px solid var(--pcm-border);
    border-radius: var(--pcm-radius-lg);
    overflow: hidden;
    box-shadow: var(--pcm-shadow);
}

.pcm-table {
    width: 100%;
    border-collapse: collapse;
}

.pcm-table thead th {
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pcm-ink-faint);
    background: var(--pcm-paper);
    padding: 14px 16px;
    border-bottom: 1px solid var(--pcm-border);
}

.pcm-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--pcm-border-soft);
    vertical-align: middle;
    font-size: 14px;
    color: var(--pcm-ink);
}

.pcm-table tbody tr:last-child td {
    border-bottom: none;
}

.pcm-table tbody tr:hover {
    background: var(--pcm-paper);
}

.pcm-row-title {
    font-family: var(--pcm-font-heading);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--pcm-ink);
    word-break: break-word;
}

.pcm-col-sr {
    width: 4%;
    color: var(--pcm-ink-faint);
    font-weight: 600;
    text-align: center;
}

.pcm-col-composition {
    width: 52%;
}

.pcm-col-tags {
    width: 20%;
}

.pcm-col-moq {
    width: 10%;
}

.pcm-moq-input-row {
    width: 100%;
    max-width: 100px;
    height: 36px;
    border: 1px solid var(--pcm-border);
    border-radius: var(--pcm-radius-sm);
    padding: 0 8px;
    font-size: 13px;
    color: var(--pcm-ink);
    background: var(--pcm-paper);
}

.pcm-moq-input-row::placeholder {
    color: var(--pcm-ink-faint);
    font-size: 12px;
}

.pcm-moq-input-row:focus {
    outline: none;
    border-color: var(--pcm-accent);
    background: var(--pcm-card);
    box-shadow: 0 0 0 3px var(--pcm-accent-soft);
}

.pcm-col-action {
    width: 14%;
}

.pcm-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pcm-tag {
    background: var(--pcm-paper);
    border: 1px solid var(--pcm-border-soft);
    color: var(--pcm-ink-soft);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}

.pcm-select-product {
    width: 100%;
    height: 42px;
    border: 1.5px solid var(--pcm-accent);
    border-radius: var(--pcm-radius-sm);
    background: transparent;
    color: var(--pcm-accent-dark);
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    padding: 0 14px;
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}

.pcm-select-product:hover {
    background: var(--pcm-accent-soft);
}

.pcm-select-product:active {
    transform: scale(0.98);
}

.pcm-select-product.pcm-selected-btn {
    background: var(--pcm-confirm);
    border-color: var(--pcm-confirm);
    color: #fff;
    width: 100%;
}

.pcm-select-product.pcm-selected-btn:hover {
    background: #136a34;
}
.pcm-select-product {
    width: 100% !important;
}

/* --------------------------------------------------------------------
   Loading / empty / pagination states
   -------------------------------------------------------------------- */

.pcm-loading,
.pcm-empty-state {
    background: var(--pcm-card);
    border: 1px solid var(--pcm-border);
    border-radius: var(--pcm-radius-lg);
    padding: 56px 24px;
    text-align: center;
    color: var(--pcm-ink-soft);
    box-shadow: var(--pcm-shadow);
}

.pcm-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2.5px solid var(--pcm-border);
    border-top-color: var(--pcm-accent);
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: -3px;
    animation: pcm-spin .7s linear infinite;
}

@keyframes pcm-spin {
    to { transform: rotate(360deg); }
}

.pcm-empty-title {
    font-family: var(--pcm-font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--pcm-ink);
    margin: 0 0 6px;
}

.pcm-empty-sub {
    font-size: 14px;
    margin: 0;
}

.pcm-empty-state-with-contact .pcm-empty-sub {
    margin-bottom: 18px;
}

.pcm-empty-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.pcm-empty-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1.5px solid var(--pcm-accent);
    border-radius: var(--pcm-radius-sm);
    color: var(--pcm-accent-dark);
    background: var(--pcm-card);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease;
}

.pcm-empty-contact-link:hover {
    background: var(--pcm-accent-soft);
}

.pcm-empty-contact-link svg {
    flex-shrink: 0;
}

.pcm-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
    padding: 4px;
}

.pcm-pagination button {
    height: 40px;
    padding: 0 18px;
    border: 1px solid var(--pcm-border);
    border-radius: var(--pcm-radius-sm);
    background: var(--pcm-card);
    color: var(--pcm-ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.pcm-pagination button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.pcm-pagination button:not(:disabled):hover {
    border-color: var(--pcm-accent);
    color: var(--pcm-accent-dark);
}

.pcm-page-info {
    font-size: 13px;
    color: var(--pcm-ink-soft);
    font-weight: 500;
}

/* --------------------------------------------------------------------
   Selected panel (shared markup for sidebar + mobile sheet)
   -------------------------------------------------------------------- */

.pcm-selected-box {
    width: 100%!important;
    background: var(--pcm-card);
    border: 1px solid var(--pcm-border);
    border-radius: var(--pcm-radius-lg);
    overflow: hidden;
    box-shadow: var(--pcm-shadow);
    display: flex;
    flex-direction: column;
}

.pcm-selected-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--pcm-border-soft);
    background: var(--pcm-paper);
}

.pcm-selected-header > div {
    flex: 1;
    min-width: 0;
}

.pcm-selected-header h3 {
    margin: 0;
    font-family: var(--pcm-font-heading);
    font-size: 15.5px;
    font-weight: 700;
    color: var(--pcm-ink);
}

.pcm-selected-header small {
    color: var(--pcm-ink-faint);
    font-size: 12px;
}

.pcm-selected-count {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--pcm-accent);
    color: var(--pcm-accent-ink);
    font-weight: 700;
    font-size: 13px;
}

.pcm-selected-products {
    max-height: 420px;
    overflow-y: auto;
}

.pcm-selected-item-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pcm-selected-name {
    font-family: var(--pcm-font-heading);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--pcm-ink);
    word-break: break-word;
}

.pcm-selected-packing {
    font-size: 11.5px;
    color: var(--pcm-ink-faint);
}

.pcm-remove-item {
    flex-shrink: 0;
    border: none;
    background: none;
    color: var(--pcm-danger);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: 0 2px;
}

.pcm-selected-footer {
    padding: 14px 18px;
    border-top: 1px solid var(--pcm-border-soft);
    background: var(--pcm-paper);
}

.pcm-clear-all {
    width: 100%;
    height: 44px;
    border: 1px solid var(--pcm-border);
    border-radius: var(--pcm-radius-sm);
    background: var(--pcm-card);
    color: var(--pcm-danger);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

.pcm-clear-all:hover {
    background: #fef2f2;
    border-color: #fecaca;
}

.pcm-empty {
    text-align: center;
    padding: 36px 20px;
    color: var(--pcm-ink-faint);
    font-size: 13.5px;
}

/* --------------------------------------------------------------------
   Selected wrapper: hidden entirely until at least one item is chosen
   -------------------------------------------------------------------- */

.pcm-selected-wrapper {
    max-width: 100%;
    padding: 0px!important;
   
}

.pcm-selected-wrapper[hidden] {
    display: none;
}

/* --------------------------------------------------------------------
   MOQ input, per selected item
   -------------------------------------------------------------------- */

.pcm-selected-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--pcm-border-soft);
}

.pcm-selected-item-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.pcm-moq-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pcm-moq-label {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pcm-ink-faint);
    width: 32px;
}

.pcm-moq-input {
    flex: 1;
    height: 36px;
    border: 1px solid var(--pcm-border);
    border-radius: var(--pcm-radius-sm);
    padding: 0 10px;
    font-size: 13px;
    color: var(--pcm-ink);
    background: var(--pcm-paper);
}

.pcm-moq-input::placeholder {
    color: var(--pcm-ink-faint);
}

.pcm-moq-input:focus {
    outline: none;
    border-color: var(--pcm-accent);
    background: var(--pcm-card);
    box-shadow: 0 0 0 2px var(--pcm-accent-soft);
}

/* The [hidden] attribute and a class's own `display` declaration have
   equal specificity, so without this rule a later class declaration in
   the cascade can win and keep an element visible even when JS sets
   `hidden` (e.g. before anything is selected/filtered). Every element in
   this UI that's toggled via the hidden attribute gets a matching
   higher-specificity override here so hidden always wins regardless of
   source order. */
.pcm-filter-count[hidden],
.pcm-clear-filters[hidden] {
    display: none;
}

/* ==========================================================================
   Mobile-only floating shortcut to the selected-compositions panel.

   Visibility is driven entirely by catalog.js adding/removing the
   .pcm-mobile-cta-visible class (based on: 1+ item selected, the
   viewport actually being phone-width via matchMedia — not just this
   media query — and the selected panel not already being on screen).
   The base rule below is `!important` specifically so nothing else in
   this file (or a theme) can accidentally make it visible outside that
   class + breakpoint combination.
   ========================================================================== */

.pcm-mobile-cta {
    display: none !important;
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%) translateY(10px);
    z-index: 9999;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 20px;
    border: none!important;
    border-radius: 16px!important;
    background: #111111!important;
    color: #ffffff!important;
    font-family: var(--pcm-font-heading);
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    opacity: 0;
}

.pcm-mobile-cta-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    font-size: 12px;
}

@media (max-width: 699px) {

    .pcm-mobile-cta.pcm-mobile-cta-visible {
        display: flex !important;
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        animation: pcm-cta-in 0.32s ease-out;
    }
}

@keyframes pcm-cta-in {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(16px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pcm-mobile-cta.pcm-mobile-cta-visible {
        animation: none;
    }
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */

/* Mobile: filters collapse behind the toggle, table rows stack into
   labeled cards instead of scrolling horizontally */
@media (max-width: 699px) {

    #pcm-app {
        margin: 20px 0;
    }

    .pcm-toolbar {
        padding: 12px;
        border-radius: var(--pcm-radius-md);
    }

    #pcm-search {
        height: 48px;
        font-size: 14px;
    }

    .pcm-filter-toggle {
        height: 48px;
        padding: 0 14px;
    }

    .pcm-filter-toggle span:not(.pcm-filter-count) {
        display: none;
    }

    .pcm-filter-panel {
        display: none;
        flex-direction: column;
        margin-top: 0;
    }

    .pcm-filter-panel.pcm-filter-panel-open {
        display: flex;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--pcm-border-soft);
    }

    .pcm-filter-panel select {
        min-width: 0;
        width: 100%;
    }

    .pcm-clear-filters {
        align-self: flex-start;
    }

    /* Stack each row into a real card: hide the header row and turn
       every <td> into its own block with a small inline label (from
       data-label) above the value. Each row gets its own card chrome
       (background, border, radius, shadow, spacing) instead of sitting
       flush against the next row, and instead of letting the table
       overflow and force horizontal scrolling. */
    .pcm-table-wrap {
        background: transparent;
        border: none;
        box-shadow: none;
        overflow: visible;
    }

    .pcm-table thead {
        display: none;
    }

    .pcm-table,
    .pcm-table tbody,
    .pcm-table tr,
    .pcm-table td {
        display: block;
        width: 100% !important;
    }

    .pcm-table tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .pcm-table tr {
        padding: 16px;
        background: var(--pcm-card);
        border: 1px solid var(--pcm-border);
        border-radius: var(--pcm-radius-md);
        box-shadow: var(--pcm-shadow);
    }

    .pcm-table tbody tr:hover {
        background: var(--pcm-card);
    }

    .pcm-table td {
        padding: 6px 0;
        border-bottom: 1px solid var(--pcm-border-soft);
    }

    .pcm-table td:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .pcm-table td:first-child {
        padding-top: 0;
    }

    .pcm-table td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--pcm-ink-faint);
        margin-bottom: 4px;
    }

    .pcm-table td.pcm-col-sr {
        display: none; /* the Sr. No. matters for desktop scanning; on
                           a one-card-per-item mobile layout the card
                           order already conveys position, so showing
                           "Sr. 1" as a redundant label adds clutter */
    }

    .pcm-col-moq {
        padding-top: 10px !important;
    }

    .pcm-moq-input-row {
        max-width: none; /* full-width and easy to tap on mobile */
    }

    .pcm-col-action {
        padding-top: 12px !important;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {

    .pcm-select-product,
    .pcm-spinner {
        transition: none;
        animation: none;
    }
}

/* Visible keyboard focus throughout */
#pcm-app a:focus-visible,
#pcm-app button:focus-visible,
#pcm-app select:focus-visible,
#pcm-app input:focus-visible {
    outline: 2px solid var(--pcm-accent);
    outline-offset: 2px;
}


/* ================================
   PCM UI/UX Enhancement Pack v1
   ================================ */

#pcm-app{
    max-width:1400px;
    margin:40px auto;
}

.pcm-toolbar{
    position:sticky;
    top:162px;
    z-index:20;
    backdrop-filter:blur(12px);
}
/* Mobile */
@media (max-width: 767px){
    .pcm-toolbar{
        top: 90px;
    }
}
.pcm-toolbar,
.pcm-results-wrap,
.pcm-selected-wrapper,
.pcm-table-wrap{
    border-radius:6px !important;
}

.pcm-toolbar:hover,
.pcm-selected-wrapper:hover{
    box-shadow:0 12px 40px rgba(15,23,42,.12);
}

table{
    overflow:hidden;
    border-radius:16px;
}

table thead th{
    position:sticky;
    top:0;
    z-index:5;
}

table thead th,
.pcm-table thead th{
    background: var(--pcm-accent) !important;
    color: var(--pcm-accent-ink) !important;
    font-weight:600;
    letter-spacing:.3px;
}

table tbody tr{
    transition:all .25s ease;
}

table tbody tr:hover{
    background: var(--pcm-accent-soft) !important;
    transform:translateY(-1px);
}

button,
.pcm-btn,
input[type=button],
input[type=submit]{
    transition:all .25s ease !important;
}

button:hover,
.pcm-btn:hover,
input[type=button]:hover,
input[type=submit]:hover{
    transform:translateY(-2px);
}

#pcm-search,
#pcm-category,
#pcm-segment,
#pcm-dosage-form{
    border-radius:14px !important;
}

.pcm-selected-wrapper{
    background:linear-gradient(180deg,#ffffff,#f8fafc);
    border:1px solid #e2e8f0;
    padding:24px;
}

.pcm-selected-wrapper h3,
.pcm-selected-wrapper h4{
    font-family: var(--pcm-font-heading);
    font-weight:700;
}

.pcm-pagination button,
.pcm-pagination a{
    border-radius:12px !important;
}

@media (min-width:1024px){
    .pcm-layout,
    .pcm-content-grid{
        display:grid;
        grid-template-columns: 1.6fr .8fr;
        gap:24px;
    }
}