/* OcevoHub online shop — storefront, cart, checkout, tracking, customer account. Mobile first. --shop is the store's color (set on ). */ body.shop { --sh-bg: #f4f6fb; --sh-card: #fff; --sh-ink: #0d1b36; --sh-ink2: #3a4863; --sh-muted: #6b7890; --sh-line: #e4e9f2; --sh-soft: color-mix(in srgb, var(--shop) 9%, #fff); --sh-dark: color-mix(in srgb, var(--shop) 55%, #071230); --sh-r: 18px; background: var(--sh-bg); color: var(--sh-ink); margin: 0; min-height: 100vh; display: flex; flex-direction: column; } body.shop main { flex: 1; } body.shop { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; } .shop [hidden] { display: none !important; } .shop h1, .shop h2, .shop h3 { font-family: inherit; } .shop .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; padding: 8px 12px; border-radius: 10px; } .shop .skip-link:focus { left: 8px; } .sh-wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; } .shop .icon { width: 18px; height: 18px; } /* Header */ .sh-top { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid var(--sh-line); } .sh-top-in { display: flex; align-items: center; gap: 12px; height: 64px; } .sh-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sh-ink); min-width: 0; flex: 1; } .sh-brand img, .sh-brand-ph { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; flex-shrink: 0; } .sh-brand-ph { display: grid; place-items: center; background: var(--shop); color: #fff; } .sh-brand-name { font-weight: 800; font-size: 17px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sh-nav { display: flex; gap: 4px; } .sh-nav a { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 12px; color: var(--sh-ink2); text-decoration: none; font-weight: 650; font-size: 14px; } .sh-nav a:hover, .sh-nav a[aria-current] { background: var(--sh-soft); color: var(--shop); } .sh-cart-link { background: var(--shop); color: #fff !important; } .sh-cart-link:hover { background: var(--sh-dark) !important; } .sh-cart-count { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: #ff4d4f; color: #fff; font-size: 11.5px; display: grid; place-items: center; border: 2px solid #fff; } .sh-cart-link.bump { animation: sh-bump .35s ease; } @keyframes sh-bump { 40% { transform: scale(1.12); } } /* Buttons */ .sh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 14px; border: 0; background: var(--shop); color: #fff; font: inherit; font-weight: 750; font-size: 15px; text-decoration: none; cursor: pointer; transition: background .15s, transform .1s; } .sh-btn:hover { background: var(--sh-dark); } .sh-btn:active { transform: translateY(1px); } .sh-btn:disabled, .sh-btn.is-disabled { opacity: .45; cursor: not-allowed; } .sh-btn-block { width: 100%; } .sh-btn-light { background: #fff; color: var(--shop); } .sh-btn-light:hover { background: #f1f4fa; } .sh-btn-ghost { background: #fff; color: var(--sh-ink); border: 1.5px solid var(--sh-line); } .sh-btn-ghost:hover { background: var(--sh-soft); border-color: var(--shop); color: var(--shop); } .sh-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 650; font-size: 13.5px; color: var(--shop); cursor: pointer; } .sh-link-bad { color: #d4380d; } /* Hero slider */ .sh-hero-wrap { padding-top: 18px; } .sh-slider { position: relative; overflow: hidden; border-radius: 22px; background: var(--sh-dark); box-shadow: 0 20px 40px -28px rgba(10,20,50,.6); } .sh-slides { display: flex; transition: transform .6s cubic-bezier(.22,.8,.26,1); } .sh-slide { position: relative; flex: 0 0 100%; aspect-ratio: 8 / 3; } .sh-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .sh-slide.has-text::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,12,30,.72) 0%, rgba(5,12,30,.35) 45%, transparent 75%); } .sh-slide-text { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 0 6%; max-width: 560px; color: #fff; } .sh-slide-text h2 { margin: 0; font-size: clamp(22px, 3.6vw, 42px); line-height: 1.08; letter-spacing: -.02em; color: #fff; } .sh-slide-text p { margin: 0; font-size: clamp(14px, 1.5vw, 18px); opacity: .92; } .sh-slide-text .sh-btn { align-self: flex-start; background: #fff; color: var(--sh-ink); min-height: 44px; } .sh-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.88); color: var(--sh-ink); display: grid; place-items: center; cursor: pointer; z-index: 2; opacity: 0; transition: opacity .2s; } .sh-slider:hover .sh-arrow, .sh-arrow:focus-visible { opacity: 1; } .sh-arrow.prev { left: 14px; } .sh-arrow.next { right: 14px; } .sh-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; gap: 7px; justify-content: center; z-index: 2; } .sh-dots button { width: 9px; height: 9px; border-radius: 99px; border: 0; padding: 0; background: rgba(255,255,255,.55); cursor: pointer; transition: width .25s, background .25s; } .sh-dots button.active { width: 26px; background: #fff; } .sh-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 38px 28px; color: #fff; background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--shop) 60%, #22d3ee) 0%, transparent 55%), linear-gradient(135deg, var(--shop), var(--sh-dark)); } .sh-hero-copy { position: relative; z-index: 1; max-width: 560px; } .sh-hero h1 { margin: 10px 0 8px; font-size: clamp(28px, 5vw, 46px); line-height: 1.05; letter-spacing: -.03em; color: #fff; } .sh-hero p { margin: 0 0 20px; opacity: .92; font-size: 16px; } .sh-hero-art { position: absolute; right: -30px; bottom: -40px; opacity: .14; } .sh-hero-art .icon { width: 260px; height: 260px; } .sh-kicker { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .sh-hero .sh-kicker { background: rgba(255,255,255,.16); padding: 6px 12px; border-radius: 99px; } /* Perks strip */ .sh-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 14px; } .sh-perks > div { display: flex; gap: 10px; align-items: center; background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: 16px; padding: 12px 14px; font-size: 13px; color: var(--sh-muted); } .sh-perks .icon { color: var(--shop); width: 22px; height: 22px; flex-shrink: 0; } .sh-perks strong { display: block; color: var(--sh-ink); font-size: 14px; } /* Products */ #products { padding-top: 30px; scroll-margin-top: 70px; } .sh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .sh-head h2, .sh-about h2 { margin: 0; font-size: 24px; letter-spacing: -.02em; } .sh-search { display: flex; align-items: center; gap: 8px; background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: 12px; padding: 0 12px; height: 42px; min-width: 220px; color: var(--sh-muted); } .sh-search input { border: 0; outline: 0; font: inherit; flex: 1; background: none; min-width: 0; } .sh-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; } .sh-chips::-webkit-scrollbar { display: none; } .sh-chip { flex-shrink: 0; border: 1.5px solid var(--sh-line); background: var(--sh-card); border-radius: 99px; padding: 8px 16px; font: inherit; font-weight: 650; font-size: 14px; color: var(--sh-ink2); cursor: pointer; } .sh-chip.active { background: var(--sh-ink); border-color: var(--sh-ink); color: #fff; } .sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; } .sh-card { background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: var(--sh-r); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, border-color .2s, transform .2s; } .sh-card:hover { box-shadow: 0 18px 32px -22px rgba(10,20,50,.45); transform: translateY(-2px); } .sh-card.is-in { border-color: var(--shop); box-shadow: 0 0 0 1px var(--shop); } .sh-card-img { position: relative; aspect-ratio: 4 / 3; background: var(--sh-soft); } .sh-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .sh-card-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--shop); } .sh-card-ph .icon { width: 56px; height: 56px; opacity: .8; } .sh-tag { position: absolute; top: 10px; left: 10px; display: inline-flex; gap: 4px; align-items: center; background: #fff; color: #ea580c; font-size: 11.5px; font-weight: 800; padding: 4px 8px; border-radius: 99px; } .sh-tag .icon { width: 13px; height: 13px; } .sh-card-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .sh-card h3 { margin: 0; font-size: 16px; line-height: 1.3; } .sh-desc { margin: 0; font-size: 13px; color: var(--sh-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sh-opts { display: flex; gap: 6px; flex-wrap: wrap; } .sh-opts.single { display: none; } .sh-opts label { cursor: pointer; } .sh-opts input { position: absolute; opacity: 0; pointer-events: none; } .sh-opts span { display: inline-block; border: 1.5px solid var(--sh-line); border-radius: 10px; padding: 5px 10px; font-size: 12.5px; font-weight: 650; color: var(--sh-ink2); } .sh-opts input:checked + span { border-color: var(--shop); background: var(--sh-soft); color: var(--shop); } .sh-opts input:focus-visible + span { outline: 2px solid var(--shop); outline-offset: 2px; } .sh-card-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding-top: 4px; } .sh-price { font-size: 19px; font-weight: 800; letter-spacing: -.01em; } .sh-card-foot small { color: var(--sh-muted); font-size: 12px; margin-left: 3px; } .sh-dep { display: block; font-size: 11.5px; color: var(--sh-muted); } .sh-add { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 14px; border-radius: 12px; border: 0; background: var(--shop); color: #fff; font: inherit; font-weight: 750; cursor: pointer; } .sh-add:hover { background: var(--sh-dark); } .sh-stepper { display: inline-flex; align-items: center; background: var(--sh-soft); border-radius: 12px; height: 40px; } .sh-stepper button { width: 38px; height: 40px; border: 0; background: none; font-size: 20px; font-weight: 700; color: var(--shop); cursor: pointer; border-radius: 12px; } .sh-stepper button:hover { background: rgba(0,0,0,.05); } .sh-stepper b { min-width: 24px; text-align: center; font-size: 15px; } .sh-empty { text-align: center; color: var(--sh-muted); padding: 36px 16px; } .sh-empty .icon { width: 40px; height: 40px; color: var(--shop); display: block; margin: 0 auto 8px; } .sh-about { padding-top: 34px; } .sh-about p { color: var(--sh-ink2); max-width: 760px; line-height: 1.6; } /* Floating cart bar */ .sh-cartbar { position: fixed; z-index: 45; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); display: flex; align-items: center; gap: 10px; background: var(--sh-ink); color: #fff; text-decoration: none; padding: 10px 12px 10px 10px; border-radius: 18px; box-shadow: 0 18px 40px -12px rgba(5,12,30,.55); animation: sh-up .3s ease; } .sh-cartbar-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--shop); display: grid; place-items: center; } .sh-cartbar strong { margin-left: auto; font-size: 17px; } .sh-cartbar-go { display: inline-flex; gap: 4px; align-items: center; background: #fff; color: var(--sh-ink); font-weight: 750; padding: 8px 12px; border-radius: 12px; font-size: 14px; } @keyframes sh-up { from { transform: translate(-50%, 20px); opacity: 0; } } /* Inner pages */ .sh-page { padding-top: 22px; padding-bottom: 30px; } .sh-page h1 { margin: 0 0 16px; font-size: clamp(24px, 4vw, 32px); letter-spacing: -.02em; } .sh-narrow { max-width: 640px; } .sh-crumbs { margin-bottom: 8px; } .sh-crumbs a { display: inline-flex; gap: 6px; align-items: center; color: var(--sh-muted); text-decoration: none; font-weight: 650; font-size: 14px; } .sh-crumbs a:hover { color: var(--shop); } .sh-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; } .sh-stack { display: grid; gap: 14px; } .sh-panel { background: var(--sh-card); border: 1px solid var(--sh-line); border-radius: var(--sh-r); padding: 20px; margin: 0 0 14px; min-width: 0; } .sh-stack .sh-panel { margin: 0; } .sh-panel h2 { margin: 0 0 12px; font-size: 18px; } .sh-side { position: sticky; top: 80px; } fieldset.sh-panel legend { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; padding: 0; margin-bottom: 14px; float: left; width: 100%; } fieldset.sh-panel > :not(legend) { clear: both; } .sh-step { width: 28px; height: 28px; border-radius: 50%; background: var(--shop); color: #fff; display: grid; place-items: center; font-size: 14px; } .sh-muted { color: var(--sh-muted); margin: 0; } .sh-small { font-size: 13px; color: var(--sh-muted); margin: 10px 0 0; } .sh-small .icon { width: 15px; height: 15px; vertical-align: -3px; } .sh-warn { background: #fff7e6; color: #8a5300; border: 1px solid #f7deaa; border-radius: 12px; padding: 10px 12px; font-size: 14px; margin: 10px 0; } .sh-loading { color: var(--sh-muted); } .sh-note-bar { display: flex; gap: 10px; align-items: center; background: var(--sh-soft); color: var(--sh-ink2); border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; font-size: 14px; } .sh-note-bar .icon { color: var(--shop); flex-shrink: 0; } .sh-note-bar a { color: var(--shop); font-weight: 700; } /* Cart / summary lines */ .sh-line { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--sh-line); } .sh-line:last-of-type { border-bottom: 0; } .sh-line-plain { grid-template-columns: minmax(0, 1fr) auto auto; } .sh-line > img, .sh-line-ph { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--sh-soft); display: grid; place-items: center; color: var(--shop); } .sh-line-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sh-line-info strong { font-size: 15px; } .sh-line-opt { font-size: 12.5px; color: var(--shop); font-weight: 650; } .sh-line-unit { font-size: 12.5px; color: var(--sh-muted); } .sh-line-qty { color: var(--sh-muted); font-weight: 650; } .sh-line-total { font-weight: 800; min-width: 84px; text-align: right; } .sh-side .sh-line { grid-template-columns: 44px minmax(0, 1fr) auto auto; gap: 10px; padding: 10px 0; } .sh-side .sh-line > img, .sh-side .sh-line-ph { width: 44px; height: 44px; } .sh-side .sh-line-total { min-width: 70px; } .sh-totals { margin: 12px 0 14px; padding-top: 10px; border-top: 1px dashed var(--sh-line); } .sh-totals > div { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14.5px; } .sh-totals dt { color: var(--sh-muted); } .sh-totals dd { margin: 0; font-weight: 650; } .sh-totals .grand { padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--sh-line); font-size: 19px; } .sh-totals .grand dt { color: var(--sh-ink); font-weight: 800; } .sh-totals .grand dd { font-weight: 800; } /* Forms */ .sh-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; } .sh-field { display: flex; flex-direction: column; gap: 6px; font-weight: 650; font-size: 13.5px; color: var(--sh-ink2); } .sh-field em { font-style: normal; font-weight: 500; color: var(--sh-muted); } .sh-field input { height: 48px; border: 1.5px solid var(--sh-line); border-radius: 12px; padding: 0 14px; font: inherit; font-size: 15.5px; color: var(--sh-ink); background: #fff; } .sh-field input:focus { outline: 0; border-color: var(--shop); box-shadow: 0 0 0 4px var(--sh-soft); } .sh-field .field-error, .sh-field .error { color: #d4380d; font-weight: 600; font-size: 12.5px; } .sh-wide { grid-column: 1 / -1; } .sh-check { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--sh-ink2); grid-column: 1 / -1; } .sh-check input { width: 18px; height: 18px; accent-color: var(--shop); } .sh-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .sh-seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; } .sh-seg label { cursor: pointer; } .sh-seg input { position: absolute; opacity: 0; pointer-events: none; } .sh-seg span { display: flex; gap: 8px; align-items: center; justify-content: center; min-height: 54px; border: 1.5px solid var(--sh-line); border-radius: 14px; font-weight: 750; color: var(--sh-ink2); } .sh-seg input:checked + span { border-color: var(--shop); background: var(--sh-soft); color: var(--shop); } .sh-seg input:focus-visible + span { outline: 2px solid var(--shop); outline-offset: 2px; } .sh-seg-tabs { margin-bottom: 18px; background: var(--sh-bg); padding: 4px; border-radius: 14px; } .sh-seg-tabs button { min-height: 44px; border: 0; border-radius: 11px; background: none; font: inherit; font-weight: 750; color: var(--sh-muted); cursor: pointer; } .sh-seg-tabs button[aria-selected="true"] { background: #fff; color: var(--sh-ink); box-shadow: 0 2px 8px rgba(10,20,50,.08); } .sh-addr-pick { display: grid; gap: 8px; margin: 14px 0 4px; } .sh-addr { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--sh-line); border-radius: 14px; padding: 12px 14px; cursor: pointer; font-size: 14px; color: var(--sh-ink2); } .sh-addr:has(input:checked) { border-color: var(--shop); background: var(--sh-soft); } .sh-addr input { margin-top: 3px; accent-color: var(--shop); } .sh-addr strong { display: block; color: var(--sh-ink); } .sh-addr small { display: block; color: var(--sh-muted); } .sh-pays { display: grid; gap: 8px; } .sh-pay { display: flex; gap: 12px; align-items: center; border: 1.5px solid var(--sh-line); border-radius: 14px; padding: 12px 14px; cursor: pointer; } .sh-pay input { accent-color: var(--shop); width: 18px; height: 18px; } .sh-pay:has(input:checked) { border-color: var(--shop); background: var(--sh-soft); } .sh-pay.is-soon { cursor: not-allowed; background: #f7f9fc; } .sh-pay.is-soon .sh-pay-t strong { color: var(--sh-muted); } .sh-pay-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--sh-soft); color: var(--shop); display: grid; place-items: center; flex-shrink: 0; } .sh-pay.is-soon .sh-pay-ic { background: #eef1f6; color: var(--sh-muted); } .sh-pay-t small { display: block; color: var(--sh-muted); font-size: 12.5px; } .sh-pay.is-soon small { display: inline-block; background: #eef1f6; border-radius: 99px; padding: 1px 8px; font-weight: 700; margin-top: 2px; } /* Order status */ .sh-status { text-align: center; padding: 30px 20px; } .sh-status-ic { width: 64px; height: 64px; border-radius: 20px; background: var(--sh-soft); color: var(--shop); display: grid; place-items: center; margin: 0 auto 12px; } .sh-status-ic .icon { width: 32px; height: 32px; } .sh-status-done .sh-status-ic { background: #e6f7ef; color: #0e8a57; } .sh-status-cancelled .sh-status-ic, .sh-status-failed .sh-status-ic { background: #fdecec; color: #c0262d; } .sh-status .sh-kicker { color: var(--shop); } .sh-status h1 { margin: 6px 0; } .sh-track { list-style: none; margin: 24px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .sh-track li { font-size: 12.5px; font-weight: 650; color: var(--sh-muted); display: flex; flex-direction: column; align-items: center; gap: 8px; } .sh-track li span { width: 100%; height: 6px; border-radius: 99px; background: var(--sh-line); } .sh-track li.on { color: var(--sh-ink); } .sh-track li.on span { background: var(--shop); } .sh-track li.now span { box-shadow: 0 0 0 4px var(--sh-soft); } .sh-part { display: flex; gap: 6px; align-items: center; font-weight: 750; font-size: 13px; color: var(--sh-muted); margin: 10px 0 0; text-transform: uppercase; letter-spacing: .05em; } .sh-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .sh-kv span { display: block; font-size: 12.5px; color: var(--sh-muted); font-weight: 650; } .sh-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* Account */ .sh-acct-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .sh-acct-head h1 { margin: 0; } .sh-acct-out { margin-left: auto; } .sh-avatar { width: 56px; height: 56px; border-radius: 18px; background: var(--shop); color: #fff; display: grid; place-items: center; font-size: 24px; font-weight: 800; flex-shrink: 0; } .sh-tabs { display: flex; gap: 6px; margin-bottom: 16px; overflow-x: auto; } .sh-tabs a { display: inline-flex; gap: 6px; align-items: center; padding: 10px 16px; border-radius: 12px; text-decoration: none; color: var(--sh-ink2); font-weight: 700; font-size: 14px; background: var(--sh-card); border: 1px solid var(--sh-line); white-space: nowrap; } .sh-tabs a.active { background: var(--sh-ink); color: #fff; border-color: var(--sh-ink); } .sh-orders { display: grid; gap: 10px; } .sh-order { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; margin: 0; padding: 16px 18px; } .sh-order:hover { border-color: var(--shop); } .sh-order > div { display: flex; flex-direction: column; min-width: 0; flex: 1; } .sh-order .sh-muted { font-size: 13px; } .sh-order-total { min-width: 90px; text-align: right; } .sh-pill { display: inline-block; font-size: 12px; font-weight: 750; padding: 4px 10px; border-radius: 99px; background: var(--sh-soft); color: var(--shop); white-space: nowrap; } .sh-pill.ok { background: #e6f7ef; color: #0e8a57; } .sh-pill.bad { background: #fdecec; color: #c0262d; } .sh-address { display: flex; justify-content: space-between; gap: 12px; } .sh-address p { margin: 4px 0 0; color: var(--sh-ink2); font-size: 14px; } .sh-address-act { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; } /* Footer */ .sh-foot { margin-top: 40px; background: #0b1530; color: #b9c4dc; padding: 30px 0 18px; font-size: 14px; } .sh-foot-grid { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .sh-foot strong { color: #fff; font-size: 16px; } .sh-foot p { display: flex; gap: 8px; align-items: center; margin: 8px 0 0; } .sh-foot .icon { width: 16px; height: 16px; flex-shrink: 0; } .sh-foot-contact { display: flex; flex-direction: column; gap: 8px; } .sh-foot a { color: #dfe7f7; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; } .sh-foot a:hover { color: #fff; } .sh-powered { text-align: center; margin: 24px 0 0; font-size: 12.5px; opacity: .8; } @media (max-width: 900px) { .sh-cols { grid-template-columns: 1fr; } .sh-side { position: static; } } @media (max-width: 640px) { .sh-nav span { display: none; } .sh-nav a { padding: 10px; } .sh-slide { aspect-ratio: 4 / 3; } .sh-slide.has-text::after { background: linear-gradient(0deg, rgba(5,12,30,.78) 0%, rgba(5,12,30,.2) 60%, transparent 100%); } .sh-slide-text { justify-content: flex-end; padding: 0 18px 38px; } .sh-hero { padding: 28px 20px; } .sh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .sh-card-body { padding: 10px; gap: 6px; } .sh-card h3 { font-size: 14.5px; } .sh-price { font-size: 16px; } .sh-card-foot { flex-direction: column; align-items: stretch; } .sh-add, .sh-stepper { width: 100%; justify-content: center; } .sh-stepper { justify-content: space-between; } .sh-search { min-width: 0; flex: 1; } .sh-fields { grid-template-columns: 1fr; } .sh-line { grid-template-columns: 48px minmax(0, 1fr) auto; } .sh-line .sh-line-total { grid-column: 2 / -1; text-align: left; } .sh-line-plain { grid-template-columns: minmax(0, 1fr) auto auto; } .sh-line-plain .sh-line-total { grid-column: auto; text-align: right; } .sh-track li { font-size: 11px; } .sh-cartbar-go { display: none; } .sh-acct-head { flex-wrap: wrap; } .sh-order { flex-wrap: wrap; gap: 8px; } } @media (prefers-reduced-motion: reduce) { .sh-slides, .sh-card, .sh-cartbar { transition: none; animation: none; } } /* City / barangay picker (PSA list) */ .sh-ph { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .sh-ph select { height: 48px; border: 1.5px solid var(--sh-line); border-radius: 12px; padding: 0 12px; font: inherit; font-size: 15px; color: var(--sh-ink); background: #fff; width: 100%; } .sh-ph select:focus { outline: 0; border-color: var(--shop); box-shadow: 0 0 0 4px var(--sh-soft); } .sh-ph select:disabled { background: #f4f6fb; color: var(--sh-muted); } .sh-suggest-wrap { position: relative; display: block; } .sh-suggest-wrap input { width: 100%; box-sizing: border-box; } .sh-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; background: #fff; border: 1px solid var(--sh-line); border-radius: 12px; box-shadow: 0 14px 30px rgba(13,27,54,.14); max-height: 260px; overflow: auto; display: block; } .sh-suggest button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 14px; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--sh-ink); cursor: pointer; } .sh-suggest button:hover, .sh-suggest button:focus-visible { background: var(--sh-soft); outline: none; } .sh-suggest p { margin: 0; padding: 10px 14px; font-size: 13.5px; color: var(--sh-muted); font-weight: 500; } @media (max-width: 640px) { .sh-ph { grid-template-columns: 1fr; } }