/* Shiraza chat — the original Shiraza agent UI (app_notification_tool,
 * static/agent/agent.css), reduced to the parts the embed/chat uses and served
 * locally. Class names are kept identical (ap-*) so the page renders exactly
 * like the design that already ran at /agent/embed. Bootstrap 5 supplies
 * form-control / btn styling, same as the original page. */

:root {
    --ap-bg: #f4f6fb;
    --ap-surface: #ffffff;
    --ap-border: #e4e8f2;
    --ap-text: #1b2338;
    --ap-muted: #6b7590;
    --ap-primary: #4b5ee4;
    --ap-primary-soft: #eef0fe;
    --ap-success: #16a34a;
    --ap-warning: #d97706;
    --ap-danger: #dc2626;
    --ap-radius: 14px;
    --ap-shadow: 0 1px 2px rgba(19, 26, 43, .06), 0 8px 24px rgba(19, 26, 43, .06);
}

body {
    margin: 0;
    background: var(--ap-bg);
    color: var(--ap-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Cards ---------- */
.ap-card {
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow);
    overflow: hidden;
}

/* ---------- Chat ---------- */
.ap-chat-card {
    display: flex;
    flex-direction: column;
    min-height: 440px;
}

.ap-chat-thread {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ap-message { display: flex; gap: 11.2px; max-width: 82%; }
.ap-message-user { margin-left: auto; flex-direction: row-reverse; }

.ap-avatar {
    width: 30px; height: 30px;
    flex-shrink: 0;
    border-radius: 9px;
    display: grid; place-items: center;
    font-size: 13.12px;
}

.ap-avatar-agent { background: var(--ap-primary-soft); color: var(--ap-primary); }
.ap-avatar-user { background: #e8ebf3; color: var(--ap-muted); }

.ap-bubble {
    padding: 10.4px 14.4px;
    border-radius: 13px;
    background: var(--ap-bg);
    font-size: 14.24px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.ap-message-user .ap-bubble { background: var(--ap-primary); color: #fff; white-space: pre-wrap; }
.ap-message-error .ap-bubble { background: #fee2e2; color: #991b1b; }
.ap-bubble-meta { display: block; margin-top: 5.6px; font-size: 11.2px; opacity: .65; }

/* Assistant bubbles carry real paragraphs and option lists. */
.ap-bubble p { margin: 0; }
.ap-bubble p + p, .ap-bubble p + .ap-bubble-list, .ap-bubble .ap-bubble-list + p { margin-top: 8px; }
.ap-bubble-list { margin: 0; padding-left: 20px; }
.ap-bubble-list li { margin-top: 3.2px; }
.ap-bubble-list li:first-child { margin-top: 0; }

/* Message column: bubble plus any product cards the turn produced. */
.ap-message-column { display: flex; flex-direction: column; gap: 9.6px; min-width: 0; }
.ap-message-user .ap-message-column { align-items: flex-end; }

/* ---------- Product card ---------- */
.ap-product-card {
    display: flex;
    gap: 16px;
    padding: 14.4px;
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow);
    max-width: 460px;
}

.ap-product-media {
    flex: 0 0 96px;
    width: 96px; height: 96px;
    border-radius: 11px;
    background: var(--ap-bg);
    display: grid; place-items: center;
    overflow: hidden;
}
.ap-product-media img { width: 100%; height: 100%; object-fit: contain; }

.ap-product-body { display: flex; flex-direction: column; gap: 7.2px; min-width: 0; flex: 1; }

.ap-product-store {
    font-size: 10.88px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ap-muted);
}

.ap-product-title {
    margin: 0;
    font-size: 14.08px;
    font-weight: 600;
    line-height: 1.4;
    /* Amazon titles run very long; two lines is enough to identify the item. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ap-product-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6.4px; }
.ap-product-price { font-size: 18.4px; font-weight: 700; color: var(--ap-text); }

.ap-chip-soft {
    padding: 2.4px 8px;
    border-radius: 999px;
    background: var(--ap-bg);
    color: var(--ap-muted);
    font-size: 11.52px;
    font-weight: 500;
}

.ap-cost-table {
    margin-top: 4.8px;
    border-top: 1px solid var(--ap-border);
    padding-top: 8px;
    display: flex; flex-direction: column; gap: 4px;
}
.ap-cost-row { display: flex; justify-content: space-between; gap: 16px; font-size: 12.8px; color: var(--ap-muted); }
.ap-cost-value { font-variant-numeric: tabular-nums; color: var(--ap-text); }
.ap-cost-total {
    margin-top: 4.8px; padding-top: 7.2px;
    border-top: 1px solid var(--ap-border);
    font-weight: 600; color: var(--ap-text);
}

.ap-product-lkr {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-top: 1.6px; padding: 8.8px 11.2px;
    border-radius: 11px;
    background: var(--ap-primary-soft);
    color: var(--ap-primary);
}
.ap-product-lkr span { font-size: 11.52px; font-weight: 500; }
.ap-product-lkr strong { font-size: 16px; font-variant-numeric: tabular-nums; }

.ap-product-note { margin: 0; font-size: 11.84px; color: var(--ap-muted); }

/* ---------- Buttons on cards ---------- */
.ap-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5.6px; }

.ap-btn {
    display: inline-flex; align-items: center; gap: 6.4px;
    padding: 7.2px 13.6px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 12.8px; font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.ap-btn-primary { background: var(--ap-primary); color: #fff; }
.ap-btn-primary:hover { background: #3f50c9; color: #fff; }
.ap-btn-ghost { background: transparent; border-color: var(--ap-border); color: var(--ap-text); }
.ap-btn-ghost:hover { border-color: var(--ap-primary); color: var(--ap-primary); }
.ap-btn:disabled { opacity: .6; cursor: default; }

.ap-card-notice { border-left: 3px solid var(--ap-warning); }

/* Option buttons under Shiraza's latest question. */
.ap-quick-replies { display: flex; flex-wrap: wrap; gap: 7.2px; margin-top: 8px; }
.ap-quick-reply {
    border: 1px solid var(--ap-primary); background: var(--ap-surface);
    color: var(--ap-primary); border-radius: 999px; padding: 6.4px 13.6px;
    font-size: 13.12px; font-weight: 600; cursor: pointer;
}
.ap-quick-reply:hover { background: var(--ap-primary); color: #fff; }

/* ---------- Typing ---------- */
.ap-typing { display: flex; align-items: center; gap: 11.2px; padding: 0 20px 16px; }
.ap-typing-label { font-size: 12.16px; color: var(--ap-muted); }

.ap-typing-dots { display: inline-flex; gap: 4.48px; padding: 9.6px 13.6px; background: var(--ap-bg); border-radius: 13px; }
.ap-typing-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--ap-muted);
    animation: ap-bounce 1.3s infinite ease-in-out;
}
.ap-typing-dots span:nth-child(2) { animation-delay: .18s; }
.ap-typing-dots span:nth-child(3) { animation-delay: .36s; }

@keyframes ap-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .45; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* ---------- Composer ---------- */
.ap-composer {
    display: flex;
    gap: 9.6px;
    padding: 14.4px 20px 17.6px;
    border-top: 1px solid var(--ap-border);
    align-items: flex-end;
}

.ap-composer textarea { resize: none; max-height: 160px; border-radius: 11px; }
.ap-composer textarea:focus {
    border-color: var(--ap-primary);
    box-shadow: 0 0 0 3.2px rgba(75, 94, 228, .16);
}
.ap-composer .btn { border-radius: 11px; padding: 8px 15.2px; }
.ap-composer .btn-primary { background: var(--ap-primary); border-color: var(--ap-primary); }
.ap-composer .btn-primary:hover { background: #3f50c9; border-color: #3f50c9; }

/* ---------- Page shell ----------
 * The chat sits as a card between the GlobalShop header/navigation above and
 * the site footer below, like the price checker page. */
body.ap-embed {
    margin: 0; background: var(--ap-bg);
}

/* Bootstrap 3 (the site's version) has no d-none; the chat relies on it. */
.d-none { display: none !important; }

.ap-embed-shell {
    display: flex;
    max-width: 860px;
    margin: 18px auto 30px;
    padding: 0 10px;
}
.ap-embed-shell .ap-chat-card {
    flex: 1; display: flex; flex-direction: column;
    /* Tall enough to chat comfortably, short enough that the page (and the
       footer) still scrolls naturally under it. */
    height: calc(100vh - 240px);
    min-height: 480px;
    max-height: 820px;
}
.ap-embed-shell .ap-chat-thread { flex: 1; }

/* The shared GS styles reach broadly; pin down what the chat depends on. */
.ap-embed-shell h3 { margin: 0; }
.ap-embed-shell article { border: none; }
.ap-embed-shell .ap-product-card { border: 1px solid var(--ap-border); }

.ap-embed-header {
    display: flex; align-items: center; gap: 10.4px;
    padding: 12.8px 16px; border-bottom: 1px solid var(--ap-border);
    background: var(--ap-surface);
}
.ap-embed-avatar { width: 38px; height: 38px; font-size: 16.8px; }
.ap-embed-title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ap-embed-title strong { font-size: 15.2px; }
/* The page's h1 for search engines, dressed as the ordinary header title. */
.ap-embed-h1 { font-size: 15.2px; font-weight: 700; margin: 0; padding: 0; line-height: 1.25; }
.ap-embed-title span { font-size: 11.52px; color: var(--ap-muted); }
.ap-embed-online {
    margin-left: auto; font-size: 11.52px; font-weight: 600; color: #146c43;
    display: flex; align-items: center; gap: 4.8px;
}
.ap-embed-online .bi { font-size: 8px; }

/* ---------- Order form (opened by Buy now) ---------- */
.ap-modal-overlay {
    position: fixed; inset: 0; z-index: 1080;
    background: rgba(19, 26, 43, .45);
    display: grid; place-items: center;
    padding: 16px;
    overflow-y: auto;
}

.ap-modal {
    width: min(480px, 100%);
    background: var(--ap-surface);
    border-radius: var(--ap-radius);
    box-shadow: 0 20px 60px rgba(19, 26, 43, .25);
    max-height: 92vh; display: flex; flex-direction: column;
}

.ap-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18.4px; border-bottom: 1px solid var(--ap-border);
}
.ap-modal-title { margin: 0; font-size: 16px; font-weight: 600; }
.ap-modal-close { border: 0; background: transparent; color: var(--ap-muted); font-size: 14.4px; cursor: pointer; }
.ap-modal-close:hover { color: var(--ap-text); }

.ap-modal-body { padding: 18.4px; overflow-y: auto; display: flex; flex-direction: column; gap: 12.8px; }

.ap-order-summary {
    display: flex; gap: 12px; align-items: center;
    padding: 10.4px; border-radius: 11px; background: var(--ap-bg);
}
.ap-order-summary img { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: #fff; }
.ap-order-summary-text { display: flex; flex-direction: column; gap: 2.4px; min-width: 0; }
.ap-order-summary-text strong {
    font-size: 12.8px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ap-order-summary-text span { font-size: 12.48px; font-weight: 600; color: var(--ap-primary); }

.ap-field { display: flex; flex-direction: column; gap: 4px; }
.ap-field .form-label { margin: 0; font-size: 12.48px; font-weight: 600; }
.ap-field .form-control:focus {
    border-color: var(--ap-primary);
    box-shadow: 0 0 0 3.2px rgba(75, 94, 228, .16);
}

.ap-delivery-choice { display: flex; flex-direction: column; gap: 4px; }
.ap-delivery-choice label {
    display: flex; align-items: center; gap: 7.2px;
    font-size: 13.44px; cursor: pointer; margin: 0;
}

.ap-modal-note { margin: 0; font-size: 11.84px; color: var(--ap-muted); }

.ap-modal-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding-top: 4.8px; border-top: 1px solid var(--ap-border); margin-top: 3.2px;
}
.ap-modal-footer .ap-btn { padding: 8px 16px; }

/* Inline validation. The message sits directly under the control it is about,
   so nobody has to match an error in the corner to a field in the form. */
.ap-field-error {
    margin: 2.4px 0 0; font-size: 11.84px; font-weight: 500; color: #dc3545;
    display: flex; align-items: flex-start; gap: 4.8px;
}
.ap-field-error::before { content: "!"; font-weight: 700; }
.ap-field .form-control.is-invalid, .ap-field .form-select.is-invalid {
    border-color: #dc3545; background-image: none;
}
.ap-field .form-control.is-invalid:focus {
    box-shadow: 0 0 0 2.88px rgba(220, 53, 69, .18);
}

/* Delivery city picker — Kapruka delivers to a fixed list, so the field is a
   searchable listbox rather than a text box that can hold anything. */
.ap-combo { position: relative; }
.ap-combo-list {
    position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
    margin: 0; padding: 4px; list-style: none; max-height: 216px; overflow-y: auto;
    background: #fff; border: 1px solid var(--ap-border); border-radius: 10px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, .14);
}
.ap-combo-option {
    display: flex; flex-direction: column; gap: 0.8px;
    padding: 6.4px 8.8px; border-radius: 7px; cursor: pointer; font-size: 13.44px;
}
.ap-combo-option small {
    font-size: 11.2px; color: var(--ap-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ap-combo-option.is-active { background: var(--ap-primary); color: #fff; }
.ap-combo-option.is-active small { color: rgba(255, 255, 255, .8); }
.ap-combo-empty { padding: 8px 8.8px; font-size: 12.8px; color: var(--ap-muted); }

.ap-delivery-rate {
    display: flex; align-items: center; gap: 6.4px; flex-wrap: wrap;
    margin-top: 4.8px; padding: 5.6px 9.6px; border-radius: 8px;
    background: rgba(79, 70, 229, .07); font-size: 12.48px; color: var(--ap-text);
}
.ap-delivery-rate strong { margin-left: auto; font-size: 13.44px; color: var(--ap-primary); }

@media (max-width: 575.98px) {
    .ap-modal-footer { flex-direction: column-reverse; }
    .ap-modal-footer .ap-btn { justify-content: center; }
}

/* Signed-in chip: quiet confirmation of whose details the order will use. */
.ap-embed-user {
    margin-left: 9.6px;
    display: inline-flex; align-items: center; gap: 5.6px;
    padding: 5.6px 11.2px; border-radius: 999px;
    background: var(--ap-primary-soft); color: var(--ap-primary);
    font-size: 12.16px; font-weight: 600; white-space: nowrap;
    max-width: 140px; overflow: hidden; text-overflow: ellipsis;
}

.ap-embed-signin { text-decoration: none; }
.ap-embed-signin:hover { color: var(--ap-primary); border-color: var(--ap-primary); }

.ap-embed-new {
    margin-left: 9.6px; border: 1px solid var(--ap-border); background: transparent;
    border-radius: 9px; padding: 5.6px 11.2px; font-size: 12.16px; font-weight: 600;
    color: var(--ap-muted); cursor: pointer; white-space: nowrap;
}
.ap-embed-new:hover { color: var(--ap-text); border-color: var(--ap-muted); }

.ap-embed-note {
    margin: 0; padding: 5.6px 20px 11.2px; text-align: center;
    font-size: 11.2px; color: var(--ap-muted);
}

/* Mobile: most Kapruka traffic is phones. */
@media (max-width: 575.98px) {
    .ap-embed-shell { margin: 8px auto 18px; padding: 0 6px; }
    /* Chrome above the card on a phone: site header + nav + banner + margin
       ≈ 220px. Sized so the composer lands inside the first viewport. */
    .ap-embed-shell .ap-chat-card { height: calc(100vh - 300px); min-height: 400px; }
    body.ap-embed .ap-embed-header { padding: 9.6px 12px; }
    body.ap-embed .ap-embed-title span { display: none; } /* keep the name, drop the tagline */
    body.ap-embed .ap-embed-user { max-width: 96px; }
    body.ap-embed .ap-chat-thread { padding: 12px; }
    body.ap-embed .ap-bubble { max-width: 100%; font-size: 14.72px; }
    body.ap-embed .ap-product-card { width: 100%; }
    body.ap-embed .ap-composer { padding-bottom: calc(9.6px + env(safe-area-inset-bottom)); }
    body.ap-embed .ap-composer textarea { font-size: 16px; } /* stops iOS zoom-on-focus */
    body.ap-embed .ap-composer .btn { min-width: 46px; min-height: 46px; }
    body.ap-embed .ap-quick-reply { padding: 8.8px 16px; } /* comfortable touch target */
    body.ap-embed .ap-embed-note { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
    .ap-message { max-width: 94%; }
    .ap-product-card { flex-direction: column; }
    .ap-product-media { width: 100%; height: 150px; flex-basis: auto; }
}

/* ---------- Site-stylesheet hardening ----------
 * The shared header/footer bring the site-wide stylesheets with them, and
 * those set html{font-size:10px}, body{font-size:8px; font-family:Roboto}
 * plus element-level rules (p, textarea, buttons). Everything above is in px
 * so the rem rebase cannot shrink the chat; the rules below pin down the
 * pieces that element selectors or !important site rules still reach. */
.ap-embed-shell, .ap-modal-overlay {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 15px;
    line-height: 1.5;
}
.ap-bubble p, .ap-bubble li { font-size: inherit !important; line-height: inherit !important; }
.ap-bubble p { margin: 0 !important; padding: 0 !important; }
.ap-bubble p + p, .ap-bubble p + .ap-bubble-list, .ap-bubble .ap-bubble-list + p { margin-top: 8px !important; }
.ap-composer textarea { font-size: 15px !important; height: auto; }
.ap-composer .btn { font-size: 15px !important; }
p.ap-embed-note { margin: 0 !important; padding: 6px 20px 11px !important; }
p.ap-product-note, p.ap-modal-note, p.ap-field-error { padding: 0 !important; }
.ap-embed-shell h1, .ap-embed-shell h3 { font-family: inherit !important; }
.ap-embed-shell img { max-width: 100%; }

/* ---------- Mobile header fixes ----------
 * Let the title own the spare width, and drop the redundant Online pill on
 * small screens so Sign in / New chat keep their room. */
.ap-embed-title { flex: 1; }

/* ---------- Page banner ----------
 * Light and clean, on the page background — the purple stops at the shared
 * navigation instead of stacking three purple bars. Dark title with the GS
 * purple as an accent, and three small trust chips instead of a subtitle.
 * This is also the page's h1; sizes are pinned !important because the site
 * styles force h1 sizes of their own. */
.ap-gs-banner {
    background: var(--ap-bg);
    text-align: center;
    padding: 22px 16px 2px;
}

/* Bootstrap gives every navbar a 20px bottom margin; keep the spacing under
 * this page's control instead. */
body.ap-embed .navbar-inverse { margin-bottom: 0 !important; }

.ap-gs-banner h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    color: var(--ap-text) !important;
    letter-spacing: -.01em;
}
.ap-gs-banner-accent { color: #402970; }

.ap-gs-banner-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}
.ap-gs-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ap-surface);
    border: 1px solid var(--ap-border);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ap-muted);
    white-space: nowrap;
}
.ap-gs-chip .bi { color: #402970; }

/* The shared topbar's yellow price-checker button points at the page the
 * customer is already on; on this page it is pure noise. */
.gs_price_check { display: none !important; }

@media (max-width: 575.98px) {
    .ap-embed-online { display: none !important; }
    /* 16px stops iOS zoom-on-focus; must outrank the 15px hardening pin. */
    body.ap-embed .ap-composer textarea { font-size: 16px !important; }
    p.ap-embed-note { padding: 4px 12px 9px !important; }
    .ap-gs-banner { padding: 14px 10px 0; }
    /* 17px keeps "Kapruka GlobalShop Price Checker" on one line at 375px. */
    .ap-gs-banner h1 { font-size: 17px !important; white-space: nowrap; }
    .ap-gs-banner-chips { gap: 6px; margin-top: 8px; }
    .ap-gs-chip { font-size: 11px; padding: 3px 10px; }
    /* Without icons the three chips fit one centred row at 375px. */
    .ap-gs-chip .bi { display: none; }
}


/* ---------- Cart (Phase 1) ----------
 * The chip in the header, the Add to cart state on cards, and the cart
 * panel's rows. All amounts shown come from the server per open. */
.ap-cart-count {
    display: inline-block;
    min-width: 17px;
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: 999px;
    background: #402970;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}
.ap-btn-in-cart {
    color: #1e7a45 !important;
    border-color: #bfe3cd !important;
    background: #e8f6ee !important;
    opacity: 1 !important;
}
.ap-cart-loading, .ap-cart-empty {
    padding: 18px 6px;
    color: var(--ap-muted);
    font-size: 14px;
    text-align: center;
}
.ap-cart-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--ap-border);
}
.ap-cart-row img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 7px;
    background: #fff;
    border: 1px solid var(--ap-border);
    flex: none;
}
.ap-cart-row-info { flex: 1; min-width: 0; }
.ap-cart-row-info strong {
    display: block;
    font-size: 13px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ap-cart-row-meta {
    display: block;
    font-size: 12px;
    color: var(--ap-muted);
    margin-top: 2px;
}
.ap-cart-remove {
    flex: none;
    border: 1px solid var(--ap-border);
    background: #fff;
    color: #b03a2e;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    cursor: pointer;
}
.ap-cart-remove:hover { background: #fdecea; }
.ap-cart-expired { opacity: 0.75; }
.ap-cart-expired .ap-cart-row-meta { color: #b03a2e; font-weight: 600; }
.ap-cart-totals {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 2px 2px;
    font-size: 14px;
}
.ap-cart-totals strong { font-size: 15px; }
@media (max-width: 420px) {
.ap-embed-header{
    flex-direction: row;
    flex-wrap: wrap;
}
}