/* home-polish — Home screen + orders v2 */ /* ============================================================ IPOO HOME SCREEN POLISH SCOPE: #screen-home ONLY Brand: #ff4d00 orange / #0D0600 black / #FFF8F6 warm white ============================================================ */ /* ? 1. TIGHTER TOPBAR ? */ #screen-home .topbar { height: 64px !important; padding: 12px 16px !important; box-sizing: border-box !important; gap: 8px !important; background: var(--md-surface-4) !important; border-bottom: 1px solid var(--md-outline-variant); position: relative !important; } #screen-home .topbar > .topbar-logo { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; font-size: 30px !important; letter-spacing: -2px !important; line-height: 1 !important; color: var(--md-primary) !important; font-family: "Google Sans Display", sans-serif !important; font-weight: 800 !important; text-align: center !important; z-index: 1 !important; } #screen-home .topbar > button.icon-btn { position: relative !important; z-index: 2 !important; margin-left: auto !important; } #screen-home .topbar > button.icon-btn:first-of-type { margin-left: 0 !important; } #screen-home .topbar-logo span { color: var(--md-on-surface) !important; } #screen-home .icon-btn { width: 48px !important; height: 48px !important; border-radius: 50% !important; background: transparent !important; display: flex !important; align-items: center !important; justify-content: center !important; border: none !important; cursor: pointer !important; transition: .25s !important; } #screen-home .icon-btn svg { width: 24px !important; height: 24px !important; stroke: #2B2B2B !important; transition: .25s !important; } #screen-home .icon-btn:hover { background: #FFF3EB !important; } #screen-home .icon-btn.active { background: #FFE7D6 !important; } #screen-home .header-actions { display: flex !important; align-items: center !important; gap: 16px !important; } .header-icon { width: 24px; height: 24px; color: #2B1B17; cursor: pointer; transition: .25s ease; } #screen-home .header-actions button[data-nav="sc-notif"] .header-icon, #screen-home .header-actions button[data-nav="sc-notif"]:hover .header-icon, #screen-home .header-actions button[data-nav="sc-notif"].active .header-icon { color: #FF6B00 !important; } #screen-home .header-actions button[data-nav="profile"] .header-icon, #screen-home .header-actions button[data-nav="profile"]:hover .header-icon, #screen-home .header-actions button[data-nav="profile"].active .header-icon { color: #2B1B17 !important; } .header-icon:hover { transform: scale(1.05); } /* ? 2. GREETING ? */ #screen-home .greeting-section { padding: 10px 18px 8px !important; } /* Home cards: prioritize the image and compress the text area */ #screen-home .seller-carousel { gap: 10px !important; padding: 0 2px 4px !important; } #screen-home .seller-card { flex: 0 0 172px !important; border-radius: 18px !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) !important; } #screen-home .seller-card-img { height: 166px !important; min-height: 166px !important; border-radius: 18px 18px 0 0 !important; } #screen-home .seller-card-body { padding: 12px 12px 10px !important; gap: 4px !important; min-height: 0 !important; } #screen-home .seller-card-name { font-size: 11px !important; line-height: 1.2 !important; margin-bottom: 3px !important; } #screen-home .seller-card-unit { font-size: 9px !important; color: #6b6b6b !important; } #screen-home .seller-card-price { font-size: 12px !important; margin-top: 1px !important; } #screen-home .seller-card-stock { font-size: 8px !important; margin-top: 0 !important; line-height: 1.1 !important; } #screen-home .seller-card-btn { margin-top: 4px !important; padding: 7px 8px !important; font-size: 10px !important; border-radius: 999px !important; } #screen-home .greeting-top { font-family: "Satisfy", cursive !important; font-size: 14px !important; color: var(--md-outline) !important; font-weight: 400 !important; letter-spacing: 0.02em !important; margin-bottom: 2px !important; } #screen-home .greeting-name { font-family: "Satisfy", cursive !important; font-size: 24px !important; font-weight: 400 !important; color: var(--md-on-surface) !important; letter-spacing: 0.02em !important; line-height: 1.2 !important; } #screen-home .avatar-wrap { width: 42px !important; height: 42px !important; font-size: 0 !important; border-radius: 14px !important; background-color: white !important; background-size: cover !important; background-position: center !important; box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3) !important; } /* ===================================================== M3 SEARCH BAR ===================================================== */ .search-bar{ margin:0 16px 0; min-height:56px; height:56px; background:var(--md-surface-4); border-radius:var(--md-shape-full); display:flex;align-items:center; gap:4px; padding:0 16px 0 4px; cursor:text; transition:box-shadow var(--md-duration-short); box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.08); } .search-bar.has-announce{cursor:pointer;} .search-bar:hover{box-shadow:0 2px 6px rgba(0,0,0,.15);} .search-bar .s-icon{ width:48px;height:48px; display:flex;align-items:center;justify-content:center; color:#111111; flex-shrink:0; } .search-bar .s-icon svg{width:24px;height:24px;fill:currentColor;} .search-bar > span, .search-bar > .sb-search-fallback{ flex:1; font-size:16px;font-weight:400; color:#111111; letter-spacing:.5px; } .sb-marquee-wrap{ flex:1; min-width:0; overflow:hidden; position:relative; height:24px; display:flex !important; align-items:center; } .sb-marquee-track{ display:flex; align-items:center; white-space:nowrap; position:absolute; left:0; will-change:transform; animation:sbMarqueeMove linear infinite; } .sb-marquee-item{ display:inline-flex; align-items:center; gap:8px; padding-right:48px; font-size:14px; font-weight:500; color:#111111; } .sb-marquee-item .sb-ic{font-size:14px;flex-shrink:0;} .sb-marquee-item .sb-dot{ width:6px;height:6px;border-radius:50%; background:var(--md-primary); flex-shrink:0; animation:sbDotPulse 1.6s ease-in-out infinite; } @keyframes sbDotPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.7);}} @keyframes sbMarqueeMove{from{transform:translateX(0);}to{transform:translateX(-50%);}} .search-bar__content{ flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:2px; } .search-bar__main{font-size:16px;font-weight:400;color:#111111;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .search-bar__ad{font-size:11px;font-weight:700;color:#111111;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .search-bar input{ flex:1;border:none;outline:none;background:transparent; font-size:16px;color:#111111; } .search-bar input::placeholder{color:#111111;} .search-clear-btn{ width:30px;height:30px; border-radius:50%; background:rgba(0,0,0,.08); color:#111111; display:flex;align-items:center;justify-content:center; font-size:14px; flex-shrink:0; } .home-search-shell{padding:4px 0 12px;display:flex;flex-direction:column;gap:8px;} #screen-home .home-search-shell{position:sticky;top:0;z-index:30;background:var(--md-surface-1);} .search-broadcast{display:none;} .loyalty-strip{ background:var(--md-surface-4); border-radius:var(--md-shape-xl); margin:0 16px 4px; padding:14px 16px; display:flex;align-items:center;gap:14px; border:1px solid var(--md-outline-var); } .loyalty-icon{ width:44px;height:44px;border-radius:var(--md-shape-md); background:var(--md-primary-container); display:flex;align-items:center;justify-content:center; font-size:22px;flex-shrink:0; } .loyalty-icon svg{ width:26px;height:26px; display:block; fill:#ffd700; transform: translateY(-1px); } .loyalty-info{flex:1;} .loyalty-title{font-size:13px;font-weight:600;color:#111111;} .loyalty-sub{font-size:12px;color:#111111;margin-top:1px;} .loyalty-pts{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--md-primary) !important;} .pts-bar-bg{height:6px;background:var(--md-outline-var);border-radius:3px;margin-top:6px;overflow:hidden;} .pts-bar-fill{height:100%;background:var(--md-primary);border-radius:3px;width:35%;animation:barGrow .6s var(--md-easing-emph);} @keyframes barGrow{from{width:0;}to{width:35%;}} .loyalty-sub-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px;} .pts-pending-badge{display:none;align-items:center;gap:4px;background:var(--md-primary-container);color:var(--md-primary);font-size:10px;font-weight:700;padding:2px 8px;border-radius:100px;white-space:nowrap;border:1px solid rgba(255, 77, 0, 0.25);} #home-loyalty-pending-badge.pts-pending-badge{ display:none; } .pts-pending-badge-icon{width:11px;height:11px;flex-shrink:0;} .pts-pending-badge-dark{background:rgba(255,255,255,.14);color:#FFD9BE;border:1px solid rgba(255,255,255,.18);align-self:flex-start;} .lh-prog-row{display:flex;flex-direction:column;gap:6px;} /* ? 4. BANNER CINEMATIC UPGRADE */ #screen-home .banner-wrap { margin: 10px 14px 24px !important; border-radius: 22px !important; height: 186px !important; box-shadow: 0 8px 24px rgba(13, 6, 0, 0.16), 0 2px 6px rgba(13, 6, 0, 0.08) !important; overflow: hidden !important; } #screen-home .banner-overlay { background: linear-gradient( 150deg, rgba(13, 6, 0, 0.78) 0%, rgba(13, 6, 0, 0.42) 45%, rgba(13, 6, 0, 0.08) 100% ) !important; } #screen-home .banner-content { padding: 18px 20px !important; } #screen-home .banner-eyebrow { font-size: 9px !important; font-weight: 800 !important; letter-spacing: 2px !important; color: rgba(255, 255, 255, 0.65) !important; text-transform: uppercase !important; margin-bottom: 5px !important; display: flex !important; align-items: center !important; gap: 6px !important; } #screen-home .banner-eyebrow::before { content: ""; display: inline-block; width: 16px; height: 2px; background: rgba(255, 77, 0, 0.9); border-radius: 1px; } #screen-home .banner-title { font-family: "Google Sans Display", sans-serif !important; font-size: 21px !important; font-weight: 700 !important; color: #fff !important; line-height: 1.18 !important; margin-bottom: 12px !important; letter-spacing: -0.3px !important; } #screen-home .banner-cta { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: var(--md-primary) !important; color: #fff !important; font-size: 11px !important; font-weight: 800 !important; padding: 8px 16px !important; border-radius: 100px !important; letter-spacing: 0.4px !important; border: none !important; cursor: pointer !important; box-shadow: 0 4px 14px rgba(255, 77, 0, 0.45) !important; transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms !important; } #screen-home .banner-cta:active { transform: scale(0.94) !important; box-shadow: 0 2px 8px rgba(255, 77, 0, 0.3) !important; } #screen-home .banner-dots { bottom: 14px !important; right: 18px !important; gap: 5px !important; } #screen-home .banner-dot { width: 5px !important; height: 5px !important; border-radius: 3px !important; background: rgba(255, 255, 255, 0.35) !important; transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) !important; } #screen-home .banner-dot.active { width: 18px !important; background: rgba(255, 255, 255, 0.95) !important; } /* ? 5. INFO BOX ? */ #screen-home .info-box { margin: 12px 14px 4px !important; padding: 10px 14px !important; border-radius: 14px !important; background: var(--md-surface-container-low) !important; border: 1px solid var(--md-outline-variant) !important; gap: 10px !important; } #screen-home .info-box-text { font-size: 12.5px !important; line-height: 1.5 !important; color: var(--md-on-surface) !important; font-weight: 500 !important; } #screen-home .info-box-text strong { color: var(--md-primary) !important; } /* ? 6. CATEGORY GRID SECTION HEADER */ /* Removed - CATEGORIES is now a card button, not a separate label */ /* ? 7. CATEGORY CARDS REFINED */ #screen-home .cat-card { border-radius: 16px !important; background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,247,242,0.96)) !important; border: 1px solid rgba(28,14,6,0.08) !important; box-shadow: 0 6px 16px rgba(28,14,6,0.05) !important; transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1) !important; } #screen-home .cat-card:nth-child(3n + 1) { background: linear-gradient(180deg, rgba(255,247,240,0.97), rgba(255,255,255,0.98)) !important; } #screen-home .cat-card:nth-child(3n + 2) { background: linear-gradient(180deg, rgba(244,255,249,0.97), rgba(255,255,255,0.98)) !important; } #screen-home .cat-card:nth-child(3n) { background: linear-gradient(180deg, rgba(255,244,233,0.97), rgba(255,255,255,0.98)) !important; } /* Home categories: force exactly 3 per row */ .home-cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; box-sizing: border-box; } .home-cat-grid > span:first-child { grid-column: auto; align-self: center; justify-self: stretch; display: block; margin: 0; text-align: center; } .home-cat-grid .cat-card { width: 100% !important; margin: 0 !important; box-sizing: border-box; min-width: 0; } /* Stack icon, name and sub-label vertically, centered inside each card */ .home-cat-grid .cat-card { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; } .home-cat-grid .cat-card .cat-name { display: block !important; width: 100%; margin: 12px 0 0 !important; } .home-cat-grid .cat-card .cat-sub { display: block !important; width: 100%; margin: 4px 0 0 !important; } #screen-home .cat-card:hover { background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,245,238,1)) !important; border-color: rgba(255,107,0,0.28) !important; transform: translateY(-2px) !important; } #screen-home .cat-card:active { transform: scale(0.95) !important; box-shadow: 0 1px 3px rgba(13, 6, 0, 0.1) !important; transition-duration: 100ms !important; } /* ? 8. CATEGORY ICONS LIGHT BACKGROUND WRAPPER (IPOO MATERIAL STYLE) */ #screen-home .icon-wrap { display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; border-radius: 13px !important; background: var(--md-surface-1) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 280ms !important; } #screen-home .cat-card:hover .icon-wrap { transform: scale(1.08) !important; filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--md-primary) 16%, transparent)) !important; } #screen-home .icon-wrap svg { width: 36px !important; height: 36px !important; background: transparent !important; border-radius: 0 !important; padding: 0 !important; box-sizing: content-box !important; } /* Remove white SVG surface blocks that cover the actual peach icon background */ #screen-home .icon-wrap svg rect[fill="white"], #screen-home .icon-wrap svg rect[fill="#fff"], #screen-home .icon-wrap svg rect[fill="#FFFFFF"], #screen-home .icon-wrap svg path[fill="white"], #screen-home .icon-wrap svg path[fill="#fff"], #screen-home .icon-wrap svg path[fill="#FFFFFF"], #screen-home .icon-wrap svg ellipse[fill="white"], #screen-home .icon-wrap svg ellipse[fill="#fff"], #screen-home .icon-wrap svg ellipse[fill="#FFFFFF"], #screen-home .icon-wrap svg circle[fill="white"], #screen-home .icon-wrap svg circle[fill="#fff"], #screen-home .icon-wrap svg circle[fill="#FFFFFF"], #screen-home .icon-wrap svg polygon[fill="white"], #screen-home .icon-wrap svg polygon[fill="#fff"], #screen-home .icon-wrap svg polygon[fill="#FFFFFF"], #screen-home .icon-wrap svg text[fill="white"], #screen-home .icon-wrap svg text[fill="#fff"], #screen-home .icon-wrap svg text[fill="#FFFFFF"] { fill: #FCE7E3 !important; } /* Remove white SVG strokes (decorative lines, highlights) */ #screen-home .icon-wrap svg path[stroke="white"], #screen-home .icon-wrap svg path[stroke="#fff"], #screen-home .icon-wrap svg path[stroke="#FFFFFF"], #screen-home .icon-wrap svg line[stroke="white"], #screen-home .icon-wrap svg line[stroke="#fff"], #screen-home .icon-wrap svg line[stroke="#FFFFFF"], #screen-home .icon-wrap svg rect[stroke="white"], #screen-home .icon-wrap svg rect[stroke="#fff"], #screen-home .icon-wrap svg rect[stroke="#FFFFFF"], #screen-home .icon-wrap svg circle[stroke="white"], #screen-home .icon-wrap svg circle[stroke="#fff"], #screen-home .icon-wrap svg circle[stroke="#FFFFFF"], #screen-home .icon-wrap svg ellipse[stroke="white"], #screen-home .icon-wrap svg ellipse[stroke="#fff"], #screen-home .icon-wrap svg ellipse[stroke="#FFFFFF"], #screen-home .icon-wrap svg polygon[stroke="white"], #screen-home .icon-wrap svg polygon[stroke="#fff"], #screen-home .icon-wrap svg polygon[stroke="#FFFFFF"] { stroke: #FCE7E3 !important; } /* ? 9. CATEGORY LABELS */ #screen-home .cat-name { font-size: 10.5px !important; font-weight: 700 !important; color: var(--md-on-surface) !important; letter-spacing: -0.1px !important; line-height: 1.25 !important; transition: color 200ms !important; } #screen-home .cat-card:hover .cat-name { color: var(--md-primary) !important; } #screen-home .cat-sub { font-size: 9px !important; font-weight: 600 !important; letter-spacing: 0.2px !important; opacity: 1 !important; } /* ? 10. SECTION HEADERS ? */ #screen-home .section-header { display: flex; align-items: center; height: 32px !important; padding: 0 18px !important; margin-bottom: 12px !important; } #screen-home .section-title { font-family: "Google Sans Display", sans-serif !important; font-size: 18px !important; font-weight: 600 !important; color: var(--md-on-surface) !important; letter-spacing: -0.4px !important; font-style: normal !important; } #screen-home .see-all { font-size: 14px !important; font-weight: 500 !important; color: var(--md-primary) !important; padding: 6px 10px !important; border-radius: 100px !important; background: var(--md-surface-4) !important; transition: background 160ms !important; } #screen-home .see-all:active { background: rgba(255, 77, 0, 0.1) !important; } /* ? 11. FEATURED HORIZONTAL SCROLL ? */ #screen-home .h-scroll { padding: 0 14px 12px !important; gap: 10px !important; } #screen-home .h-product-card { width: 142px !important; border-radius: 16px !important; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08) !important; border: 1px solid var(--md-outline-variant) !important; transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms !important; } #screen-home .h-product-card:active { transform: scale(0.95) !important; } #screen-home .h-img-wrap { height: 110px !important; background: linear-gradient(135deg, var(--md-surface-container-low), var(--md-surface-container)) !important; } #screen-home .h-img-wrap img { object-fit: contain !important; object-position: center !important; transform: none !important; } #screen-home .h-name { font-size: 12.5px !important; font-weight: 600 !important; color: var(--md-on-surface) !important; line-height: 1.35 !important; margin-bottom: 4px !important; } #screen-home .h-price { font-size: 14px !important; font-weight: 700 !important; } /* ? 12. HOME PRODUCTS GRID */ #screen-home .products-grid { padding: 12px 16px 96px !important; gap: 12px !important; } /* Ensure product name uses medium weight and normal case on home screen */ #screen-home .product-name, #screen-home .prod-name, #screen-home .prod-name-m3 { font-weight: 600 !important; text-transform: none !important; } #screen-home .products-grid .prod-fab, #screen-home .products-grid .prod-fab.prod-fab-stepper, #screen-home .prod-fab { background: linear-gradient(135deg, #FF8E3E 0%, #D14500 100%) !important; color: #fff !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; border-radius: 50% !important; box-shadow: 0 10px 24px rgba(232, 80, 10, 0.24) !important; border: none !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s ease !important; } #screen-home .products-grid .prod-fab:hover, #screen-home .products-grid .prod-fab.prod-fab-stepper:hover { background: linear-gradient(135deg, #d64000 0%, #f06a00 100%) !important; box-shadow: 0 12px 28px rgba(232, 80, 10, 0.32) !important; transform: translateY(-1px) !important; } #screen-home .products-grid .prod-fab:active, #screen-home .products-grid .prod-fab.prod-fab-stepper:active { transform: scale(0.94) !important; box-shadow: 0 4px 12px rgba(232, 80, 10, 0.24) !important; } #home-beverages-grid { display: flex !important; grid-template-columns: unset !important; flex-direction: row; gap: 12px !important; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 0 14px 20px !important; scroll-behavior: smooth; } #home-beverages-grid::-webkit-scrollbar { display: none; } #home-beverages-grid .product-card { flex: 0 0 160px; scroll-snap-align: start; } #screen-home .product-name { font-size: 17px !important; font-weight: 600 !important; color: var(--md-on-surface) !important; line-height: 1.3 !important; letter-spacing: -0.1px !important; } #screen-home .product-sub { font-size: 10.5px !important; color: var(--md-outline) !important; font-weight: 500 !important; margin-bottom: 8px !important; } #screen-home .product-price { font-size: 19px !important; font-weight: 700 !important; color: var(--md-primary) !important; } #screen-home .add-btn { width: 40px !important; height: 40px !important; border-radius: 12px !important; background: var(--md-primary) !important; box-shadow: 0 3px 10px rgba(255, 77, 0, 0.32) !important; transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 150ms !important; } #screen-home .add-btn:active { transform: scale(0.88) !important; box-shadow: 0 1px 5px rgba(255, 77, 0, 0.2) !important; } /* ? 13. BOTTOM NAV DESIGN 1: ONLY ACTIVE GETS PILL */ nav.nav#nav-home { position: fixed !important; bottom: 0 !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 999 !important; background: var(--md-surface-2) !important; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06) !important; display: flex !important; flex-shrink: 0 !important; height: 56px !important; padding-bottom: env(safe-area-inset-bottom, 0) !important; width: min(430px, 100vw) !important; max-width: 100vw !important; margin: 0 !important; } /* Inactive nav items BLACK, NO pill background */ nav.nav .ni { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; cursor: pointer !important; color: #000 !important; position: relative !important; padding-top: 6px !important; transition: color 0.2s !important; background: transparent !important; } /* Active nav item orange */ nav.nav .ni.on { color: var(--md-primary) !important; } /* All pills start transparent */ nav.nav .ni-pill { width: 48px !important; height: 28px !important; border-radius: 14px !important; background: transparent !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Ensure inactive pills are always transparent */ nav.nav .ni:not(.on) .ni-pill { background: transparent !important; } /* Only active pill gets orange background */ nav.nav .ni.on .ni-pill { background: rgba(255, 107, 0, 0.12) !important; } /* Icon sizing */ nav.nav .ni svg { width: 20px !important; height: 20px !important; fill: currentColor !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Active icon slightly larger */ nav.nav .ni.on svg { transform: scale(1.08) !important; } nav.nav .ni-lbl { font-size: 10px !important; font-weight: 500 !important; letter-spacing: 0.3px !important; } /* Cart nav CSS deleted */ /* ? 14. FEAT SECTION WRAPPER PADDING */ #screen-home .feat-wrap { padding: 0 0 8px !important; } /* ? 15. RIPPLE MICRO-INTERACTION LAYER */ @keyframes ipoo-ripple { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.3; } 100% { transform: translate(-50%, -50%) scale(4); opacity: 0; } } /* Scroll padding at bottom */ #screen-home .scroll { background: var(--cream) !important; padding-bottom: calc(var(--nav-h, 88px) + 96px) !important; scroll-padding-bottom: 120px !important; } /* ? CATEGORY CARDS BACKGROUND */ /* Cream background with light purple icons */ /* ? ORDERS V2 SCREEN */ /* ==================== ORDERS SCREEN ? DARK MODE M3 ==================== */ #sc-orders { display: flex; flex-direction: column; height: 100%; background: var(--cream); color: var(--md-on-surface); } /* Top App Bar */ #sc-orders .ord-topbar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: transparent; border-bottom: 1px solid var(--md-outline-variant); flex-shrink: 0; } #sc-orders .ord-topbar-title { font-family: 'Space Grotesk', sans-serif; font-size: 20px; font-weight: 700; color: var(--md-on-surface); letter-spacing: -0.2px; } #sc-orders .ord-topbar-left { display: flex; gap: 12px; align-items: center; } #sc-orders .ord-topbar-right { display: flex; gap: 12px; align-items: center; } #sc-orders .ord-topbar-btn { background: transparent !important; border: none; cursor: pointer; font-size: 18px; color: #000000 !important; padding: 8px !important; width: 40px !important; height: 40px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; transition: all 0.2s ease; } #sc-orders .ord-topbar-btn:hover { background: rgba(248, 80, 10, 0.1) !important; color: var(--md-primary) !important; } #sc-orders .ord-topbar-btn:active { background: rgba(248, 80, 10, 0.15) !important; } /* Tab Navigation */ #sc-orders .ord-tabs { display: flex; gap: 8px; padding: 12px 16px; background: var(--md-surface); border-bottom: 1px solid var(--md-outline-variant); overflow-x: auto; flex-shrink: 0; } #sc-orders .ord-tabs::-webkit-scrollbar { height: 4px; } #sc-orders .ord-tabs::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.3); border-radius: 2px; } #sc-orders .ord-tabs::-webkit-scrollbar-thumb { background: rgba(255, 77, 0, 0.4); border-radius: 2px; } #sc-orders .ord-tab { padding: 8px 16px; border: none; background: var(--md-surface-2); color: #000; border-radius: 4px; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; white-space: nowrap; transition: all 0.2s ease; text-transform: capitalize; } #sc-orders .ord-tab:hover { color: #000; background: var(--md-surface-3); } #sc-orders .ord-tab.active { color: #fff; background: var(--md-primary); border-bottom: 2px solid var(--md-primary); } /* Filters (My Orders Tab) */ #sc-orders .ord-filters { display: flex; gap: 8px; padding: 12px 16px; background: var(--md-surface); border-bottom: 1px solid var(--md-outline-variant); overflow-x: auto; flex-shrink: 0; } #sc-orders .ord-filters::-webkit-scrollbar { height: 4px; } #sc-orders .ord-filters::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.3); } #sc-orders .ord-filters::-webkit-scrollbar-thumb { background: rgba(255, 77, 0, 0.4); } #sc-orders .ord-filter-chip { padding: 6px 12px; border: 1px solid #2E2E2E; background: transparent; color: #888; border-radius: 16px; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; white-space: nowrap; transition: all 0.2s ease; text-transform: capitalize; } #sc-orders .ord-filter-chip:hover { border-color: var(--md-primary); color: var(--md-primary); background: rgba(255, 77, 0, 0.08); } #sc-orders .ord-filter-chip.active { background: var(--md-primary); color: #000000; border-color: var(--md-primary); } /* Panels Container */ #sc-orders .ord-panels { flex: 1; overflow: hidden; display: flex; flex-direction: column; } #sc-orders .ord-panel { display: none; flex: 1; overflow-y: auto; } #sc-orders .ord-panel::-webkit-scrollbar { width: 6px; } #sc-orders .ord-panel::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); } #sc-orders .ord-panel::-webkit-scrollbar-thumb { background: rgba(255, 77, 0, 0.3); border-radius: 3px; } #sc-orders .ord-panel.active { display: flex; flex-direction: column; } /* Order Card ? Left Status Stripe */ .ord-card { background: #F3EEF6; border: 1px solid #E8E3EB; border-radius: 12px; margin: 0 16px 12px; padding: 16px; display: flex; flex-direction: column; cursor: pointer; transition: all 0.3s ease; overflow: hidden; } .ord-card.pending { border-left: 4px solid #F59E0B; } .ord-card.processing { border-left: 4px solid #3B82F6; } .ord-card.delivered { border-left: 4px solid #22C55E; } .ord-card.cancelled { border-left: 4px solid #EF4444; } .ord-card:hover { background: #EDE9F0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .ord-card:active { background: #F3EEF6; transform: scale(0.98); } .ord-card-content { flex: 1; padding: 0; display: flex; flex-direction: column; gap: 12px; } .ord-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .ord-card-id { font-family: 'DM Mono', monospace; font-size: 14px; font-weight: 600; color: #1C1B1F; letter-spacing: 0.5px; } .ord-card-date { font-family: 'DM Sans', sans-serif; font-size: 13px; color: #79747E; margin-top: 4px; } .ord-card-status { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 16px; text-transform: capitalize; white-space: nowrap; } .ord-card-status.pending { background: #FFF3E0; color: #E65100; } .ord-card-status.processing { background: #E3F2FD; color: #1565C0; } .ord-card-status.delivered { background: #E8F5E9; color: #2E7D32; } .ord-card-status.cancelled { background: #FFEBEE; color: #C62828; } .ord-card-items { font-family: 'DM Sans', sans-serif; font-size: 13px; color: #79747E; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .ord-card-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #E8E3EB; padding-top: 12px; margin-top: 8px; } .ord-card-total { font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 700; color: var(--md-primary); } .ord-card-pts { font-family: 'DM Sans', sans-serif; font-size: 11px; color: #888; } /* Section Group */ .ord-section-label { font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 1px; padding: 12px 16px 8px; margin-top: 8px; } .ord-section-label:first-child { margin-top: 0; } /* Tracking ? Progress Stepper */ .tracking-card { background: #1A1A1A; border: 1px solid #2E2E2E; border-radius: 8px; margin: 16px; padding: 16px; } .tracking-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .tracking-order-id { font-family: 'DM Mono', monospace; font-size: 13px; color: #F0F0F0; font-weight: 700; } .live-badge { display: flex; align-items: center; gap: 4px; background: rgba(34, 197, 94, 0.15); color: #22C55E; padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; } .live-badge-dot { width: 6px; height: 6px; background: #22C55E; border-radius: 50%; animation: pulse 1s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } } .progress-stepper { display: flex; align-items: center; gap: 0; margin: 16px 0; position: relative; } .stepper-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; } .stepper-step:not(:last-child)::after { content: ''; position: absolute; top: 20px; left: 50%; right: -50%; height: 2px; background: #2E2E2E; z-index: -1; } .stepper-step.active:not(:last-child)::after { background: var(--md-primary); } .stepper-circle { width: 40px; height: 40px; border-radius: 50%; background: #222222; border: 2px solid #2E2E2E; display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-size: 18px; color: #888; transition: all 0.3s ease; position: relative; z-index: 1; } .stepper-step.completed .stepper-circle { background: var(--md-primary); border-color: var(--md-primary); color: #000000; } .stepper-step.active .stepper-circle { background: #1A1A1A; border: 3px solid var(--md-primary-dark); box-shadow: 0 0 0 4px rgba(255, 77, 0, 0.2); color: var(--md-primary); } .stepper-label { font-family: 'DM Sans', sans-serif; font-size: 11px; color: #888; margin-top: 6px; text-align: center; font-weight: 600; text-transform: capitalize; } .stepper-step.active .stepper-label { color: var(--md-primary); font-weight: 700; } .stepper-step.completed .stepper-label { color: #22C55E; } /* Pay Tab */ .pay-card { background: #1A1A1A; border: 1px solid #2E2E2E; border-radius: 8px; margin: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .pay-card-header { display: flex; justify-content: space-between; align-items: center; } .pay-order-id { font-family: 'DM Mono', monospace; font-size: 13px; color: #F0F0F0; font-weight: 700; } .pay-amount { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; color: var(--md-primary); } .pay-btn { background: var(--md-primary); color: #000000; border: none; border-radius: 20px; padding: 12px 16px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; width: 100%; text-transform: capitalize; } .pay-btn:hover { background: #F5641C; transform: scale(1.02); } .pay-btn:active { transform: scale(0.98); } /* Empty State */ .ord-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 24px; color: var(--md-on-surface-variant); background: transparent; } .ord-empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; } .ord-empty-text { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 600; color: var(--md-on-surface); margin-bottom: 8px; } .ord-empty-subtitle { font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--md-on-surface-variant); } /* -- STEP 1: Background ? match the darker warm cream of the reference -- */ /* Force the canonical cream background on every surface */ html, body, #shell, #app { background: #fef1ee !important; } .screen, .screen.active { background: #fef1ee !important; } /* Individual screens that had their own lighter background */ #screen-home, #screen-home .scroll, #screen-products, #screen-products .scroll, #screen-cart, #screen-cart .scroll-body, #sc-orders .scroll, #sc-catpage, #sc-catpage .scroll { background: var(--cream) !important; } /* Cards and surfaces stay white, only the page bg changes */ .product-card, .h-product-card, .pcard, .prod-card, .cat-card, .ord-card, .ord-card-md, .checkout-card, .summary-card, .cart-item-m3, .prof-card, .addr-card, .lang-card, .faq-card, .contact-card, .about-sec { background: #fef1ee !important; } /* Top bars keep a very slightly tinted surface */ .topbar, .top-app-bar, .tbar, .nav { background: #fef1ee !important; } /* Cart page header uses the warmer peach from the search bar */ #screen-cart .top-app-bar { background: var(--md-surface-4) !important; } #screen-cart .cart-item-m3 { background: var(--md-surface-2) !important; } #screen-cart .summary-card { background: var(--md-surface-2) !important; } /* Checkout screen design uses premium white surfaces in main.css; do not override here. */ /* #screen-checkout .checkout-card { background: var(--md-surface-4) !important; } #screen-checkout .checkout-summary-card { background: var(--md-surface-4) !important; } */ /* -- STEP 2: Handwriting font ? force Satisfy on receipt elements -- */ /* The problem: your global styles override font-family on everything. The fix: use maximum specificity + !important on receipt elements. */ /* Receipt logo ? the large "IPOO" in cursive */ .receipt-logo, div.receipt-logo, .receipt-content .receipt-logo, #receipt-content .receipt-logo, body .receipt-logo, body #receipt-content .receipt-logo { font-family: "Satisfy", cursive !important; font-style: normal !important; font-weight: 400 !important; font-size: 52px !important; line-height: 1.1 !important; color: var(--md-primary) !important; letter-spacing: 0.02em !important; /* Render hint: tell the browser to optimize for legibility */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* "Thank you for your order" text */ .receipt-thanks, div.receipt-thanks, .receipt-content .receipt-thanks, #receipt-content .receipt-thanks, body .receipt-thanks, body #receipt-content .receipt-thanks { font-family: "Satisfy", cursive !important; font-style: normal !important; font-weight: 400 !important; font-size: 22px !important; line-height: 1.4 !important; color: #1f1f1f !important; letter-spacing: 0.02em !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* -- STEP 3: Receipt container ? tighten the visual polish -- */ .receipt-content, #receipt-content { background: #fffcfa !important; /* Subtle warm shadow to lift the receipt off the page */ box-shadow: 0 1px 3px rgba(120, 75, 40, 0.06), 0 4px 16px rgba(120, 75, 40, 0.08) !important; } /* Receipt header section ? slightly warmer gradient */ .receipt-header-section { background: linear-gradient( 135deg, #fff8f5 0%, #feeee8 100% ) !important; border: 1px solid #f0ddd3 !important; } /* Receipt logo sub ? the "Wholesale Distribution" tagline */ .receipt-logo-sub { font-family: "Google Sans", Roboto, sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.12em !important; color: #534340 !important; text-transform: uppercase !important; } /* -- STEP 4: Greeting name ? use Satisfy cursive for handwritten feel -- */ .greeting-name { font-family: "Satisfy", cursive !important; font-weight: 400 !important; font-size: 24px !important; letter-spacing: 0.02em !important; font-style: normal !important; } /* Greeting time text ? use Satisfy for consistency */ .greeting-top { font-family: "Satisfy", cursive !important; font-weight: 400 !important; font-size: 14px !important; font-style: normal !important; letter-spacing: 0.02em !important; } /* Notification banner ? use Satisfy for all text */ #home-notifications, #home-notifications * { font-family: 'DM Sans', 'Google Sans', Roboto, sans-serif !important; font-style: normal !important; } #home-notifications { margin: 8px 14px 0 !important; position: relative; z-index: 2; } #home-notifications .home-notif-card { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 14px 14px 14px 12px; border-radius: 24px; background: linear-gradient(135deg, #fffdfb 0%, #fff6f0 100%); border: 1px solid rgba(79, 63, 51, 0.09); box-shadow: 0 18px 34px rgba(39, 24, 15, 0.08), 0 8px 16px rgba(39, 24, 15, 0.03); position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; } #home-notifications .home-notif-card:hover { transform: translateY(-1px); box-shadow: 0 20px 38px rgba(39, 24, 15, 0.10), 0 10px 18px rgba(39, 24, 15, 0.05); } #home-notifications .home-notif-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, #ff4d00 0%, #ff8d4d 100%); border-radius: 24px 0 0 24px; } #home-notifications .home-notif-badge { position: absolute; top: 10px; right: 12px; display: inline-flex; align-items: center; justify-content: center; padding: 4px 7px; border-radius: 999px; background: rgba(255, 77, 0, 0.10); color: #b24615; font-size: 9px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } #home-notifications .home-notif-icon { position: relative; z-index: 1; width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(255, 77, 0, 0.12) 0%, rgba(255,255,255,0.97) 100%); color: var(--md-primary); box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 8px 14px rgba(255, 77, 0, 0.08); } #home-notifications .home-notif-icon svg { width: 18px; height: 18px; display: block; } #home-notifications .home-notif-copy { position: relative; z-index: 1; flex: 1; min-width: 0; padding: 2px 42px 0 0; } #home-notifications .home-notif-title { font-size: 15px; font-weight: 900; color: #1f1a16; line-height: 1.25; letter-spacing: -0.04em; margin-bottom: 3px; } #home-notifications .home-notif-body { font-size: 12px; color: #625d59; line-height: 1.45; font-weight: 600; } #home-notifications .home-notif-meta { margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } #home-notifications .home-notif-time { font-size: 11px; font-weight: 700; color: #7d746d; letter-spacing: 0.02em; } #home-notifications .home-notif-tag { display: inline-flex; align-items: center; justify-content: center; padding: 4px 7px; border-radius: 999px; background: rgba(255, 77, 0, 0.10); color: #9f420f; font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } #home-notifications .home-notif-close { position: relative; z-index: 1; width: 24px; height: 24px; border: none; border-radius: 8px; background: rgba(255, 77, 0, 0.06); color: var(--md-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; border: 1px solid rgba(255, 77, 0, 0.06); opacity: 0.9; } #home-notifications .home-notif-close svg { width: 12px; height: 12px; display: block; } /* -- STEP 5: Nav bar ? add a subtle warm border to separate from bg -- */ .nav, nav.nav { background: #fef1ee !important; border-top: 1px solid rgba(120, 75, 40, 0.08) !important; box-shadow: 0 -1px 0 rgba(120, 75, 40, 0.06), 0 -4px 12px rgba(120, 75, 40, 0.04) !important; } /* -- STEP 6: Banner wrap ? keep it from having a white gap above -- */ .banner-wrap { background: transparent !important; } /* -- STEP 7: Info box ? slightly warmer tint -- */ .info-box { background: linear-gradient( 135deg, #fff0e8 0%, #feeae0 100% ) !important; border: 1px solid rgba(255, 77, 0, 0.12) !important; } /* -- STEP 8: Untouched parts ? apply #FFF8F6 to remaining surfaces -- */ /* Topbar */ .topbar { background: #fef1ee !important; } /* Category cards */ .cat-card { background: #fff8f6 !important; } /* Product cards */ .product-card { background: #fff8f6 !important; } /* Product info */ .product-info { background: #FFFFFF; border-radius: 32px 32px 24px 24px; padding: 26px; margin-top: -20px; position: relative; z-index: 2; box-shadow: 0 -4px 25px rgba(0, 0, 0, 0.04); } /* Remove white gaps between nav and screens */ #shell { display: flex !important; background: #fef1ee !important; } .screen, .screen.active { background: #fef1ee !important; } nav.nav, .nav { background: #fef1ee !important; border-top: 1px solid rgba(120, 75, 40, 0.08) !important; } /* Kill any white bleeding from html/body */ html, body { background: #fef1ee !important; } .scroll, .scroll-body { padding-bottom: 0 !important; } nav.nav, .nav { position: fixed !important; bottom: 0 !important; left: 50% !important; transform: translateX(-50%) !important; width: min(430px, 100vw) !important; max-width: 100vw !important; z-index: 999 !important; height: 56px !important; } /* Force nav visible on all main screens */ /* DELETED: Sibling selectors for nav ? nav permanently removed */ /* ===== DEEP NAV FIX ===== */ /* Shell must remain fixed for layout - NOT relative */ OLD NAV CSS DELETED - absolute positioning section removed */ /* --------------------------------------------------------------- */ /* LAYER 3: CSS FORTRESS ? PERMANENT NAV POSITIONING */ /* --------------------------------------------------------------- */ /* Nav removed - this section no longer applies /* NAV CSS COMPLETELY DELETED - 4 buttons removed permanently */ /* Screen padding DELETED - nav removed so no bottom spacing needed */ /* ALL .ni CLASS CSS DELETED - button styles removed permanently */ /* DELETED: Sibling selectors for nav highlighting ? now via JS in setNav() */ /* Nav icon active state controlled purely by JS .on class */ /* ================================================================ */ /* VISUAL UNIFICATION MASTER OVERRIDES - Design System Enforcement */ /* ================================================================ */ /* Ensure all page and surface backgrounds use canonical cream */ body, html, #shell, #app, .screen, .screen.active, .scroll, .scroll-body, .auth-scroll { background: var(--cream) !important; } #screen-cart, #screen-cart.screen.active, #screen-cart .scroll-body { background: var(--md-surface-1) !important; } /* Core panel and card surfaces use surface-1 (slight elevation) */ #screen-products .scroll, #screen-cart .scroll-body, #screen-home .scroll, #sc-catpage .scroll, .pcard, .pcard-info, .pcard-footer, .cart-item, .cart-sum, .addr-item, .addr-bottom, .order-card, .faq-item, .receipt-section { background: var(--md-surface-1) !important; } /* Primary CTA button backgrounds */ .btn-primary, .btn-cta, .checkout-btn, .login-btn, .register-btn, .confirm-btn, .proceed-btn, .place-order-btn, .add-to-cart, .qty-increase, button[class*="primary"], button[class*="cta"] { background: var(--md-primary) !important; color: var(--md-on-primary) !important; } /* Primary text and headings */ h1, h2, h3, h4, h5, h6, .heading, .title, .section-title, .greeting-name, .greeting-top, .topbar-title, .wl-headline, .login-title, .reg-title, .success-title, .empty-title, .cart-empty-title, .ord-empty-title, .about-word { color: var(--md-on-surface) !important; } /* All primary body text */ p:not(.ord-status):not(.ord3-chip):not(.status-chip):not(.ipoo-price-kes):not(.ipoo-price-amt):not(.ipoo-kes):not(.ipoo-amt), span:not(.ord-status):not(.ord3-chip):not(.status-chip):not(.ipoo-price-kes):not(.ipoo-price-amt):not(.ipoo-kes):not(.ipoo-amt):not(.prod-badge-savings-flat):not(.prod-badge):not(.badge-text), li:not(.ord-status):not(.ord3-chip):not(.status-chip):not(.ipoo-price-kes):not(.ipoo-price-amt):not(.ipoo-kes):not(.ipoo-amt), label:not(.ord-status):not(.ord3-chip):not(.status-chip):not(.ipoo-price-kes):not(.ipoo-price-amt):not(.ipoo-kes):not(.ipoo-amt), .text:not(.ord-status):not(.ord3-chip):not(.status-chip):not(.ipoo-price-kes):not(.ipoo-price-amt):not(.ipoo-kes):not(.ipoo-amt), .label:not(.ord-status):not(.ord3-chip):not(.status-chip):not(.ipoo-price-kes):not(.ipoo-price-amt):not(.ipoo-kes):not(.ipoo-amt), .pcard-name, .pcard-desc, .cart-item-name, .cart-item-desc, .addr-name, .addr-value, .order-item, .receipt-item, .faq-q, .faq-a { color: var(--md-on-surface) !important; } /* Secondary/muted text */ .muted, .secondary, .label-secondary, .pcard-info-sub, .cart-item-qty, .addr-type, .order-status-label, .receipt-meta-label, .receipt-item-desc, .faq-label, input::placeholder, textarea::placeholder { color: var(--md-on-surface-var) !important; } /* Price and amount displays */ .product-price, .h-price, .pcard-price, .det-price, .cart-price, .cart-price-m3, .sum-row span:last-child, .order-price, .receipt-amount, .rew-amount, .pts-balance, .lc-points, .lh-pts { color: var(--md-primary) !important; font-family: var(--font-display) !important; font-weight: 400 !important; } /* Borders and dividers */ .pcard, .pcard-footer, .cart-item, .cart-sum, .addr-item, .addr-bottom, .order-card, .receipt-section, .faq-item, input, textarea, select { border-color: var(--border) !important; } /* Input fields */ input, textarea, select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], .input-field, .form-control { background: var(--md-surface-1) !important; color: var(--md-on-surface) !important; border-color: var(--border) !important; } input::placeholder, textarea::placeholder { color: var(--md-on-surface-var) !important; } /* Form labels */ label, .form-label { color: var(--md-on-surface) !important; } /* Semantic colors preserved */ .success, .status-success, .order-status.completed, .badge-success { color: var(--success) !important; background: rgba(27, 138, 75, 0.08) !important; } .error, .status-error, .alert-error, .badge-error, .invalid { color: #C5192D !important; background: rgba(197, 25, 45, 0.08) !important; } .pending, .status-pending, .badge-pending { color: #FFB900 !important; background: rgba(255, 185, 0, 0.08) !important; } /* ================================================================ */ /* PHASE 2: INTERACTIVE STATE TOKENS & ACCESSIBILITY LAYER */ /* ================================================================ */ /* - Button State Rules - */ .btn-primary:hover, .btn-cta:hover, .checkout-btn:hover, .login-btn:hover, .register-btn:hover, .confirm-btn:hover, .proceed-btn:hover, .place-order-btn:hover, .add-to-cart:hover, .qty-increase:hover, button[class*="primary"]:hover, button[class*="cta"]:hover { background: var(--md-primary-hover) !important; box-shadow: var(--shadow-md) !important; transform: translateY(-1px); transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) !important; } .checkout-btn:hover, .btn-checkout:hover { background: linear-gradient(135deg, #ff7a2c 0%, #ff5b1f 50%, #f05a0d 100%) !important; box-shadow: 0 16px 30px rgba(255, 77, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.24) !important; transform: translateY(-2px); filter: brightness(1.03); } .btn-primary:active, .btn-cta:active, .checkout-btn:active, .login-btn:active, .register-btn:active, .confirm-btn:active, .proceed-btn:active, .place-order-btn:active, .add-to-cart:active, .qty-increase:active, button[class*="primary"]:active, button[class*="cta"]:active { background: var(--md-primary-active) !important; transform: translateY(0); } .checkout-btn:active, .btn-checkout:active { transform: translateY(0) scale(0.98); box-shadow: 0 6px 16px rgba(255, 77, 0, 0.24) !important; } .btn-primary:disabled, .btn-cta:disabled, .checkout-btn:disabled, .login-btn:disabled, .register-btn:disabled, .confirm-btn:disabled, .proceed-btn:disabled, .place-order-btn:disabled, .add-to-cart:disabled, .qty-increase:disabled, button[class*="primary"]:disabled, button[class*="cta"]:disabled { background: var(--md-primary-disabled) !important; color: var(--md-on-surface-var) !important; cursor: not-allowed !important; opacity: 0.6 !important; } /* - Card Hover States - */ .pcard:hover, .cart-item:hover, .addr-item:hover, .order-card:hover { background: var(--md-surface-hover) !important; box-shadow: var(--card-hover-shadow) !important; transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) !important; } /* - Input Focus States - */ input:focus, textarea:focus, select:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="tel"]:focus, .input-field:focus, .form-control:focus { border-color: var(--md-primary) !important; box-shadow: 0 0 0 3px var(--md-primary-focus-ring) !important; outline: none !important; } input:disabled, textarea:disabled, select:disabled { background: var(--md-surface-2) !important; color: var(--md-on-surface-var) !important; cursor: not-allowed !important; opacity: 0.6 !important; } /* - Chip Selected States - */ .chip:hover { background: var(--chip-bg) !important; box-shadow: var(--elevation-sm) !important; } .chip.selected, .chip[aria-selected="true"] { background: var(--chip-selected-bg) !important; color: var(--chip-selected-text) !important; } /* ================================================================ */ /* ACCESSIBILITY LAYER - WCAG AA Compliance & Touch Targets */ /* ================================================================ */ /* - Keyboard Focus Rings (focus-visible for keyboard only) - */ button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--md-primary) !important; outline-offset: 2px !important; } /* - Minimum Touch Targets (44x44px per Material Design 3) - */ button:not(.prod-fab), input[type="checkbox"], input[type="radio"], a[role="button"], [role="button"], .btn-primary, .btn-cta, .add-to-cart, .qty-increase, .icon-btn, label { min-height: 44px !important; min-width: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* - High Contrast Mode Support - */ @media (prefers-contrast: more) { :root { --md-on-surface: #000000 !important; --md-on-surface-var: #2D2321 !important; --md-primary: var(--md-primary-dark) !important; } body, html, #shell, #app { color: var(--md-on-surface) !important; } } /* - Reduced Motion Support (no animations for users who prefer less motion) - */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .btn-primary:hover { transform: none !important; } } /* - Color Blind Friendly (Deuteranopia - use icons + text labels, avoid red-green alone) - */ .status-success, .badge-success { border-left: 3px solid var(--success) !important; padding-left: 8px !important; } .status-error, .badge-error { border-left: 3px solid #C5192D !important; padding-left: 8px !important; } /* ================================================================ PROFILE SCREEN TASTE PASS ================================================================ */ #sc-profile { --profile-ink: var(--md-on-surface); --profile-muted: var(--md-on-surface-var); --profile-paper: var(--md-surface-4); --profile-paper-deep: var(--md-surface-1); --profile-line: var(--border); --profile-accent: var(--md-primary); background: var(--profile-paper) !important; color: var(--profile-ink); } #sc-profile .tbar.dark { min-height: 68px !important; height: 68px !important; padding: 10px 14px !important; background: var(--profile-paper) !important; border-bottom: 1px solid var(--profile-line) !important; box-shadow: none !important; } #sc-profile .tbar.dark .tbar-title.w { color: var(--profile-ink) !important; font: 800 20px/1.2 'Plus Jakarta Sans', 'DM Sans', sans-serif !important; letter-spacing: -0.5px !important; } #sc-profile .tbar.dark .back-btn, #sc-profile .tbar.dark .icon-btn { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; border-radius: 10px !important; color: var(--profile-ink) !important; background: transparent !important; } #sc-profile .tbar.dark .back-btn:hover, #sc-profile .tbar.dark .back-btn:focus-visible, #sc-profile .tbar.dark .icon-btn:hover, #sc-profile .tbar.dark .icon-btn:focus-visible { color: var(--profile-accent) !important; background: var(--profile-paper-deep) !important; } #sc-profile .scroll { padding: 10px 0 52px !important; background: var(--profile-paper-deep) !important; } #sc-profile .profile-hero { position: relative !important; overflow: hidden !important; margin: 0 !important; padding: 28px 20px 0 !important; border: 0 !important; border-radius: 0 0 24px 24px !important; background: linear-gradient(145deg, #21140d 0%, #3b1f12 58%, #6c3214 100%) !important; box-shadow: 0 16px 34px rgba(84, 48, 26, 0.18) !important; } #sc-profile .profile-hero::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--profile-accent); z-index: 2; } #sc-profile .profile-hero::after { content: 'IPOO MEMBER'; position: absolute; top: 20px; right: 20px; color: rgba(255,255,255,.42); font: 700 9px/1 'DM Sans', sans-serif; letter-spacing: 1.5px; z-index: 2; } #sc-profile .profile-hero-orb { display: none !important; } #sc-profile .profile-hero > div:nth-last-child(1) { position: relative !important; z-index: 1 !important; margin: 20px -20px 0 !important; padding: 15px 20px 17px !important; background: rgba(0, 0, 0, 0.18) !important; } #sc-profile .profile-hero > div:nth-child(3) { display: flex !important; align-items: center !important; gap: 16px !important; padding: 0 !important; } #sc-profile #p-av { width: 76px !important; height: 76px !important; border: 1px solid rgba(255, 120, 40, 0.9) !important; border-radius: 12px !important; background-color: #fff !important; box-shadow: 0 0 0 1px rgba(255, 120, 40, 0.08) !important; } #sc-profile #p-tier-badge { right: -8px !important; bottom: -7px !important; padding: 4px 7px !important; border: 2px solid var(--profile-ink) !important; border-radius: 6px !important; background: var(--profile-accent) !important; } #sc-profile #p-name { color: #fff !important; font: 800 20px/1.2 'Plus Jakarta Sans', 'DM Sans', sans-serif !important; letter-spacing: -0.02em !important; } #sc-profile #p-loc-row { margin: 7px 0 0 !important; color: #fff !important; font: 500 13px/1.35 'DM Sans', sans-serif !important; } #sc-profile .profile-hero * { color: #fff !important; } #sc-profile .prof-member-pill, #sc-profile #p-next-tier-label, #sc-profile #p-next-tier-label strong, #sc-profile #p-tier-milestone-a, #sc-profile #p-tier-milestone-b, #sc-profile #p-tier-milestone-a strong, #sc-profile #p-tier-milestone-b strong { color: #fff !important; } #sc-profile .profile-hero > div:nth-child(4) { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important; margin: 26px 0 0 !important; padding: 17px 0 18px !important; border-top: 1px solid rgba(255,255,255,.14) !important; } #sc-profile .profile-hero > div:nth-child(4) > div:nth-child(even) { background: rgba(255,255,255,.16) !important; margin: 2px 0 4px !important; } #sc-profile .profile-hero > div:nth-child(4) > div:nth-child(odd) { padding: 0 8px 2px !important; } #sc-profile #ps-pts, #sc-profile #ps-orders, #sc-profile #ps-member { color: #fff !important; font: 700 24px/1 'Space Grotesk', sans-serif !important; font-variant-numeric: tabular-nums; } #sc-profile .profile-hero > div:nth-child(4) div[style*="text-transform"] { color: #fff !important; font: 600 10px/1.2 'DM Sans', sans-serif !important; letter-spacing: .9px !important; } #sc-profile .profile-hero > div:nth-child(5) { margin: 0 -20px !important; padding: 15px 20px 18px !important; background: rgba(0,0,0,.22) !important; } #sc-profile .profile-hero > div:nth-child(5) div[style*="height: 6px"] { height: 7px !important; background: rgba(255,255,255,.15) !important; } #sc-profile #p-progress-fill { background: var(--profile-accent) !important; box-shadow: none !important; } #sc-profile .profile-hero > div:nth-child(5) span { color: #fff !important; font: 500 11px/1.3 'DM Sans', sans-serif !important; } #sc-profile .prof-body { gap: 0 !important; padding: 24px 14px 48px !important; background: var(--md-surface-1) !important; position: relative !important; background-attachment: fixed !important; } #sc-profile .prof-body::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 120px; background: radial-gradient(ellipse 900px 220px at 50% -60px, rgba(255, 77, 0, 0.16) 0%, transparent 72%); pointer-events: none !important; z-index: 0 !important; } #sc-profile .prof-spotlight { position: relative !important; z-index: 1 !important; margin: 0 2px 22px !important; padding: 18px 16px !important; border: 1px solid rgba(255, 77, 0, 0.25) !important; border-radius: 22px !important; background: linear-gradient(135deg, #fff8f3 0%, #fdf0e6 100%) !important; box-shadow: 0 16px 28px rgba(20, 8, 1, 0.08), inset 0 1px 0 rgba(255,255,255,0.8) !important; overflow: hidden !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; } #sc-profile .prof-spotlight::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; height: 100%; background: linear-gradient(180deg, var(--md-primary) 0%, var(--md-primary-dark) 100%); } #sc-profile .prof-spotlight-badge { display: inline-flex !important; align-items: center !important; margin-bottom: 8px !important; padding: 5px 10px !important; border-radius: 8px !important; background: rgba(255, 77, 0, 0.12) !important; color: var(--md-primary) !important; font: 700 9px/1 'Inter', 'DM Sans', sans-serif !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } #sc-profile .prof-spotlight-copy { color: #5a4a3a !important; font: 500 13px/1.45 'Inter', 'DM Sans', sans-serif !important; letter-spacing: -0.01em !important; } #sc-profile .prof-member-pill { display: inline-flex !important; align-items: center !important; width: fit-content !important; padding: 6px 10px !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.14) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; color: #fff8f2 !important; font: 700 10px/1 'Inter', 'DM Sans', sans-serif !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; } #sc-profile .prof-highlights { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; margin: 0 2px 18px !important; position: relative !important; z-index: 1 !important; } #sc-profile .prof-highlight-card { padding: 14px 12px !important; border-radius: 16px !important; background: linear-gradient(135deg, #fffdfb 0%, #f8efe7 100%) !important; border: 1px solid rgba(16, 10, 6, 0.06) !important; box-shadow: 0 10px 18px rgba(20, 8, 1, 0.05), inset 0 1px 0 rgba(255,255,255,0.7) !important; -webkit-backdrop-filter: blur(4px) !important; backdrop-filter: blur(4px) !important; } #sc-profile .prof-highlight-kicker { display: block !important; margin-bottom: 5px !important; color: var(--md-primary-dark) !important; font: 700 8px/1 'Inter', 'DM Sans', sans-serif !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; } #sc-profile .prof-highlight-card strong { color: #2b180f !important; font: 700 12px/1.25 'Inter', 'DM Sans', sans-serif !important; letter-spacing: -0.01em !important; } #sc-profile .prof-body::before { content: ""; display: none; } #sc-profile .prof-sec-lbl { position: relative !important; z-index: 1 !important; display: inline-flex !important; align-items: center !important; margin: 18px 2px 14px !important; padding: 9px 14px !important; color: var(--md-primary-dark) !important; font: 700 10px/1.2 'Inter', 'DM Sans', sans-serif !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; background: rgba(255, 77, 0, 0.1) !important; border: 1px solid rgba(255, 77, 0, 0.18) !important; border-radius: 999px !important; } #sc-profile .prof-card { position: relative !important; z-index: 1 !important; margin: 0 0 18px !important; border: 1px solid rgba(20, 8, 1, 0.06) !important; border-radius: 22px !important; background: var(--md-surface-1) !important; box-shadow: 0 18px 30px rgba(20, 8, 1, 0.05), inset 0 1px 0 rgba(255,255,255,0.8) !important; overflow: hidden !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; } #sc-profile .prof-card::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--md-primary) 0%, var(--md-primary-light) 100%); } #sc-profile .pli { position: relative !important; z-index: 1 !important; min-height: 86px !important; padding: 18px 16px !important; gap: 14px !important; border-bottom: 1px solid rgba(255, 77, 0, 0.08) !important; transition: all 180ms cubic-bezier(0.2, 0.8, 0.4, 1) !important; border-radius: 0 !important; } #sc-profile .pli:last-child { border-bottom: 0 !important; } #sc-profile .pli::after { left: 64px !important; background: rgba(84, 48, 26, 0.06) !important; } #sc-profile .pli:hover, #sc-profile .pli:focus-within { background: linear-gradient(90deg, rgba(255, 77, 0, 0.1) 0%, rgba(255, 250, 245, 0.75) 100%) !important; transform: translateX(2px) !important; box-shadow: inset 0 0 0 1px rgba(255, 77, 0, 0.12) !important; } #sc-profile .pli:active { background: rgba(255, 77, 0, 0.12) !important; } #sc-profile .pli-ico { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; border-radius: 15px !important; background: linear-gradient(135deg, #fff6f1 0%, #f9e2d1 100%) !important; box-shadow: 0 12px 22px rgba(255, 77, 0, 0.08), inset 0 1px 0 rgba(255,255,255,0.7) !important; display: flex !important; align-items: center !important; justify-content: center !important; } #sc-profile .pli-ico.pri { background: linear-gradient(135deg, rgba(255, 240, 225, 0.94) 0%, rgba(255, 230, 210, 0.88) 100%) !important; } #sc-profile .pli-ico.pri svg { stroke: var(--md-primary) !important; stroke-width: 1.8 !important; width: 18px !important; height: 18px !important; } #sc-profile .pli-ttl { color: #1d120d !important; font: 700 15px/1.2 'Inter', 'DM Sans', sans-serif !important; letter-spacing: -0.01em !important; } #sc-profile .pli-sub { margin-top: 4px !important; color: #6d5246 !important; font: 500 12.5px/1.35 'Inter', 'DM Sans', sans-serif !important; } #sc-profile .pli-chev { opacity: 0.7 !important; width: 22px !important; height: 22px !important; border-radius: 0 !important; background: url("data:image/svg+xml;utf8,") center/contain no-repeat !important; } /* Keep the existing membership card design; only normalize its text color. */ #sc-profile > .scroll > div:first-child #p-tier-badge, #sc-profile > .scroll > div:first-child #p-name, #sc-profile > .scroll > div:first-child #p-loc-row, #sc-profile > .scroll > div:first-child #ps-pts, #sc-profile > .scroll > div:first-child #ps-orders, #sc-profile > .scroll > div:first-child #ps-member, #sc-profile > .scroll > div:first-child #p-next-tier-label, #sc-profile > .scroll > div:first-child #p-tier-milestone-a, #sc-profile > .scroll > div:first-child #p-tier-milestone-b, #sc-profile > .scroll > div:first-child div[style*="text-transform"] { color: #fff !important; } #sc-profile > .scroll > div:first-child #p-shop-label, #sc-profile > .scroll > div:first-child #p-area-label, #sc-profile > .scroll > div:first-child .prof-member-pill, #sc-profile > .scroll > div:first-child #p-next-tier-label, #sc-profile > .scroll > div:first-child #p-tier-milestone-a, #sc-profile > .scroll > div:first-child #p-tier-milestone-b { color: var(--md-primary) !important; } #sc-profile > .scroll > div:first-child #p-next-tier-label, #sc-profile > .scroll > div:first-child #p-tier-milestone-a, #sc-profile > .scroll > div:first-child #p-tier-milestone-b { color: #fff !important; } #sc-profile > .scroll > div:first-child > div:nth-child(5) span { color: #fff !important; } #sc-profile .prof-card[style*="margin-top"] { margin-top: 18px !important; margin-bottom: 8px !important; } #sc-profile .pli-ico.err { background: linear-gradient(135deg, rgba(255, 235, 238, 0.9) 0%, rgba(255, 205, 210, 0.8) 100%) !important; } #sc-profile .pli-ttl.danger { color: #b42318 !important; } @media (max-width: 520px) { #sc-profile .profile-hero { padding-inline: 16px !important; } #sc-profile .profile-hero > div:nth-last-child(1), #sc-profile .profile-hero > div:nth-child(5) { margin-inline: -16px !important; padding-inline: 16px !important; } #sc-profile #p-av { width: 64px !important; height: 64px !important; border-width: 1.5px !important; border-radius: 10px !important; } } /* ================================================================ PROFILE SUITE TASTE PASS ================================================================ */ #sc-edit-profile, #sc-addresses, #sc-loyalty, #sc-notif, #sc-language, #sc-help, #sc-about { --suite-ink: var(--md-on-surface); --suite-muted: var(--md-on-surface-var); --suite-paper: var(--md-surface-4); --suite-paper-deep: var(--md-surface-1); --suite-line: var(--border); --suite-accent: var(--md-primary); background: var(--suite-paper) !important; color: var(--suite-ink); } #sc-edit-profile .tbar.dark, #sc-addresses .tbar.dark, #sc-loyalty .tbar.dark, #sc-notif .tbar.dark, #sc-language .tbar.dark, #sc-help .tbar.dark, #sc-about .tbar.dark { min-height: 68px !important; height: 68px !important; padding: 10px 14px !important; background: var(--suite-paper) !important; border-bottom: 1px solid var(--suite-line) !important; box-shadow: none !important; } #sc-edit-profile .tbar.dark .tbar-title.w, #sc-addresses .tbar.dark .tbar-title.w, #sc-loyalty .tbar.dark .tbar-title.w, #sc-notif .tbar.dark .tbar-title.w, #sc-language .tbar.dark .tbar-title.w, #sc-help .tbar.dark .tbar-title.w, #sc-about .tbar.dark .tbar-title.w { color: var(--suite-ink) !important; font: 700 21px/1 'Space Grotesk', 'DM Sans', sans-serif !important; letter-spacing: -0.5px !important; } #sc-edit-profile .tbar.dark .back-btn, #sc-addresses .tbar.dark .back-btn, #sc-loyalty .tbar.dark .back-btn, #sc-notif .tbar.dark .back-btn, #sc-language .tbar.dark .back-btn, #sc-help .tbar.dark .back-btn, #sc-about .tbar.dark .back-btn { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; border-radius: 10px !important; color: var(--suite-ink) !important; } #sc-edit-profile .tbar.dark .back-btn:hover, #sc-edit-profile .tbar.dark .back-btn:focus-visible, #sc-addresses .tbar.dark .back-btn:hover, #sc-addresses .tbar.dark .back-btn:focus-visible, #sc-loyalty .tbar.dark .back-btn:hover, #sc-loyalty .tbar.dark .back-btn:focus-visible, #sc-notif .tbar.dark .back-btn:hover, #sc-notif .tbar.dark .back-btn:focus-visible, #sc-language .tbar.dark .back-btn:hover, #sc-language .tbar.dark .back-btn:focus-visible, #sc-help .tbar.dark .back-btn:hover, #sc-help .tbar.dark .back-btn:focus-visible, #sc-about .tbar.dark .back-btn:hover, #sc-about .tbar.dark .back-btn:focus-visible { background: var(--suite-paper-deep) !important; color: var(--suite-accent) !important; } #sc-edit-profile .scroll, #sc-addresses .scroll, #sc-loyalty .scroll, #sc-notif .scroll, #sc-language .scroll, #sc-help .scroll, #sc-about .scroll { background: var(--suite-paper-deep) !important; padding-bottom: 52px !important; } #sc-edit-profile .ep-hero { margin: 0 !important; border-radius: 0 0 36px 36px !important; padding: 22px 20px 18px !important; gap: 16px !important; min-height: 290px !important; height: 290px !important; justify-content: center !important; background: linear-gradient(155deg, var(--md-on-surface) 0%, #382012 62%, var(--md-primary-dark) 145%) !important; box-shadow: 0 12px 28px rgba(84,48,26,.12) !important; } #sc-edit-profile .ep-av-wrap { width: min(78vw, 360px) !important; height: min(78vw, 360px) !important; max-width: 360px !important; max-height: 360px !important; aspect-ratio: 1 / 1 !important; border-radius: 32px !important; border: none !important; background: #F5E6E2 !important; box-shadow: 0 18px 30px rgba(16, 8, 4, 0.18) !important; overflow: hidden !important; } #sc-edit-profile .ep-av { width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; border-radius: 32px !important; border: none !important; background-color: #F5E6E2 !important; background-image: none !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; box-shadow: none !important; } #sc-edit-profile .ep-name { color: #fff !important; font: 700 22px/1.1 'Space Grotesk', sans-serif !important; } #sc-edit-profile .scroll { padding: 22px 16px 52px !important; } #sc-edit-profile .fw { margin-bottom: 20px !important; } #sc-edit-profile .flabel, #sc-edit-profile .flabel-helper { color: var(--suite-ink) !important; } #sc-edit-profile .flabel-helper { color: var(--suite-muted) !important; } #sc-edit-profile .field, #sc-edit-profile .phone-row { min-height: 52px !important; border: 1px solid var(--suite-line) !important; border-radius: 11px !important; background: var(--suite-paper) !important; color: var(--suite-ink) !important; box-shadow: 0 4px 12px rgba(84,48,26,.04) !important; } #sc-edit-profile .field:focus, #sc-edit-profile .phone-row:focus-within { border-color: var(--suite-accent) !important; box-shadow: 0 0 0 3px rgba(232,90,25,.16) !important; } #sc-addresses .prof-body, #sc-language .prof-body, #sc-notif .prof-body { padding: 10px 16px 32px !important; } #sc-addresses .prof-sec-lbl, #sc-language .prof-sec-lbl, #sc-notif .prof-sec-lbl, #sc-loyalty .prof-sec-lbl { padding: 22px 4px 9px !important; color: var(--suite-muted) !important; font: 700 10px/1.2 'DM Sans', sans-serif !important; letter-spacing: 1.4px !important; } #sc-addresses .prof-card, #sc-language .prof-card, #sc-notif .prof-card, #sc-loyalty .prof-card { border: 1px solid var(--suite-line) !important; border-radius: 14px !important; background: var(--suite-paper) !important; box-shadow: 0 5px 15px rgba(84,48,26,.05) !important; } #sc-addresses .pli, #sc-language .pli, #sc-notif .pli, #sc-loyalty .pli { min-height: 66px !important; padding: 12px 14px !important; } #sc-addresses .pli:hover, #sc-language .pli:hover, #sc-notif .pli:hover, #sc-loyalty .pli:hover { background: #fff1e8 !important; } #sc-addresses .addr-card, #sc-addresses .addr-item, #sc-language .lang-card, #sc-help .faq-card, #sc-help .faq-item { border-color: var(--suite-line) !important; border-radius: 12px !important; background: var(--suite-paper) !important; box-shadow: 0 5px 15px rgba(84,48,26,.05) !important; } #sc-help .support-message-card { background: linear-gradient(180deg, #ffffff 0%, #fff8ed 100%) !important; border-radius: 18px !important; padding: 20px !important; display: flex !important; gap: 18px !important; align-items: flex-start !important; border: 1px solid rgba(245, 158, 11, 0.22) !important; box-shadow: 0 18px 36px rgba(232, 80, 10, 0.12) !important; } #sc-help .support-message-icon { width: 52px !important; height: 52px !important; background: rgba(255, 243, 225, 0.95) !important; border-radius: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; border: 1px solid rgba(245, 158, 11, 0.24) !important; } #sc-help .support-message-body { flex: 1 !important; min-width: 0 !important; } #sc-help .support-message-title { font-weight: 700 !important; color: var(--md-on-surface) !important; margin-bottom: 4px !important; font-size: 16px !important; letter-spacing: -0.02em !important; } #sc-help .support-message-copy { font-size: 13px !important; color: var(--md-on-surface-var) !important; margin-bottom: 8px !important; line-height: 1.5 !important; } #sc-help .support-message-input { width: 100% !important; min-height: 100px !important; margin-top: 10px !important; padding: 14px !important; border: 1px solid rgba(229, 231, 235, 0.95) !important; border-radius: 16px !important; box-sizing: border-box !important; font: inherit !important; resize: vertical !important; line-height: 1.5 !important; color: #111111 !important; background: var(--suite-paper) !important; } #sc-help .support-message-footer { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 14px !important; margin-top: 12px !important; flex-wrap: wrap !important; } #sc-help .support-message-counter { font-size: 12px !important; color: #6b7280 !important; } #sc-help .support-message-button { border: 0 !important; background: var(--md-primary) !important; color: #fff !important; border-radius: 999px !important; padding: 12px 20px !important; font-weight: 700 !important; cursor: pointer !important; box-shadow: 0 10px 24px rgba(232, 80, 10, 0.18) !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } #sc-help .support-message-button:hover { transform: translateY(-1px) !important; box-shadow: 0 14px 28px rgba(232, 80, 10, 0.22) !important; } #sc-help .support-thread { margin-top: 16px !important; display: flex !important; flex-direction: column !important; gap: 10px !important; min-height: 70px !important; } #sc-help .support-msg { max-width: min(100%, 92%); display: inline-flex !important; flex-direction: column !important; gap: 6px !important; padding: 12px 14px !important; border-radius: 18px !important; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08) !important; font-size: 13px !important; line-height: 1.6 !important; word-break: break-word !important; white-space: pre-wrap !important; } #sc-help .support-msg.support-msg-user { align-self: flex-end !important; background: #f9fafb !important; border: 1px solid rgba(229, 231, 235, 0.9) !important; color: #111827 !important; } #sc-help .support-msg.support-msg-admin { align-self: flex-start !important; background: #ecfdf5 !important; border: 1px solid rgba(167, 243, 208, 0.8) !important; color: #115e59 !important; } #sc-help .support-msg-author { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.02em !important; color: #475569 !important; } #sc-help .support-msg-text { margin: 0 !important; color: inherit !important; } #sc-loyalty .loy-hero { margin: 4px 16px 16px !important; padding: 22px 22px 24px !important; border-radius: 24px !important; background: linear-gradient(155deg, #1C1410 0%, #2D1800 55%, var(--md-primary) 130%) !important; box-shadow: 0 10px 28px rgba(28,20,16,.18) !important; position: relative !important; overflow: hidden !important; } #sc-loyalty .lh-blob { display: none !important; } #sc-loyalty .lh-tier, #sc-loyalty .lh-id, #sc-loyalty .lh-ptslbl, #sc-loyalty .lh-prog, #sc-loyalty .lh-prog-head, #sc-loyalty .lh-prog-row { color: #fff !important; } #sc-loyalty .lh-pts { color: #fff !important; font: 700 44px/1 'Space Grotesk', sans-serif !important; font-variant-numeric: tabular-nums; } #sc-loyalty .lh-progress-card { border: 1px solid rgba(255,255,255,.14) !important; border-radius: 12px !important; background: rgba(0,0,0,.18) !important; } #sc-loyalty .lh-fill { background: var(--suite-accent) !important; } #sc-loyalty .loy-quick { gap: 10px !important; padding: 16px !important; background: var(--suite-paper-deep) !important; } #sc-loyalty .lq-item { border: 1px solid var(--suite-line) !important; border-radius: 12px !important; background: var(--suite-paper) !important; box-shadow: 0 5px 15px rgba(84,48,26,.05) !important; } #sc-about .about-hero { margin: 0 !important; padding: 36px 22px 32px !important; border-radius: 0 0 24px 24px !important; background: var(--suite-ink) !important; box-shadow: 0 12px 28px rgba(84,48,26,.12) !important; } #sc-about .about-blob { display: none !important; } #sc-about .about-logo { background: var(--suite-accent) !important; box-shadow: none !important; } #sc-about .about-word { color: #fff !important; font: 700 38px/1 'Space Grotesk', sans-serif !important; letter-spacing: -1px !important; } #sc-about .about-tag { max-width: 34rem !important; color: #d9c9bf !important; font: 500 14px/1.5 'DM Sans', sans-serif !important; } #sc-about .about-sec { margin: 16px !important; padding: 20px !important; border: 1px solid var(--suite-line) !important; border-radius: 14px !important; background: var(--suite-paper) !important; box-shadow: 0 5px 15px rgba(84,48,26,.05) !important; } #sc-about .about-sec h3 { color: var(--suite-ink) !important; font: 700 18px/1.2 'Space Grotesk', sans-serif !important; } #sc-about .about-sec p, #sc-about .feat-txt span { color: var(--suite-muted) !important; font: 500 13px/1.6 'DM Sans', sans-serif !important; } #sc-about .feat-row, #sc-about .crow { border-color: var(--suite-line) !important; border-radius: 11px !important; background: #fff1e8 !important; } #sc-about .feat-ico, #sc-about .crow-ico { color: var(--suite-accent) !important; background: transparent !important; } @media (max-width: 520px) { #sc-loyalty .loy-hero, #sc-about .about-hero, #sc-edit-profile .ep-hero { border-radius: 0 0 20px 20px !important; } #sc-about .about-sec { margin-inline: 10px !important; padding: 17px !important; } } /* ================================================================ HOW POINTS WORK TASTE PASS ================================================================ */ #sc-points-info { background: var(--md-surface) !important; color: var(--md-on-surface) !important; } #sc-points-info .tbar.dark { min-height: 68px !important; height: 68px !important; padding: 10px 14px !important; background: var(--md-surface) !important; border-bottom: 1px solid var(--border) !important; box-shadow: none !important; } #sc-points-info .tbar-title.w { color: var(--md-on-surface) !important; font: 700 21px/1 'Space Grotesk', 'DM Sans', sans-serif !important; letter-spacing: -0.5px !important; } #sc-points-info .back-btn { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; border-radius: 10px !important; color: var(--md-on-surface) !important; } #sc-points-info .back-btn:hover, #sc-points-info .back-btn:focus-visible { color: var(--md-primary) !important; background: var(--md-surface-1) !important; } #sc-points-info .scroll { padding: 0 0 52px !important; background: var(--md-surface-1) !important; } #sc-points-info .scroll > div:nth-child(1) { padding: 32px 20px 44px !important; background: var(--md-primary) !important; color: var(--md-on-primary) !important; } #sc-points-info .scroll > div:nth-child(1) > div { max-width: 520px; margin-inline: auto; } #sc-points-info #pi-pts-value { color: var(--md-on-primary) !important; font: 700 clamp(36px, 10vw, 52px)/1 'Space Grotesk', sans-serif !important; font-variant-numeric: tabular-nums; letter-spacing: -1px; } #sc-points-info #pi-pts-display, #sc-points-info #pi-pts-pending { color: var(--md-on-primary) !important; } #sc-points-info #pi-pts-math { color: rgba(255,255,255,.78) !important; } #sc-points-info .scroll > div:nth-child(2) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; padding: 0 16px !important; margin-top: -22px !important; } #sc-points-info .scroll > div:nth-child(2) > div { min-width: 0; padding: 14px 10px !important; border: 1px solid var(--border) !important; border-radius: 12px !important; background: var(--md-surface) !important; box-shadow: 0 7px 18px rgba(28,14,6,.08) !important; } #sc-points-info .scroll > div:nth-child(2) > div > div:first-child { color: var(--md-on-surface-var) !important; font-size: 10px !important; } #sc-points-info .scroll > div:nth-child(2) > div > div:nth-child(2) { color: var(--md-primary) !important; font: 700 18px/1.15 'Space Grotesk', sans-serif !important; } #sc-points-info .scroll > div:nth-child(2) > div > div:last-child { color: var(--md-on-surface-var) !important; font-size: 11px !important; line-height: 1.3; } #sc-points-info .scroll > div:nth-child(3) { padding: 26px 16px 30px !important; background: var(--md-surface-1) !important; } #sc-points-info .scroll > div:nth-child(3) > div:first-child, #sc-points-info .scroll > div:nth-child(3) > div:last-child { border: 1px solid var(--border) !important; border-radius: 14px !important; background: var(--md-surface) !important; box-shadow: 0 5px 15px rgba(28,14,6,.05) !important; } #sc-points-info .scroll > div:nth-child(3) h3 { color: var(--md-on-surface) !important; font: 700 19px/1.2 'Space Grotesk', sans-serif !important; } #sc-points-info #pi-tier-bar { background: var(--md-primary) !important; } #sc-points-info [id^="pi-"] { color: var(--md-on-surface) !important; } #sc-points-info #pi-pts-worth, #sc-points-info #pi-tier-badge { color: var(--md-primary) !important; } #sc-points-info .scroll > div:nth-child(3) > div:nth-child(3), #sc-points-info .scroll > div:nth-child(3) > div:nth-child(5), #sc-points-info .scroll > div:nth-child(3) > div:nth-child(7) { display: flex !important; flex-direction: column; gap: 8px !important; } #sc-points-info .scroll > div:nth-child(3) > div:nth-child(3) > div, #sc-points-info .scroll > div:nth-child(3) > div:nth-child(5) > div, #sc-points-info .scroll > div:nth-child(3) > div:nth-child(7) > div { border: 1px solid var(--border) !important; border-radius: 11px !important; background: var(--md-surface) !important; box-shadow: 0 3px 10px rgba(28,14,6,.04) !important; } #sc-points-info .scroll > div:nth-child(3) > div:nth-child(3) > div > div:first-child, #sc-points-info .scroll > div:nth-child(3) > div:nth-child(5) > div > div:first-child { background: var(--md-primary-container) !important; color: var(--md-primary) !important; } #sc-points-info .scroll > div:nth-child(3) button { min-height: 44px !important; border-radius: 10px !important; background: var(--md-primary) !important; color: var(--md-on-primary) !important; } @media (max-width: 520px) { #sc-points-info .scroll > div:nth-child(2) { gap: 7px !important; padding-inline: 10px !important; } #sc-points-info .scroll > div:nth-child(2) > div { padding-inline: 7px !important; } #sc-points-info .scroll > div:nth-child(2) > div > div:nth-child(2) { font-size: 15px !important; } } /* - Reduced Opacity for Disabled States (not color change alone per WCAG) - */ button:disabled, input:disabled, [aria-disabled="true"] { opacity: 0.6 !important; cursor: not-allowed !important; pointer-events: none !important; } /* - Scrollbar Styling for Better Visibility - */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--md-surface-1) !important; } ::-webkit-scrollbar-thumb { background: var(--md-outline) !important; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--md-on-surface-var) !important; } /* ================================================================ */ /* COMPONENT-SPECIFIC TOKEN APPLICATION */ /* ================================================================ */ /* - Button Component Tokens - */ .btn-primary, .btn-cta, .checkout-btn, .login-btn, .register-btn, .confirm-btn, .proceed-btn, .place-order-btn, .add-to-cart, button[class*="primary"] { padding: var(--button-padding-md) !important; background: var(--button-primary-bg) !important; color: var(--button-primary-text) !important; border-radius: var(--radius-sm) !important; font-weight: 600 !important; font-family: var(--font-body) !important; box-shadow: var(--elevation-sm) !important; } .checkout-btn, .btn-checkout { background: linear-gradient(135deg, var(--md-primary-light) 0%, var(--md-primary) 50%, var(--md-primary-dark) 100%) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.22) !important; border-radius: 999px !important; font-weight: 700 !important; box-shadow: 0 12px 24px rgba(255, 77, 0, 0.26), inset 0 1px 0 rgba(255,255,255,0.22) !important; } .btn-secondary, .btn-outlined, button[class*="secondary"] { padding: var(--button-padding-md) !important; background: var(--button-secondary-bg) !important; color: var(--button-secondary-text) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; } /* - Input Component Tokens - */ input, textarea, select, .input-field, .form-control { padding: var(--input-padding) !important; background: var(--input-bg) !important; color: var(--input-text) !important; border: 1px solid var(--input-border) !important; border-radius: var(--radius-xs) !important; font-family: var(--font-body) !important; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], textarea { padding: var(--input-padding-lg) !important; } /* - Card Component Tokens - */ .pcard, .cart-item, .addr-item, .order-card, .receipt-section, .faq-item { padding: var(--card-padding) !important; background: var(--card-bg) !important; border-radius: var(--card-radius) !important; box-shadow: var(--card-shadow) !important; border: 1px solid var(--card-border) !important; } /* - Chip Component Tokens - */ .chip, .filter-chip, [role="tab"] { padding: var(--chip-padding) !important; background: var(--chip-bg) !important; color: var(--chip-text) !important; border-radius: var(--chip-radius) !important; } .chip:hover, .filter-chip:hover { box-shadow: var(--elevation-sm) !important; } /* - Badge Component Tokens - */ .badge-success, .status-success { background: var(--badge-success-bg) !important; color: var(--badge-success-text) !important; } .badge-error, .status-error { background: var(--badge-error-bg) !important; color: var(--badge-error-text) !important; } .badge-pending, .status-pending { background: var(--badge-pending-bg) !important; color: var(--badge-pending-text) !important; } /* - Spacing Application - */ .section-title { margin-bottom: var(--spacing-lg) !important; margin-top: var(--spacing-lg) !important; } .pcard-info { gap: var(--gap-md) !important; } .cart-item-details, .addr-details { gap: var(--gap-sm) !important; } .order-card-items, .receipt-items { gap: var(--gap-md) !important; } /* - Elevation Application - */ nav, .topbar { box-shadow: var(--shadow-nav, 0 -1px 0 rgba(0,0,0,0.06), 0 -2px 8px rgba(0,0,0,0.06)) !important; } .modal, [role="dialog"] { box-shadow: var(--shadow-xl) !important; } /* - Radius Application - */ .pcard, .cart-item, .addr-item { border-radius: var(--card-radius) !important; } input, textarea, select, .input-field { border-radius: var(--radius-xs) !important; } button, .btn-primary, .btn-secondary { border-radius: var(--radius-sm) !important; } /* Final homepage rhythm and keyboard affordances. */ #screen-home .scroll { background: var(--app-bg) !important; } #screen-home .home-search-shell { padding: 10px 0 14px !important; background: var(--app-bg) !important; } #screen-home .search-bar { min-height: 56px !important; height: 56px !important; margin: 0 16px !important; background: var(--md-surface-4) !important; border: 0 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08) !important; } #screen-home .search-bar:focus-visible, #screen-home .loyalty-strip:focus-visible, #screen-home .cat-card:focus-visible, #screen-home .see-all:focus-visible { outline: 3px solid rgba(255, 77, 0, 0.32) !important; outline-offset: 3px !important; } #screen-home .loyalty-strip { display: flex !important; width: calc(100% - 28px) !important; box-sizing: border-box !important; margin: 0 14px 18px !important; padding: 14px !important; border: 1px solid rgba(255, 77, 0, 0.16) !important; border-radius: 18px !important; background: var(--md-surface-2) !important; box-shadow: 0 4px 14px rgba(28, 14, 6, 0.05) !important; transition: transform 160ms ease, box-shadow 160ms ease !important; } #screen-home .loyalty-strip:hover { transform: translateY(-1px) !important; box-shadow: 0 8px 20px rgba(28, 14, 6, 0.08) !important; } #screen-home .loyalty-info { min-width: 0 !important; } #screen-home .pts-bar-bg { width: 100% !important; min-width: 0 !important; } #screen-home .home-cat-grid { padding: 0 14px 28px !important; margin-top: 0 !important; gap: 10px !important; } #screen-home .home-cat-grid > .home-section-heading { grid-column: 1 !important; grid-row: 1 !important; justify-self: stretch !important; align-self: center !important; margin: 0 2px 2px !important; color: #1c0e06 !important; font-size: 18px !important; line-height: 1.2 !important; text-align: center !important; } #screen-home .cat-card { min-height: 112px !important; padding: 12px 8px 11px !important; background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,247,242,0.94)) !important; border: 1px solid rgba(28, 14, 6, 0.08) !important; box-shadow: 0 3px 12px rgba(28, 14, 6, 0.06) !important; } #screen-home .cat-card .icon-wrap { width: 48px !important; height: 48px !important; border-radius: 15px !important; background: var(--md-surface-1) !important; } #screen-home .cat-card .cat-name { color: #111111 !important; } #screen-home .cat-card:active .cat-name { color: var(--md-primary) !important; } #screen-home .cat-card.is-selected .cat-name { color: var(--md-primary) !important; } #screen-home .prod-card-m3 { background: #ffffff !important; border: 1px solid rgba(28, 14, 6, 0.08) !important; border-radius: 18px !important; box-shadow: 0 8px 18px rgba(28, 14, 6, 0.05) !important; } #screen-home .prod-info { background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,248,245,0.96)) !important; border-top: 1px solid rgba(28,14,6,0.04) !important; padding: 12px 12px 14px !important; } #screen-home .prod-name-m3 { min-height: 2.7em !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.35 !important; } #screen-home .prod-price-row { align-items: center !important; margin-top: 8px !important; } #screen-home .prod-price-m3 { font-size: 16px !important; } #screen-home .prod-price-row .prod-fab { width: 40px !important; height: 40px !important; border-radius: 12px !important; } #screen-home .cat-card:has(.bg-orange) .cat-sub { color: #c05c00 !important; } #screen-home .cat-card:has(.bg-green) .cat-sub { color: #0a7a68 !important; } #screen-home .cat-card:has(.bg-amber) .cat-sub { color: #7a5500 !important; } #screen-home .cat-card:has(.bg-gold) .cat-sub { color: #9a6200 !important; } #screen-home .cat-card:has(.bg-red) .cat-sub { color: #b42318 !important; } #screen-home .cat-card:has(.bg-blue) .cat-sub { color: #1a3a7a !important; } #screen-home .cat-card:has(.bg-sage) .cat-sub { color: #3d6b3d !important; } #screen-home .cat-card:has(.bg-teal) .cat-sub { color: #0f766e !important; } #screen-home .cat-card:has(.bg-purple) .cat-sub { color: #5c1a9a !important; } #screen-home .cat-card:has(.bg-pink) .cat-sub { color: #a21caf !important; } #screen-home .cat-name { font-size: 11px !important; line-height: 1.25 !important; } /* Restore the historical category sequence from the pre-delete snapshot. */ #screen-home .home-cat-grid > .cat-card:nth-of-type(1) { order: 1; } #screen-home .home-cat-grid > .cat-card:nth-of-type(2) { order: 2; } #screen-home .home-cat-grid > .cat-card:nth-of-type(3) { order: 11; } #screen-home .home-cat-grid > .cat-card:nth-of-type(4) { order: 4; } #screen-home .home-cat-grid > .cat-card:nth-of-type(5) { order: 3; } #screen-home .home-cat-grid > .cat-card:nth-of-type(6) { order: 5; } #screen-home .home-cat-grid > .cat-card:nth-of-type(7) { order: 6; } #screen-home .home-cat-grid > .cat-card:nth-of-type(8) { order: 7; } #screen-home .home-cat-grid > .cat-card:nth-of-type(9) { order: 13; } #screen-home .home-cat-grid > .cat-card:nth-of-type(10) { order: 10; } #screen-home .home-cat-grid > .cat-card:nth-of-type(11) { order: 14; } #screen-home .home-cat-grid > .cat-card:nth-of-type(12) { order: 12; } #screen-home .home-cat-grid > .cat-card:nth-of-type(13) { order: 8; } #screen-home .home-cat-grid > .cat-card:nth-of-type(14) { order: 9; } #screen-home .section-header { height: 38px !important; padding: 0 16px !important; margin: 8px 0 8px !important; } #screen-home .section-title { font-size: 19px !important; font-weight: 700 !important; } #screen-home .see-all { padding: 7px 12px !important; font-size: 12px !important; font-weight: 700 !important; background: #fff0e8 !important; } @media (prefers-reduced-motion: reduce) { #screen-home .loyalty-strip, #screen-home .cat-card, #screen-home .icon-wrap { transition: none !important; } }