@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* =====================================================
   WHATSAPP CAPTION GENERATOR PRO — v3.1
   All rules use specificity + !important where needed
   to override WordPress theme styles
===================================================== */

#wccg-app,
#wccg-app * {
    box-sizing: border-box !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.wccg-wrap {
    --g: #25D366;
    --g2: #16a34a;
    --g3: #dcfce7;
    --g4: #f0fdf4;
    --g5: #bbf7d0;
    --s1: #f8fafc;
    --s2: #f1f5f9;
    --s3: #e2e8f0;
    --s4: #94a3b8;
    --s5: #64748b;
    --s6: #475569;
    --s7: #334155;
    --s8: #1e293b;
    --white: #ffffff;
    --r: 12px;
    --r2: 18px;
    --r3: 24px;
    --sh: 0 4px 16px rgba(0,0,0,.07);
    --shg: 0 8px 28px rgba(37,211,102,.18);
    max-width: 1360px !important;
    margin: 0 auto !important;
    padding: 56px 20px 80px !important;
    color: var(--s7) !important;
    background: linear-gradient(150deg,#f5fef8 0%,#f0f9ff 60%,#f8fafc 100%) !important;
    position: relative !important;
    overflow-x: hidden !important;
}

.wccg-wrap > * { position: relative; z-index: 1; }

.wccg-wrap::before {
    content: "";
    position: absolute;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37,211,102,.10) 0%, transparent 70%);
    top: -160px; left: -200px;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
}
.wccg-wrap::after {
    content: "";
    position: absolute;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56,189,248,.09) 0%, transparent 70%);
    bottom: -80px; right: -160px;
    filter: blur(70px);
    pointer-events: none;
    z-index: 0;
}

/* ── HERO ── */
.wccg-hero { text-align: center !important; margin-bottom: 48px !important; padding: 0 16px !important; }
.wccg-badge { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 9px 22px !important; background: var(--g4) !important; border: 1.5px solid var(--g5) !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .08em !important; color: var(--g2) !important; text-transform: uppercase !important; margin-bottom: 24px !important; }
.wccg-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: var(--g) !important; display: inline-block !important; animation: wccg-pulse 2s infinite !important; }
@keyframes wccg-pulse { 0%,100%{ box-shadow:0 0 0 3px rgba(37,211,102,.25); } 50%{ box-shadow:0 0 0 7px rgba(37,211,102,.10); } }
.wccg-h1 { font-size: clamp(30px,5vw,60px) !important; font-weight: 900 !important; letter-spacing: -2px !important; line-height: 1.1 !important; color: var(--s8) !important; margin: 0 auto 20px !important; max-width: 960px !important; }
.wccg-green-text { background: linear-gradient(130deg,#25D366 0%,#16a34a 50%,#38bdf8 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
.wccg-hero-sub { max-width: 780px !important; margin: 0 auto 30px !important; color: var(--s5) !important; font-size: clamp(15px,1.8vw,18px) !important; line-height: 1.8 !important; }
.wccg-hero-sub strong { color: var(--s7) !important; }
.wccg-pills-wrap { display: flex !important; justify-content: center !important; flex-wrap: wrap !important; gap: 8px !important; }
.wccg-pills-wrap span { padding: 7px 16px !important; background: var(--white) !important; border: 1.5px solid var(--g3) !important; border-radius: 999px !important; font-size: 12.5px !important; font-weight: 600 !important; color: var(--s6) !important; }

/* ── STATS — compact ── */
.wccg-stats { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 14px !important; margin-bottom: 44px !important; }
.wccg-stat { background: var(--white) !important; border-radius: var(--r2) !important; padding: 16px 12px !important; border: 1.5px solid var(--g3) !important; text-align: center !important; box-shadow: var(--sh) !important; transition: transform .3s !important; }
.wccg-stat:hover { transform: translateY(-3px) !important; box-shadow: var(--shg) !important; }
.wccg-stat-icon { font-size: 18px !important; margin-bottom: 6px !important; display: block !important; }
.wccg-stat-num { font-size: 24px !important; font-weight: 900 !important; letter-spacing: -1px !important; color: var(--g2) !important; line-height: 1 !important; margin-bottom: 4px !important; display: block !important; }
.wccg-stat-label { font-size: 11.5px !important; color: var(--s5) !important; font-weight: 600 !important; display: block !important; }

/* ── MAIN CARD ── */
.wccg-card { background: rgba(255,255,255,.98) !important; border-radius: var(--r3) !important; padding: 40px !important; border: 1.5px solid rgba(255,255,255,.9) !important; margin-bottom: 52px !important; box-shadow: 0 24px 60px rgba(15,23,42,.08) !important; }
.wccg-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 40px !important; align-items: start !important; }

/* ── STEP LABELS ── */
.wccg-step-label { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 11.5px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .07em !important; color: var(--s5) !important; margin-bottom: 20px !important; }
.wccg-step { background: linear-gradient(135deg,#25D366,#16a34a) !important; color: #fff !important; font-size: 11px !important; padding: 4px 10px !important; border-radius: 999px !important; font-weight: 800 !important; text-transform: none !important; letter-spacing: 0 !important; }
.wccg-divider { height: 1px !important; background: linear-gradient(90deg,transparent,var(--s3),transparent) !important; margin: 22px 0 !important; border: none !important; }

/* ── FORM FIELDS ── */
.wccg-field { margin-bottom: 14px !important; }
.wccg-field label { display: block !important; margin-bottom: 6px !important; font-size: 12.5px !important; font-weight: 700 !important; color: var(--s7) !important; }
.wccg-req { color: var(--g) !important; font-weight: 900 !important; }

/* ── INPUTS — full width, proper height ── */
#wccg-app input[type="text"],
#wccg-app textarea {
    display: block !important;
    width: 100% !important;
    padding: 11px 14px !important;
    border-radius: var(--r) !important;
    border: 1.5px solid var(--s3) !important;
    background: var(--s1) !important;
    font-size: 13.5px !important;
    color: var(--s7) !important;
    outline: none !important;
    transition: border-color .2s, box-shadow .2s !important;
    box-shadow: none !important;
    line-height: 1.5 !important;
    resize: vertical !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* ── SELECTS — fix text cut off ── */
#wccg-app select {
    display: block !important;
    width: 100% !important;
    padding: 11px 36px 11px 12px !important;
    border-radius: var(--r) !important;
    border: 1.5px solid var(--s3) !important;
    background-color: var(--s1) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 11px center !important;
    background-size: 10px 6px !important;
    font-size: 13.5px !important;
    color: var(--s7) !important;
    outline: none !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    line-height: 1.5 !important;
    height: auto !important;
    min-height: 42px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#wccg-app input[type="text"]:focus,
#wccg-app textarea:focus,
#wccg-app select:focus {
    border-color: #25D366 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(37,211,102,.15) !important;
}

#wccg-app input[type="text"]::placeholder,
#wccg-app textarea::placeholder {
    color: var(--s4) !important;
}

.wccg-count { display: block !important; text-align: right !important; font-size: 11px !important; color: var(--s4) !important; margin-top: 4px !important; font-weight: 500 !important; }

.wccg-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; }

/* ── CHECKBOXES ── */
.wccg-checks { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 9px !important; margin-bottom: 20px !important; }
.wccg-chk { display: flex !important; align-items: center !important; gap: 9px !important; font-size: 12.5px !important; font-weight: 600 !important; color: var(--s6) !important; cursor: pointer !important; padding: 9px 12px !important; border-radius: var(--r) !important; border: 1.5px solid var(--s3) !important; background: var(--s1) !important; transition: all .2s !important; user-select: none !important; }
.wccg-chk:hover { border-color: var(--g5) !important; background: var(--g4) !important; }
.wccg-chk input[type="checkbox"] { display: none !important; }
.wccg-chkbox { width: 17px !important; height: 17px !important; min-width: 17px !important; border-radius: 5px !important; border: 2px solid var(--s3) !important; background: var(--white) !important; transition: all .2s !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.wccg-chk input:checked + .wccg-chkbox { background: #25D366 !important; border-color: #25D366 !important; }
.wccg-chk input:checked + .wccg-chkbox::after { content: "" !important; width: 5px !important; height: 9px !important; border: 2.5px solid #fff !important; border-top: none !important; border-left: none !important; transform: rotate(45deg) translateY(-1px) !important; display: block !important; }

/* ── VARIATION PILLS ── */
.wccg-var-wrap { margin-bottom: 20px !important; }
.wccg-var-wrap > label { display: block !important; font-size: 12.5px !important; font-weight: 700 !important; color: var(--s7) !important; margin-bottom: 9px !important; }
.wccg-var-pills { display: flex !important; gap: 10px !important; }
.wccg-vpill { flex: 1 !important; padding: 10px !important; border-radius: var(--r) !important; border: 2px solid var(--s3) !important; background: var(--s1) !important; font-size: 15px !important; font-weight: 800 !important; color: var(--s5) !important; cursor: pointer !important; transition: all .2s !important; text-align: center !important; }
.wccg-vpill:hover { border-color: var(--g5) !important; color: var(--g2) !important; }
.wccg-vpill-active { border-color: #25D366 !important; background: var(--g4) !important; color: var(--g2) !important; box-shadow: var(--shg) !important; }

/* ── BUTTONS ── */
.wccg-btn-row { display: flex !important; gap: 11px !important; }
.wccg-btn-main, .wccg-btn-sec { display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; padding: 14px 20px !important; border-radius: var(--r) !important; font-size: 14px !important; font-weight: 800 !important; cursor: pointer !important; transition: all .25s !important; flex: 1 !important; text-decoration: none !important; }
.wccg-btn-main { background: linear-gradient(135deg,#25D366 0%,#16a34a 100%) !important; color: #fff !important; border: none !important; box-shadow: 0 10px 28px rgba(37,211,102,.28) !important; }
.wccg-btn-main:hover { transform: translateY(-2px) !important; box-shadow: 0 16px 36px rgba(37,211,102,.38) !important; color: #fff !important; }
.wccg-btn-main.wccg-busy { opacity: .8 !important; pointer-events: none !important; }
.wccg-btn-sec { background: var(--white) !important; color: var(--s6) !important; border: 2px solid var(--s3) !important; }
.wccg-btn-sec:hover { border-color: var(--g5) !important; color: var(--g2) !important; transform: translateY(-2px) !important; }

/* ── OUTPUT PANEL ── */
.wccg-out-header { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 12px !important; margin-bottom: 14px !important; flex-wrap: wrap !important; }
.wccg-out-title { font-size: 22px !important; font-weight: 800 !important; letter-spacing: -.5px !important; color: var(--s8) !important; margin: 0 !important; }
.wccg-out-meta { font-size: 12px !important; color: var(--s4) !important; margin-top: 3px !important; }
.wccg-action-btns { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
.wccg-action-btns button { display: flex !important; align-items: center !important; gap: 5px !important; border: 1.5px solid var(--s3) !important; padding: 7px 12px !important; border-radius: 9px !important; cursor: pointer !important; font-size: 12px !important; font-weight: 700 !important; background: var(--white) !important; color: var(--s6) !important; transition: all .2s !important; }
.wccg-action-btns button:hover { transform: translateY(-1px) !important; }
#wccg-wa:hover { background: #25D366 !important; color: #fff !important; border-color: #25D366 !important; }
#wccg-copy-all:hover { background: var(--g4) !important; color: var(--g2) !important; border-color: var(--g5) !important; }
#wccg-dl:hover { background: #eff6ff !important; color: #1d4ed8 !important; border-color: #bfdbfe !important; }
#wccg-clear { padding: 7px 10px !important; }
#wccg-clear:hover { background: #fef2f2 !important; color: #dc2626 !important; border-color: #fecaca !important; }

/* ── TABS ── */
.wccg-tabs-bar { display: flex !important; gap: 8px !important; margin-bottom: 12px !important; flex-wrap: wrap !important; }
.wccg-tab { padding: 7px 14px !important; border-radius: 9px !important; border: 1.5px solid var(--s3) !important; background: var(--s1) !important; font-size: 12px !important; font-weight: 700 !important; color: var(--s5) !important; cursor: pointer !important; transition: all .2s !important; }
.wccg-tab:hover { border-color: var(--g5) !important; color: var(--g2) !important; }
.wccg-tab-active { background: #25D366 !important; border-color: #25D366 !important; color: #fff !important; box-shadow: 0 4px 12px rgba(37,211,102,.25) !important; }

/* ── OUTPUT BOX — NO scrollbar, no max-height ── */
.wccg-output {
    min-height: 480px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    background: linear-gradient(160deg,#ffffff,#f8fffe) !important;
    border: 1.5px solid var(--s3) !important;
    border-radius: var(--r2) !important;
    padding: 24px !important;
    font-size: 14.5px !important;
    color: var(--s7) !important;
    line-height: 1.85 !important;
}

/* ── PLACEHOLDER ── */
.wccg-placeholder { min-height: 420px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: 40px !important; gap: 14px !important; opacity: .65 !important; }
.wccg-ph-icon { font-size: 46px !important; }
.wccg-placeholder h3 { font-size: 18px !important; font-weight: 800 !important; color: var(--s7) !important; margin: 0 !important; }
.wccg-placeholder p { font-size: 13.5px !important; color: var(--s4) !important; line-height: 1.75 !important; max-width: 300px !important; margin: 0 !important; }
.wccg-placeholder p strong { color: #16a34a !important; }

/* ── LOADING ── */
.wccg-loading-box { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; min-height: 420px !important; gap: 18px !important; color: var(--s5) !important; }
.wccg-spin { width: 40px !important; height: 40px !important; border: 3px solid var(--g3) !important; border-top-color: #25D366 !important; border-radius: 50% !important; animation: wccg-spin .7s linear infinite !important; display: block !important; }
@keyframes wccg-spin { to { transform: rotate(360deg); } }
.wccg-loading-box p { font-size: 14px !important; font-weight: 600 !important; }

/* ── CAPTION CARD ── */
.wccg-cap-card { background: linear-gradient(160deg,var(--s1),var(--white)) !important; border: 1.5px solid var(--s3) !important; border-radius: var(--r2) !important; padding: 20px !important; margin-bottom: 14px !important; transition: border-color .2s !important; }
.wccg-cap-card:last-child { margin-bottom: 0 !important; }
.wccg-cap-card:hover { border-color: var(--g5) !important; }
.wccg-cap-top { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 12px !important; }
.wccg-cap-badge { font-size: 10.5px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .05em !important; color: var(--g2) !important; background: var(--g4) !important; padding: 4px 11px !important; border-radius: 999px !important; border: 1px solid var(--g5) !important; }
.wccg-cap-copy { display: flex !important; align-items: center !important; gap: 5px !important; font-size: 12px !important; font-weight: 700 !important; color: var(--s4) !important; background: var(--white) !important; border: 1.5px solid var(--s3) !important; padding: 5px 11px !important; border-radius: 8px !important; cursor: pointer !important; transition: all .2s !important; }
.wccg-cap-copy:hover { color: var(--g2) !important; border-color: var(--g5) !important; background: var(--g4) !important; }
.wccg-cap-text { font-size: 13.5px !important; color: var(--s7) !important; line-height: 1.9 !important; white-space: pre-wrap !important; word-break: break-word !important; margin: 0 !important; }

/* ── FOOTER ── */
.wccg-out-footer { display: flex !important; align-items: center !important; gap: 8px !important; margin-top: 10px !important; font-size: 12px !important; color: var(--s4) !important; font-weight: 500 !important; }
.wccg-sep { opacity: .5 !important; }

/* ── SECTION HEADERS ── */
.wccg-section { margin-bottom: 52px !important; }
.wccg-sec-header { text-align: center !important; margin-bottom: 32px !important; }
.wccg-sec-header h2 { font-size: clamp(22px,3.5vw,38px) !important; font-weight: 900 !important; letter-spacing: -1.2px !important; color: var(--s8) !important; margin-bottom: 10px !important; }
.wccg-sec-header p { font-size: 15px !important; color: var(--s5) !important; margin: 0 !important; }

/* ── PRESETS ── */
.wccg-preset-grid { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 13px !important; }
.wccg-preset { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 5px !important; padding: 20px !important; border: 1.5px solid var(--s3) !important; border-radius: var(--r3) !important; background: var(--white) !important; cursor: pointer !important; text-align: left !important; box-shadow: 0 2px 8px rgba(0,0,0,.04) !important; transition: all .25s !important; }
.wccg-preset:hover { border-color: var(--g5) !important; transform: translateY(-4px) !important; box-shadow: 0 14px 32px rgba(37,211,102,.09) !important; background: var(--g4) !important; }
.wccg-preset span { font-size: 24px !important; margin-bottom: 2px !important; display: block !important; }
.wccg-preset strong { font-size: 14px !important; font-weight: 800 !important; color: var(--s8) !important; display: block !important; }
.wccg-preset small { font-size: 11.5px !important; color: var(--s4) !important; font-weight: 600 !important; display: block !important; }

/* ── FEATURES ── */
.wccg-feat-grid { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 16px !important; }
.wccg-feat { background: var(--white) !important; border-radius: var(--r3) !important; padding: 26px !important; border: 1.5px solid var(--s2) !important; box-shadow: 0 2px 8px rgba(0,0,0,.04) !important; transition: all .3s !important; }
.wccg-feat:hover { transform: translateY(-4px) !important; border-color: var(--g5) !important; }
.wccg-feat-icon { font-size: 28px !important; margin-bottom: 11px !important; display: block !important; }
.wccg-feat h3 { font-size: 15.5px !important; font-weight: 800 !important; color: var(--s8) !important; margin: 0 0 8px !important; }
.wccg-feat p { font-size: 13px !important; color: var(--s5) !important; line-height: 1.8 !important; margin: 0 !important; }

/* ── SEO BLOCK ── */
.wccg-seo-block { background: var(--white) !important; border-radius: var(--r3) !important; padding: 44px !important; border: 1.5px solid var(--s2) !important; margin-bottom: 48px !important; box-shadow: var(--sh) !important; }
.wccg-seo-block h2 { font-size: clamp(20px,3vw,30px) !important; font-weight: 900 !important; letter-spacing: -.8px !important; color: var(--s8) !important; margin: 24px 0 12px !important; }
.wccg-seo-block h2:first-child { margin-top: 0 !important; }
.wccg-seo-block p { color: var(--s5) !important; line-height: 1.95 !important; font-size: 15px !important; margin-bottom: 14px !important; }
.wccg-seo-block strong { color: var(--s7) !important; font-weight: 700 !important; }
.wccg-seo-block ol { padding-left: 22px !important; margin-bottom: 16px !important; }
.wccg-seo-block ol li { color: var(--s5) !important; font-size: 15px !important; line-height: 1.9 !important; margin-bottom: 8px !important; }
.wccg-seo-block ol li strong { color: #16a34a !important; }

/* ── FAQ ── */
.wccg-faq { max-width: 820px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; gap: 10px !important; }
.wccg-faq-item { background: var(--white) !important; border-radius: var(--r2) !important; border: 1.5px solid var(--s3) !important; overflow: hidden !important; transition: border-color .2s !important; }
.wccg-faq-item:hover { border-color: var(--g5) !important; }
.wccg-faq-q { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; padding: 18px 22px !important; background: none !important; border: none !important; font-size: 15px !important; font-weight: 700 !important; color: var(--s8) !important; cursor: pointer !important; text-align: left !important; gap: 14px !important; transition: color .2s !important; }
.wccg-faq-q:hover { color: #16a34a !important; }
.wccg-arr { flex-shrink: 0 !important; font-size: 11px !important; color: var(--s4) !important; transition: transform .25s !important; }
.wccg-faq-item.wccg-open .wccg-arr { transform: rotate(180deg) !important; }
.wccg-faq-a { padding: 0 22px 18px !important; display: none !important; }
.wccg-faq-item.wccg-open .wccg-faq-a { display: block !important; }
.wccg-faq-a p { font-size: 14px !important; color: var(--s5) !important; line-height: 1.9 !important; margin: 0 !important; }

/* ── TOAST ── */
#wccg-toast { position: fixed !important; bottom: 24px !important; right: 24px !important; padding: 12px 20px !important; border-radius: var(--r) !important; font-size: 13.5px !important; font-weight: 700 !important; color: #fff !important; background: var(--s8) !important; box-shadow: 0 8px 28px rgba(0,0,0,.16) !important; z-index: 999999 !important; opacity: 0 !important; transform: translateY(10px) !important; transition: all .3s !important; pointer-events: none !important; max-width: 300px !important; }
#wccg-toast.wccg-show { opacity: 1 !important; transform: translateY(0) !important; }
#wccg-toast.t-ok { background: #16a34a !important; }
#wccg-toast.t-err { background: #dc2626 !important; }

/* ── SHAKE ── */
@keyframes wccg-shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-8px);} 75%{transform:translateX(8px);} }
.wccg-shake { animation: wccg-shake .4s ease !important; }

/* ── RESPONSIVE ── */
@media (max-width: 1060px) {
    .wccg-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
    .wccg-stats { grid-template-columns: repeat(2,1fr) !important; }
    .wccg-feat-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 860px) {
    .wccg-preset-grid { grid-template-columns: repeat(2,1fr) !important; }
    .wccg-card { padding: 26px 20px !important; }
}
@media (max-width: 640px) {
    .wccg-wrap { padding: 30px 14px 56px !important; }
    .wccg-stats { grid-template-columns: repeat(2,1fr) !important; gap: 10px !important; }
    .wccg-stat-num { font-size: 20px !important; }
    .wccg-btn-row { flex-direction: column !important; }
    .wccg-row { grid-template-columns: 1fr !important; }
    .wccg-checks { grid-template-columns: 1fr !important; }
    .wccg-out-header { flex-direction: column !important; }
    .wccg-feat-grid { grid-template-columns: 1fr !important; }
    .wccg-preset-grid { grid-template-columns: 1fr 1fr !important; }
    .wccg-seo-block { padding: 24px 18px !important; }
}
@media (max-width: 420px) {
    .wccg-preset-grid { grid-template-columns: 1fr !important; }
}