/**
 * QI Pharmacy Design System V1
 *
 * Medical Navy × Clinical Teal × Clean White
 */


/* =========================================================
   1. TOKENS
   ========================================================= */

:root {

    --qi-brand:
        #0B4F73;

    --qi-dark:
        #0D2F43;

    --qi-footer:
        #0A2940;

    --qi-primary:
        #0F9693;

    --qi-primary-hover:
        #0B7D7B;

    --qi-primary-soft:
        #EAF7F6;

    --qi-surface:
        #F6FAFB;

    --qi-surface-2:
        #F1F7F8;

    --qi-text:
        #173B4A;

    --qi-muted:
        #6D8189;

    --qi-border:
        #D8E6E9;

    --qi-white:
        #FFFFFF;


    /*
     * Flatsome variables.
     */
    --primary-color:
        #0F9693 !important;

    --fs-color-primary:
        #0F9693 !important;

    --fs-color-secondary:
        #0B4F73 !important;

    --fs-experimental-link-color:
        #0B4F73 !important;

    --fs-experimental-link-color-hover:
        #0F9693 !important;
}


/* =========================================================
   2. GLOBAL TYPOGRAPHY
   ========================================================= */

body {

    color:
        var(--qi-text);
}


h1,
h2,
h3,
h4,
h5,
h6,
.heading-font {

    color:
        var(--qi-text);
}


a {

    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease;
}


/* =========================================================
   3. HEADER
   ========================================================= */

/*
 * Top trust bar.
 */

.header-top {

    background:
        var(--qi-primary) !important;
}


.header-top,
.header-top a,
.header-top span {

    color:
        #ffffff !important;
}


/*
 * Main header stays clinical white.
 */

.header-main {

    background:
        #ffffff !important;
}


.header-bg-color {

    background:
        #ffffff !important;
}


/*
 * Navigation strip.
 */

.header-bottom {

    background:
        var(--qi-surface) !important;

    border-top:
        1px solid
        rgba(216,230,233,.55);

    border-bottom:
        1px solid
        rgba(216,230,233,.70);
}


.header-bottom
.nav > li > a {

    color:
        var(--qi-text) !important;
}


.header-bottom
.nav > li > a:hover {

    color:
        var(--qi-primary) !important;
}


/*
 * Header cart / icons.
 */

.header
.icon-shopping-bag,
.header
.icon-menu,
.header
.icon-search {

    color:
        var(--qi-brand);
}


/* =========================================================
   4. COMMON BUTTONS
   ========================================================= */

.button.primary,
button.primary,
input[type="submit"].button,
.button.checkout,
.checkout-button,
.single_add_to_cart_button.button {

    border-color:
        var(--qi-primary) !important;

    background:
        var(--qi-primary) !important;

    color:
        #ffffff !important;
}


.button.primary:hover,
button.primary:hover,
input[type="submit"].button:hover,
.button.checkout:hover,
.checkout-button:hover,
.single_add_to_cart_button.button:hover {

    border-color:
        var(--qi-primary-hover) !important;

    background:
        var(--qi-primary-hover) !important;

    color:
        #ffffff !important;
}


/* =========================================================
   5. HOME V2 — HERO
   ========================================================= */

.qih2-hero {

    background:
        radial-gradient(
            circle at 82% 24%,
            rgba(15,150,147,.085),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #ffffff 62%,
            #f6fbfb 100%
        ) !important;

    border-bottom-color:
        var(--qi-border) !important;
}


.qih2-hero h1 {

    color:
        var(--qi-text) !important;
}


.qih2-brand-line,
.qih2-eyebrow,
.qih2-kicker {

    color:
        var(--qi-primary) !important;
}


.qih2-hero-description {

    color:
        var(--qi-muted) !important;
}


.qih2-btn-primary {

    border-color:
        var(--qi-primary) !important;

    background:
        var(--qi-primary) !important;
}


.qih2-btn-primary:hover {

    border-color:
        var(--qi-primary-hover) !important;

    background:
        var(--qi-primary-hover) !important;
}


.qih2-btn-outline {

    border-color:
        var(--qi-border) !important;

    color:
        var(--qi-text) !important;
}


.qih2-btn-outline:hover {

    border-color:
        var(--qi-primary) !important;

    color:
        var(--qi-primary) !important;
}


/* =========================================================
   6. HOME V2 — TRUST PILLS
   ========================================================= */

.qih2-trust-mini
span {

    border-color:
        var(--qi-border) !important;

    background:
        rgba(255,255,255,.88) !important;

    color:
        var(--qi-muted) !important;
}


/* =========================================================
   7. HOME V2 — PRODUCT
   ========================================================= */

.qih2-featured-card {

    border-color:
        var(--qi-border) !important;
}


.qih2-featured-badge {

    background:
        var(--qi-dark) !important;
}


.qih2-featured-image {

    background:
        var(--qi-surface) !important;
}


.qih2-product-kicker,
.qih2-product-action {

    color:
        var(--qi-primary) !important;
}


.qih2-featured-title,
.qih2-featured-price {

    color:
        var(--qi-text) !important;
}


/* =========================================================
   8. HOME V2 — NEED SELECTOR
   ========================================================= */

.qih2-need-card {

    border-color:
        var(--qi-border) !important;

    color:
        var(--qi-text) !important;
}


.qih2-need-card:hover {

    border-color:
        rgba(15,150,147,.55) !important;

    box-shadow:
        0 14px 32px
        rgba(13,47,67,.065) !important;
}


.qih2-need-number {

    background:
        var(--qi-primary-soft) !important;

    color:
        var(--qi-primary) !important;
}


.qih2-need-card
p {

    color:
        var(--qi-muted) !important;
}


.qih2-need-card
em {

    color:
        var(--qi-primary) !important;
}


/* =========================================================
   9. HOME V2 — COMPARISON
   ========================================================= */

.qih2-compare {

    background:
        var(--qi-surface) !important;
}


.qih2-compare-wrap {

    border-color:
        var(--qi-border) !important;
}


.qih2-compare-head {

    background:
        var(--qi-dark) !important;
}


.qih2-compare-row {

    border-bottom-color:
        var(--qi-border) !important;
}


.qih2-compare-row
span {

    color:
        var(--qi-muted) !important;
}


.qih2-compare-row
b {

    color:
        var(--qi-text) !important;
}


.qih2-compare-foot
a {

    color:
        var(--qi-primary) !important;
}


/* =========================================================
   10. HOME V2 — TRUST
   ========================================================= */

.qih2-trust-card {

    border-color:
        var(--qi-border) !important;
}


.qih2-trust-icon {

    background:
        var(--qi-primary-soft) !important;

    color:
        var(--qi-primary) !important;
}


.qih2-trust-card
strong {

    color:
        var(--qi-text) !important;
}


.qih2-trust-card
p {

    color:
        var(--qi-muted) !important;
}


.qih2-trust-card
a {

    color:
        var(--qi-primary) !important;
}


.qih2-credential-note {

    border-color:
        var(--qi-border) !important;

    background:
        var(--qi-surface) !important;
}


/* =========================================================
   11. KNOWLEDGE
   ========================================================= */

.qih2-knowledge {

    background:
        var(--qi-surface) !important;
}


.qih2-knowledge-grid
a {

    border-color:
        var(--qi-border) !important;

    background:
        #ffffff !important;
}


.qih2-knowledge-grid
a:hover {

    border-color:
        rgba(15,150,147,.48) !important;

    box-shadow:
        0 12px 28px
        rgba(13,47,67,.055);
}


.qih2-knowledge-grid
span,
.qih2-knowledge-grid
em {

    color:
        var(--qi-primary) !important;
}


.qih2-knowledge-grid
strong {

    color:
        var(--qi-text) !important;
}


/* =========================================================
   12. FAQ
   ========================================================= */

.qih2-faq-list {

    border-top-color:
        var(--qi-border) !important;
}


.qih2-faq-list
details {

    border-bottom-color:
        var(--qi-border) !important;
}


.qih2-faq-list
summary {

    color:
        var(--qi-text) !important;
}


.qih2-faq-list
summary::after {

    color:
        var(--qi-primary) !important;
}


/* =========================================================
   13. FINAL CTA
   ========================================================= */

.qih2-final-cta {

    background:
        var(--qi-dark) !important;
}


.qih2-final-cta
.qih2-kicker {

    color:
        #64D1CD !important;
}


.qih2-final-primary {

    border-color:
        var(--qi-primary) !important;

    background:
        var(--qi-primary) !important;
}


.qih2-final-primary:hover {

    border-color:
        var(--qi-primary-hover) !important;

    background:
        var(--qi-primary-hover) !important;
}


/* =========================================================
   14. FOOTER V3
   ========================================================= */

#qi-footer-v3 {

    --qi-footer-bg:
        #0D2F43 !important;

    --qi-footer-bg-deep:
        #0A2940 !important;

    --qi-footer-card:
        rgba(255,255,255,.035);

    --qi-footer-border:
        rgba(216,230,233,.16);

    --qi-footer-text:
        #BDD0DA;

    --qi-footer-muted:
        #8199A5;

    --qi-footer-white:
        #FFFFFF;

    --qi-footer-teal:
        #24B2AE;
}


#qi-footer-v3
.qif3-main {

    background:
        var(--qi-dark) !important;
}


#qi-footer-v3
.qif3-bottom {

    background:
        var(--qi-footer) !important;
}


#qi-footer-v3
.qif3-column
h3::after,

#qi-footer-v3
.qif3-service
h3::after {

    background:
        var(--qi-primary) !important;
}


#qi-footer-v3
.qif3-service-card:hover {

    border-color:
        rgba(15,150,147,.48) !important;

    background:
        rgba(15,150,147,.09) !important;
}


/* =========================================================
   15. MOBILE
   ========================================================= */

@media (max-width: 549px) {

    /*
     * Reduce large background effect on small screens.
     */

    .qih2-hero {

        background:
            linear-gradient(
                180deg,
                #ffffff 0%,
                #f7fbfb 100%
            ) !important;
    }


    /*
     * Keep tap targets visibly actionable.
     */

    .qih2-btn-primary,
    .qih2-final-primary {

        box-shadow:
            0 5px 14px
            rgba(15,150,147,.12);
    }

}

/* === QI ICON SYSTEM V1 START === */


/* =========================================================
   STANDARD INLINE SVG
   ========================================================= */

.qi-ui-icon {

    display:
        inline-block;

    flex:
        0 0 auto;

    width:
        14px;

    height:
        14px;

    margin-left:
        5px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    vertical-align:
        -2px;

    pointer-events:
        none;
}


/*
 * Buttons/cards which already provide their own spacing.
 */

.qih2-btn
.qi-ui-icon,

.qih2-product-action
.qi-ui-icon {

    margin-left:
        0;
}


/*
 * Small text links.
 */

.qih2-need-card
em,

.qih2-compare-foot
a,

.qih2-view-all,

.qih2-trust-card
a,

.qih2-credential-note
a,

.qih2-knowledge-grid
em,

.qih2-faq-intro
a,

.qih2-final-actions
a {

    align-items:
        center;
}


.qih2-need-card
em
.qi-ui-icon,

.qih2-compare-foot
a
.qi-ui-icon,

.qih2-view-all
.qi-ui-icon,

.qih2-trust-card
a
.qi-ui-icon,

.qih2-credential-note
a
.qi-ui-icon,

.qih2-knowledge-grid
em
.qi-ui-icon,

.qih2-faq-intro
a
.qi-ui-icon,

.qih2-final-actions
a
.qi-ui-icon {

    width:
        13px;

    height:
        13px;
}


/* =========================================================
   FAQ PLUS / MINUS
   No text "+" or "−".
   Draw the icon with CSS lines.
   ========================================================= */

.qih2-faq-list
summary {

    position:
        relative;
}


/*
 * Horizontal bar.
 */

.qih2-faq-list
summary::after {

    content:
        "" !important;

    position:
        absolute !important;

    top:
        50% !important;

    right:
        4px !important;

    width:
        13px !important;

    height:
        1.5px !important;

    background:
        var(--qi-primary) !important;

    border-radius:
        999px;

    transform:
        translateY(-50%) !important;
}


/*
 * Vertical bar.
 */

.qih2-faq-list
summary::before {

    content:
        "";

    position:
        absolute;

    top:
        50%;

    right:
        9.75px;

    width:
        1.5px;

    height:
        13px;

    background:
        var(--qi-primary);

    border-radius:
        999px;

    transform:
        translateY(-50%);

    transition:
        opacity .18s ease,
        transform .18s ease;
}


/*
 * Open = minus icon.
 */

.qih2-faq-list
details[open]
summary::after {

    content:
        "" !important;
}


.qih2-faq-list
details[open]
summary::before {

    opacity:
        0;

    transform:
        translateY(-50%)
        rotate(90deg);
}


/* =========================================================
   GLOBAL CUSTOM UI POLICY
   ========================================================= */

/*
 * Future QI components:
 *
 * No Unicode arrow/check/close symbols used as icons.
 * All icons must be SVG, CSS geometry, or theme icon assets.
 */


/* === QI ICON SYSTEM V1 END === */

/* === QI CTA FOOTER DEPTH START === */

/*
 * Keep CTA and Footer connected,
 * but give them different visual depth.
 */

.qih2-final-cta {

    background:
        #123F52 !important;

    border-bottom:
        1px solid
        rgba(5,25,36,.32) !important;
}


#qi-footer-v3,
#qi-footer-v3 .qif3-main {

    background:
        #0D2F43 !important;
}


#qi-footer-v3 .qif3-bottom {

    background:
        #0A2940 !important;
}


/*
 * No white gap between sections.
 */

body.home .qih2-final-cta {

    margin-bottom:
        0 !important;
}


body.home #qi-footer-v3 {

    margin-top:
        0 !important;

    border-top:
        0 !important;
}

/* === QI CTA FOOTER DEPTH END === */

/* === QI GLOBAL PRICE CURRENCY V1 START === */

/*
 * Normalize WooCommerce currency symbol site-wide.
 * Keep NT$ on the same baseline and visual scale as the amount.
 */
.woocommerce-Price-amount
.woocommerce-Price-currencySymbol {
    display: inline !important;

    position: static !important;

    top: auto !important;
    bottom: auto !important;

    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;

    vertical-align: baseline !important;

    transform: none !important;
}

/* === QI GLOBAL PRICE CURRENCY V1 END === */

/* === QI PRODUCT PRICE SIZE V1 START === */

body.single-product .product-summary .price,
body.single-product .product-summary .woocommerce-variation-price .price {
    font-size: 20px !important;
    line-height: 1.25 !important;
}

/* === QI PRODUCT PRICE SIZE V1 END === */