/* ========================================================= CPS eShop — BASE LAYER v10.0 — MODERN LIGHT THEME ────────────────────────────────────────────────────── - NUCLEAR Frappe v14 full-width container overrides - Modern Light theme with rich yellow (#FFC107) brand - Smooth font rendering - Bootstrap 4 compatibility - Cart page specific styles - Skeleton loading with yellow shimmer ========================================================= */ /* ── Font Rendering ───────────────────────────────────── */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Base Resets ──────────────────────────────────────── */ a { color: inherit; transition: color .2s ease, transform .2s ease; } a:hover { color: inherit; text-decoration: none; } img { max-width: 100%; height: auto; } ul, ol { list-style: none; padding: 0; margin: 0; } /* ═══════════════════════════════════════════════════════ NUCLEAR FRAPPE v14 FULL-WIDTH OVERRIDES Duplicate of cps_web.html styles for extra safety. CSS files load after inline styles, so these win. ═══════════════════════════════════════════════════════ */ body.cps-eshop .page_content, body.cps-eshop .page-content, body.cps-eshop .page-container, body.cps-eshop .website-content, body.cps-eshop main, body.cps-eshop .main-section, body.cps-eshop .layout-main-section, body.cps-eshop .wrapper, body.cps-eshop #page-Home, body.cps-eshop #page-Store-Home, body.cps-eshop [data-page], body.cps-eshop .container.page_content, body.cps-eshop .container.page-content { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; overflow-x: hidden !important; } body.cps-eshop .page_content > .container, body.cps-eshop .page-content > .container, body.cps-eshop .page-container > .container, body.cps-eshop .website-content > .container, body.cps-eshop main > .container, body.cps-eshop .wrapper > .container, body.cps-eshop .layout-main-section > .container, body.cps-eshop .page_content .container, body.cps-eshop .page-content .container, body.cps-eshop .page-container .container { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } body.cps-eshop .page_content .container .container, body.cps-eshop .page-content .container .container, body.cps-eshop .page_content .container-fluid, body.cps-eshop .page-content .container-fluid, body.cps-eshop .website-content .container-fluid, body.cps-eshop main .container .container { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } body.cps-eshop .page_content > .container > .row, body.cps-eshop .page-content > .container > .row, body.cps-eshop .page-container > .container > .row { margin: 0 !important; } body.cps-eshop .page_content > .container > .row > .col, body.cps-eshop .page-content > .container > .row > .col, body.cps-eshop .page-container > .container > .row > .col, body.cps-eshop .page_content > .container > .row > [class*="col-"], body.cps-eshop .page-content > .container > .row > [class*="col-"], body.cps-eshop .page-container > .container > .row > [class*="col-"] { max-width: 100% !important; width: 100% !important; padding: 0 !important; flex: 0 0 100% !important; } body.cps-eshop .breadcrumb { display: none !important; } body.cps-eshop .page-head { display: none !important; } body.cps-eshop .page-breadcrumbs { display: none !important; } body.cps-eshop .navbar-header { display: none !important; } body.cps-eshop .wrapper { max-width: 100% !important; padding: 0 !important; overflow-x: hidden !important; } body.cps-eshop .web-form, body.cps-eshop .web-form .container { max-width: 100% !important; } /* ── Mobile container padding ─────────────────────────── */ @media (max-width: 767px) { body.cps-eshop .kimo-inner, body.cps-eshop .kimo-wrap { padding-left: 14px !important; padding-right: 14px !important; } } /* ═══════════════════════════════════════════════════════ BOOTSTRAP 4 LIGHT THEME OVERRIDES ═══════════════════════════════════════════════════════ */ .btn { border-radius: 12px; font-weight: 800; transition: all .25s cubic-bezier(.4, 0, .2, 1); } .btn:focus { box-shadow: 0 0 0 4px rgba(255, 193, 7, .18); } .form-control { border-radius: 12px; border-color: #E2E2E2; background: #FFFFFF; color: #1A1A2E; transition: all .25s ease; } .form-control:focus { border-color: #FFC107; box-shadow: 0 0 0 4px rgba(255, 193, 7, .12); } .form-control::placeholder { color: #B0B0BA; } .card { border-radius: 16px; border-color: #EAEAEA; background: #FFFFFF; box-shadow: 0 2px 12px rgba(0, 0, 0, .04); } .table { color: #4A4A5A; } .table thead th { border-bottom: 2px solid #FFC107; color: #1A1A2E; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; font-size: 12px; } .table td { border-top: 1px solid #F0F0F0; } /* ═══════════════════════════════════════════════════════ CART PAGE BUTTON FIXES ═══════════════════════════════════════════════════════ */ body.cps-eshop .cps-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; padding: 0 20px; border-radius: 12px; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; transition: all .2s ease; text-decoration: none; border: 1px solid transparent; } body.cps-eshop .cps-btn-primary { background: #FFC107; color: #1A1A2E; border-color: #FFC107; box-shadow: 0 4px 14px rgba(255, 193, 7, .25); } body.cps-eshop .cps-btn-primary:hover { background: #FFD54F; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 193, 7, .35); } body.cps-eshop .cps-btn-secondary { background: #FFFFFF; color: #1A1A2E; border-color: #E2E2E2; } body.cps-eshop .cps-btn-secondary:hover { background: #FFF9E6; border-color: #FFC107; color: #B8860B; } body.cps-eshop .cps-card { background: var(--kimo-surface, #FFFFFF); border: 1px solid var(--kimo-border, #EAEAEA); border-radius: var(--kimo-radius, 16px); overflow: hidden; box-shadow: 0 2px 12px rgba(0, 0, 0, .04); } body.cps-eshop .cps-empty { text-align: center; padding: 60px 20px; } body.cps-eshop .cps-empty .x { font-size: 64px; margin-bottom: 16px; opacity: .3; } body.cps-eshop .cps-empty h3 { font-size: 22px; font-weight: 900; margin-bottom: 8px; color: #1A1A2E; } body.cps-eshop .cps-empty p { color: var(--kimo-muted, #8E8E9A); margin-bottom: 20px; } body.cps-eshop .cps-skeleton .cps-sk { height: 54px; margin-bottom: 10px; border-radius: 12px; background: linear-gradient(90deg, #F0F0F0 25%, #E8E8E8 50%, #F0F0F0 75%); background-size: 200% 100%; animation: kimoShimmer 1.5s infinite; } /* ═══════════════════════════════════════════════════════ QUANTITY INPUT STYLES (Cart page) ═══════════════════════════════════════════════════════ */ .kimo-qty-group { display: inline-flex; align-items: center; border: 1px solid #E2E2E2; border-radius: 10px; overflow: hidden; background: #FFFFFF; } .kimo-qty-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--kimo-text, #1A1A2E); font-size: 16px; font-weight: 900; cursor: pointer; transition: all .15s ease; } .kimo-qty-btn:hover { background: #FFF3CD; color: #B8860B; } .kimo-qty-input { width: 44px; height: 34px; text-align: center; border: none; background: transparent; color: var(--kimo-text, #1A1A2E); font-weight: 900; font-size: 14px; -moz-appearance: textfield; } .kimo-qty-input::-webkit-outer-spin-button, .kimo-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }