/* ========================================================================== pallu.shop — Fashion Marketplace Theme AliExpress-style palette (red / black / gray) · No build step required Customize the whole look from the variables below. ========================================================================== */ /* Fonts are loaded from the page (with preconnect) rather than @import here — an @import forces the browser to fetch this file, parse it, and only then start the font request, which delays first paint. */ :root { /* Brand — AliExpress red */ --brand: #FF4747; --brand-dark: #E1251B; --brand-deep: #C20B0B; --brand-soft: #FFD9D9; --brand-tint: #FFF1F0; /* Neutrals — warm matte */ --ink: #191919; --ink-2: #333333; --muted: #757575; --line: #E8E8E8; --paper: #FFFFFF; --card: #FFFFFF; --ok: #00A650; --danger: #CF1322; --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --radius: 14px; --radius-sm: 9px; --shadow: 0 1px 2px rgba(36, 28, 21, .05), 0 8px 24px -12px rgba(36, 28, 21, .12); --shadow-lg: 0 2px 4px rgba(36, 28, 21, .06), 0 20px 44px -16px rgba(36, 28, 21, .22); --container: 1240px; } /* Base ------------------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; overflow-x: clip; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; } .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; } /* Buttons ------------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 14px; letter-spacing: .01em; transition: all .18s ease; white-space: nowrap; } .btn-primary { background: var(--brand); color: #fff; } .btn-primary:hover { background: var(--brand-dark); } .btn-dark { background: var(--ink); color: #fff; } .btn-dark:hover { background: #333333; } .btn-outline { border-color: var(--line); background: var(--card); color: var(--ink); } .btn-outline:hover { border-color: var(--brand); color: var(--brand-dark); } .btn-ghost { background: transparent; color: var(--ink-2); } .btn-ghost:hover { background: var(--brand-tint); color: var(--brand-dark); } .btn-danger { background: transparent; border-color: var(--line); color: var(--danger); } .btn-danger:hover { background: #FFF1F0; border-color: var(--danger); } .btn-sm { padding: 7px 14px; font-size: 13px; } .btn-lg { padding: 12px 26px; font-size: 15px; } .btn-block { width: 100%; } .btn-wa { background: #3E7D5C; color: #fff; } .btn-wa:hover { background: #326349; } /* Header ------------------------------------------------------------------- */ .topbar { background: var(--ink); color: #DBDBDB; font-size: 12.5px; padding: 7px 0; letter-spacing: .02em; } .topbar .container { display: flex; justify-content: space-between; gap: 16px; } .topbar a:hover { color: #fff; } .site-header { position: static; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; gap: 28px; padding: 16px 0; } .logo { font-family: 'Baloo 2', var(--font-display); font-size: 27px; font-weight: 700; letter-spacing: -.01em; line-height: 1; display: inline-block; background: linear-gradient(92deg, #FF7A2F 0%, #FF2E6E 30%, #E52FB0 52%, #A62BDA 74%, #7C1FE0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .logo span { -webkit-text-fill-color: transparent; } .search-form { flex: 1; display: flex; max-width: 520px; position: relative; } .search-form input { width: 100%; padding: 11px 46px 11px 18px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); outline: none; transition: border-color .15s ease; } .search-form input:focus { border-color: var(--brand); } .search-form button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; display: grid; place-items: center; } .search-form button:hover { background: var(--brand-dark); } .header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; } .icon-link { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink-2); transition: all .15s ease; } .icon-link:hover { background: var(--brand-tint); color: var(--brand-dark); } .icon-badge { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; border-radius: 99px; background: var(--brand); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; } .main-nav { border-top: 1px solid var(--line); } .main-nav ul { display: flex; gap: 4px; list-style: none; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .main-nav ul::-webkit-scrollbar { display: none; } .main-nav a { display: block; padding: 10px 14px; font-size: 14px; font-weight: 600; color: var(--ink-2); border-bottom: 2px solid transparent; transition: all .15s ease; white-space: nowrap; } .main-nav a:hover, .main-nav a.active { color: var(--brand-dark); border-bottom-color: var(--brand); } /* Dropdown */ .dropdown { position: relative; } .dropdown-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 6px; display: none; z-index: 60; } .dropdown.open .dropdown-menu { display: block; animation: pop .16s ease; } .dropdown-menu a, .dropdown-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 7px; font-size: 14px; font-weight: 500; color: var(--ink-2); border: 0; background: none; text-align: left; } .dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--brand-tint); color: var(--brand-dark); } .dropdown-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; } @keyframes pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* Mobile nav toggle */ .nav-toggle { display: none; background: none; border: 0; font-size: 22px; color: var(--ink); } /* Hero ---------------------------------------------------------------------- */ .hero { background: radial-gradient(900px 420px at 85% -10%, rgba(255,71,71,.10), transparent 60%), radial-gradient(600px 380px at -5% 110%, rgba(255,71,71,.05), transparent 55%), linear-gradient(160deg, #FFFFFF 0%, #FFF3F1 100%); border-bottom: 1px solid var(--line); overflow: hidden; } .hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding: 72px 0; } .hero-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-dark); background: var(--brand-soft); padding: 7px 14px; border-radius: 999px; margin-bottom: 20px; } .hero h1 { font-size: clamp(38px, 5vw, 58px); margin-bottom: 18px; } .hero h1 em { font-style: italic; color: var(--brand); } .hero p.lead { font-size: 17px; color: var(--ink-2); max-width: 480px; margin-bottom: 28px; } .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; } .hero-stats { display: flex; gap: 36px; margin-top: 40px; } .hero-stats strong { display: block; font-family: var(--font-display); font-size: 26px; color: var(--ink); } .hero-stats span { font-size: 13px; color: var(--muted); } .hero-art { position: relative; height: 420px; } .hero-card { position: absolute; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; border: 1px solid var(--line); } .hero-card img { width: 100%; height: 100%; object-fit: cover; } .hero-card-1 { width: 56%; height: 88%; left: 6%; top: 4%; transform: rotate(-3deg); } .hero-card-2 { width: 46%; height: 62%; right: 0; top: 16%; transform: rotate(4deg); } .hero-chip { position: absolute; left: 0; bottom: 12%; background: var(--card); border-radius: 999px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); padding: 10px 18px; font-size: 13px; font-weight: 600; display: flex; gap: 8px; align-items: center; } /* Sections ------------------------------------------------------------------- */ .section { padding: 52px 0; } .section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 24px; } .section-head h2 { font-size: clamp(26px, 3vw, 34px); } .section-head .sub { color: var(--muted); margin-top: 6px; font-size: 14.5px; } .section-link { font-weight: 600; font-size: 14px; color: var(--brand-dark); white-space: nowrap; } .section-link:hover { text-decoration: underline; } .section-alt { background: #F5F5F5; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* Category tiles */ .cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .cat-tile { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 22px; text-align: center; transition: all .2s ease; overflow: hidden; } .cat-tile::after { content: ''; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--brand); transform: scaleX(0); transition: transform .2s ease; } .cat-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--brand-soft); } .cat-tile:hover::after { transform: scaleX(1); } .cat-tile .cat-emoji { font-size: 40px; margin-bottom: 12px; } .cat-tile h3 { font-size: 19px; margin-bottom: 4px; } .cat-tile span { font-size: 13px; color: var(--muted); } /* Listing cards --------------------------------------------------------------- */ .listing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .listing-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: all .2s ease; position: relative; display: flex; flex-direction: column; } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .card-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--brand-tint); } .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .card:hover .card-media img { transform: scale(1.025); } .badge { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: #fff; } .badge.badge-featured { background: var(--brand); } .badge.badge-sold { background: var(--muted); } .badge.badge-sale { background: var(--danger); } .fav-btn { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--ink-2); display: grid; place-items: center; transition: all .15s ease; font-size: 16px; } .fav-btn:hover { color: var(--brand); transform: scale(1.05); } .fav-btn.active { color: var(--brand); } .card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; } .card-cat { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .card-title { font-family: var(--font-body); font-size: 14.5px; font-weight: 600; line-height: 1.35; } .card-title a::after { content: ''; position: absolute; inset: 0; } .card-meta { font-size: 12.5px; color: var(--muted); } .card-price { margin-top: 6px; display: flex; align-items: baseline; gap: 8px; } .card-price .now { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--brand-dark); } .card-price .was { font-size: 13px; color: var(--muted); text-decoration: line-through; } /* Horizontal row cards (eBay-style list view) ------------------------------------ */ .listing-list { display: flex; flex-direction: column; gap: 16px; } .row-card { display: grid; grid-template-columns: 168px 1fr 188px; gap: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; transition: all .18s ease; position: relative; } .row-card:hover { border-color: var(--brand-soft); box-shadow: var(--shadow); } .row-media { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: var(--brand-tint); aspect-ratio: 4 / 4.4; } .row-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .row-card:hover .row-media img { transform: scale(1.025); } .row-media .badge { top: 10px; left: 10px; } .row-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 4px 0; } .row-title { font-family: var(--font-display); font-size: 16.5px; font-weight: 600; line-height: 1.3; } .row-title a:hover { color: var(--brand-dark); } .row-desc { font-size: 13px; color: var(--ink-2); line-height: 1.5; max-width: 65ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .row-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; } .tag { font-size: 11.5px; font-weight: 500; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .tag-time { background: transparent; color: var(--muted); } .row-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 8px; padding: 4px 8px 4px 22px; border-left: 1px dashed var(--line); text-align: right; } .row-price .now { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.1; } .row-price .was { font-size: 14px; color: var(--muted); text-decoration: line-through; } .row-side-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; width: 100%; } .row-side-actions .btn, .row-side-actions form { width: 100%; } .row-side-actions form .btn { width: 100%; } @media (max-width: 860px) { .row-card { grid-template-columns: 130px 1fr; } .row-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; border-left: 0; border-top: 1px dashed var(--line); padding: 12px 4px 0; text-align: left; } .row-price .now { font-size: 22px; } .row-side-actions { flex-direction: row; margin-top: 0; width: auto; } .row-side-actions .btn, .row-side-actions form, .row-side-actions form .btn { width: auto; } .row-title { font-size: 17px; } .row-desc { display: none; } } /* Search hero (job-board style) ---------------------------------------------------- */ .search-hero { background: radial-gradient(900px 420px at 80% -20%, rgba(255,71,71,.10), transparent 60%), radial-gradient(700px 400px at 10% 130%, rgba(255,71,71,.05), transparent 55%), linear-gradient(165deg, #FFFFFF 0%, #F5EBE0 100%); border-bottom: 1px solid var(--line); padding: 64px 0 56px; text-align: center; } .search-hero h1 { font-size: clamp(32px, 4.6vw, 52px); max-width: 760px; margin: 0 auto 14px; } .search-hero h1 em { font-style: italic; color: var(--brand); } .search-hero .lead { font-size: 16.5px; color: var(--ink-2); max-width: 560px; margin: 0 auto 30px; } .big-search { display: flex; max-width: 780px; margin: 0 auto; background: var(--card); border: 1.5px solid var(--line); border-radius: 999px; padding: 7px; box-shadow: var(--shadow-lg); gap: 6px; } .big-search:focus-within { border-color: var(--brand); } .big-search input[type="search"] { flex: 1; border: 0; outline: none; background: none; padding: 12px 18px; font-size: 15.5px; min-width: 0; } .big-search select { border: 0; outline: none; background: none; font-size: 14px; font-weight: 600; color: var(--ink-2); padding: 0 12px; border-left: 1px solid var(--line); cursor: pointer; max-width: 180px; } .big-search .btn { border-radius: 999px; } .hero-pills { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-top: 22px; } .hero-pills .pill { font-size: 13px; font-weight: 600; color: var(--ink-2); background: rgba(255,255,255,.75); border: 1px solid var(--line); padding: 8px 17px; border-radius: 999px; transition: all .15s ease; } .hero-pills .pill:hover { border-color: var(--brand); color: var(--brand-dark); background: #fff; } .search-hero .hero-stats { justify-content: center; margin-top: 34px; } @media (max-width: 640px) { .big-search { flex-direction: column; border-radius: var(--radius); padding: 10px; } .big-search select { border-left: 0; border-top: 1px solid var(--line); padding: 10px 12px; max-width: none; } .big-search .btn { width: 100%; } .search-hero { padding: 40px 0 36px; } } /* Advertised (promoted) posts — glowing border all around --------------------------- */ @keyframes adGlow { 0%, 100% { box-shadow: 0 0 0 1px var(--brand), 0 0 6px 0 rgba(255, 71, 71, .18); } 50% { box-shadow: 0 0 0 1px var(--brand), 0 0 12px 2px rgba(255, 71, 71, .30); } } .row-card.promoted, .card.promoted { border-color: var(--brand); animation: adGlow 3s ease-in-out infinite; } .row-card.promoted:hover, .card.promoted:hover { animation-play-state: paused; } .ad-flag { position: absolute; top: -11px; right: 16px; z-index: 3; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--brand); color: #fff; padding: 4px 12px; border-radius: 999px; box-shadow: 0 2px 8px rgba(255, 71, 71, .4); } @media (prefers-reduced-motion: reduce) { .row-card.promoted, .card.promoted { animation: none; box-shadow: 0 0 0 1px var(--brand), 0 0 8px 1px rgba(255, 71, 71, .22); } } /* Trending carousel ------------------------------------------------------------------ */ .carousel-wrap { position: relative; min-width: 0; max-width: 100%; } .carousel { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 2px 8px; scrollbar-width: none; -ms-overflow-style: none; } .carousel::-webkit-scrollbar { display: none; } .carousel-card { flex: 0 0 168px; scroll-snap-align: start; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; transition: all .18s ease; } .carousel-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--brand-soft); } .carousel-card .cc-media { aspect-ratio: 4 / 4.6; overflow: hidden; background: var(--brand-tint); position: relative; } .carousel-card .cc-media img { width: 100%; height: 100%; object-fit: cover; } .carousel-card .cc-rank { position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; } .carousel-card .cc-body { padding: 9px 11px 11px; } .carousel-card .cc-title { font-size: 12.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .carousel-card .cc-price { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--brand-dark); margin-top: 3px; } .carousel-card .cc-views { font-size: 11px; color: var(--muted); } .carousel-card a::after { content: ''; position: absolute; inset: 0; } .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); box-shadow: var(--shadow-lg); display: grid; place-items: center; font-size: 17px; transition: all .15s ease; } .carousel-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; } .carousel-btn.prev { left: -14px; } .carousel-btn.next { right: -14px; } .trending-strip { margin-bottom: 30px; } .trending-strip .section-head { margin-bottom: 14px; } .trending-strip h2 { font-size: 22px; } /* Promo strip ------------------------------------------------------------------- */ .promo { background: linear-gradient(120deg, var(--brand-deep), var(--brand) 70%, #DB8759); color: #fff; border-radius: var(--radius); padding: 44px 48px; display: flex; align-items: center; justify-content: space-between; gap: 28px; } .promo h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 8px; } .promo p { opacity: .85; max-width: 520px; } .promo .btn { background: #fff; color: var(--brand-deep); } .promo .btn:hover { background: var(--brand-tint); } /* How it works */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; } .step .num { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-deep); font-family: var(--font-display); font-size: 19px; font-weight: 600; margin-bottom: 16px; } .step h3 { font-size: 19px; margin-bottom: 8px; } .step p { color: var(--ink-2); font-size: 14px; } /* Shop / filters ------------------------------------------------------------------ */ .shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 32px; align-items: start; } .shop-layout > * { min-width: 0; } .filters { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; position: sticky; top: 16px; } /* Mobile filter-drawer controls — hidden on desktop, shown in the ≤1024px block */ .filter-toggle { display: none; } .filters-drawer-head { display: none; } .filters-backdrop { display: none; } .filters h3 { font-size: 17px; margin-bottom: 4px; } .filter-group { padding: 14px 0; border-top: 1px solid var(--line); } .filter-group:first-of-type { border-top: 0; } .filter-group h4 { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } /* Foldable filter groups */ details.filter-group summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; } details.filter-group summary::-webkit-details-marker { display: none; } details.filter-group summary h4 { margin-bottom: 0; transition: color .15s ease; } details.filter-group summary:hover h4 { color: var(--brand-dark); } details.filter-group summary::after { content: ''; width: 8px; height: 8px; flex: none; margin-left: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .18s ease; margin-top: -4px; } details.filter-group[open] summary::after { transform: rotate(225deg); margin-top: 4px; } details.filter-group .filter-options { padding-top: 10px; } .filter-group label { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 14px; color: var(--ink-2); cursor: pointer; } .filter-group input[type="radio"], .filter-group input[type="checkbox"] { accent-color: var(--brand); width: 15px; height: 15px; } .price-inputs { display: flex; gap: 8px; } .price-inputs input { width: 100%; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); outline: none; font-size: 13.5px; } .price-inputs input:focus { border-color: var(--brand); } .shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .shop-toolbar .count { color: var(--muted); font-size: 14px; } .select { padding: 9px 34px 9px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238C7F73' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center; appearance: none; outline: none; font-size: 13.5px; font-weight: 500; cursor: pointer; } .select:focus { border-color: var(--brand); } .chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; } .chip { padding: 7px 15px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); font-size: 13px; font-weight: 600; color: var(--ink-2); transition: all .15s ease; } .chip:hover { border-color: var(--brand); color: var(--brand-dark); } .chip.active { background: var(--ink); border-color: var(--ink); color: #fff; } /* Pagination */ .pagination-wrap { margin-top: 40px; display: flex; justify-content: center; } .pagination-wrap nav { display: flex; gap: 6px; } /* Page-number tiles */ .pagination-wrap a, .pagination-wrap span { min-width: 40px; height: 40px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-size: 14px; font-weight: 600; color: var(--ink-2); transition: all .15s ease; } .pagination-wrap a:hover { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-tint); } .pagination-wrap .current { background: var(--brand); border-color: var(--brand); color: #fff; } .pagination-wrap .disabled { opacity: .4; } /* Product page --------------------------------------------------------------------- */ .breadcrumbs { font-size: 13px; color: var(--muted); padding: 18px 0; display: flex; gap: 8px; flex-wrap: wrap; } .breadcrumbs a:hover { color: var(--brand-dark); } .product-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; padding-bottom: 56px; } .gallery-main { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--brand-tint); aspect-ratio: 4 / 5; position: relative; } .gallery-main img { width: 100%; height: 100%; object-fit: cover; } .gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; } .gallery-thumbs button { flex: 0 0 76px; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; background: none; padding: 0; opacity: .7; transition: all .15s ease; } .gallery-thumbs button img { width: 100%; height: 100%; object-fit: cover; } .gallery-thumbs button.active, .gallery-thumbs button:hover { border-color: var(--brand); opacity: 1; } .product-info h1 { font-size: clamp(26px, 3vw, 36px); margin: 6px 0 14px; } .product-price { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; } .product-price .now { font-family: var(--font-display); font-size: 32px; font-weight: 600; color: var(--brand-dark); } .product-price .was { font-size: 17px; color: var(--muted); text-decoration: line-through; } .negotiable-tag { font-size: 12px; font-weight: 700; color: var(--ok); background: #EAF3ED; padding: 4px 10px; border-radius: 999px; } .spec-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; } .spec-table td { padding: 9px 0; border-bottom: 1px dashed var(--line); } .spec-table td:first-child { color: var(--muted); width: 38%; } .spec-table td:last-child { font-weight: 600; } .product-desc { color: var(--ink-2); white-space: pre-line; margin: 18px 0 26px; } .seller-box { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 20px; margin-top: 22px; } .seller-box-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--brand-soft); } .avatar-lg { width: 96px; height: 96px; } .seller-box-head .name { font-weight: 700; font-size: 15.5px; } .seller-box-head .meta { font-size: 13px; color: var(--muted); } .stars { color: var(--brand); letter-spacing: 1px; font-size: 14px; } .contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .contact-row .btn { width: 100%; } .reveal-phone { font-variant-numeric: tabular-nums; } .msg-box textarea { width: 100%; min-height: 84px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); outline: none; resize: vertical; margin-bottom: 10px; } .msg-box textarea:focus { border-color: var(--brand); } .safety-note { margin-top: 16px; font-size: 12.5px; color: var(--muted); background: var(--brand-tint); border: 1px dashed var(--brand-soft); border-radius: var(--radius-sm); padding: 12px 14px; } /* Forms ---------------------------------------------------------------------------- */ .form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); } .auth-wrap { max-width: 440px; margin: 56px auto; padding: 0 20px; } .auth-wrap .logo { display: block; text-align: center; margin-bottom: 24px; } .auth-wrap h1 { font-size: 28px; text-align: center; margin-bottom: 6px; } .auth-wrap .sub { text-align: center; color: var(--muted); margin-bottom: 26px; font-size: 14px; } .field { margin-bottom: 18px; } .field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; color: var(--ink-2); } .field .hint { font-size: 12px; color: var(--muted); margin-top: 5px; } .input, .field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="number"], .field input[type="tel"], .field select, .field textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); outline: none; transition: border-color .15s ease; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); background: #fff; } .field textarea { min-height: 130px; resize: vertical; } .field .error { color: var(--danger); font-size: 12.5px; margin-top: 5px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } .checkbox-label { display: flex; gap: 9px; align-items: center; font-size: 14px; color: var(--ink-2); cursor: pointer; } .checkbox-label input { accent-color: var(--brand); width: 16px; height: 16px; } /* Alerts */ .alert { padding: 13px 18px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; margin-bottom: 20px; } .alert-success { background: #EAF3ED; color: #2F5A40; border: 1px solid #CBE2D3; } .alert-error { background: #FFF1F0; color: #8A3320; border: 1px solid #F0D4CB; } .alert-info { background: #FFF6E9; color: #7A4E12; border: 1px solid #F2DFC2; } .verify-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .verify-banner form { margin: 0; flex: none; } /* Dashboard -------------------------------------------------------------------------- */ .dash-layout { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start; padding: 40px 0 64px; } .dash-nav { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; position: sticky; top: 16px; } .dash-nav a { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; color: var(--ink-2); transition: all .13s ease; } .dash-nav a:hover { background: var(--brand-tint); color: var(--brand-dark); } .dash-nav a.active { background: var(--brand); color: #fff; } .dash-nav hr { border: 0; border-top: 1px solid var(--line); margin: 10px 6px; } .page-title { font-size: clamp(24px, 3vw, 32px); margin-bottom: 6px; } .page-sub { color: var(--muted); margin-bottom: 28px; font-size: 14.5px; } .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; } .stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; } .stat .label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .stat .value { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin-top: 4px; } .stat .value.accent { color: var(--brand-dark); } .table-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .table-scroll { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; } .data-table th { text-align: left; padding: 13px 18px; background: var(--brand-tint); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); } .data-table td { padding: 13px 18px; border-top: 1px solid var(--line); vertical-align: middle; } .data-table .thumb { width: 46px; height: 56px; border-radius: 7px; object-fit: cover; } .row-actions { display: flex; gap: 6px; flex-wrap: wrap; } .status-pill { font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; text-transform: capitalize; } .status-active { background: #EAF3ED; color: #2F5A40; } .status-sold { background: #EEE9E2; color: #6C6157; } .status-draft { background: #F0EBFA; color: #5A4A8A; } .status-suspended { background: #FFF1F0; color: #8A3320; } /* Messages ---------------------------------------------------------------------------- */ .chat-layout { display: grid; grid-template-columns: 320px 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); min-height: 560px; } .chat-list { border-right: 1px solid var(--line); overflow-y: auto; max-height: 660px; } .chat-item { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); transition: background .12s ease; } .chat-item:hover { background: var(--brand-tint); } .chat-item.active { background: var(--brand-soft); } .chat-item img.thumb { width: 46px; height: 46px; border-radius: var(--radius-sm); object-fit: cover; } .chat-item .who { font-weight: 700; font-size: 14px; } .chat-item .last { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; } .chat-item .unread-dot { width: 9px; height: 9px; background: var(--brand); border-radius: 50%; margin-left: auto; margin-top: 6px; flex: none; } .chat-pane { display: flex; flex-direction: column; } .chat-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--paper); } .chat-head img { width: 42px; height: 42px; border-radius: var(--radius-sm); object-fit: cover; } .chat-body { flex: 1; padding: 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; background: #FAFAFA; } .bubble { max-width: 68%; padding: 10px 15px; border-radius: 16px; font-size: 14px; line-height: 1.5; } .bubble.mine { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; } .bubble.theirs { align-self: flex-start; background: #F1F1F1; color: var(--ink); border-bottom-left-radius: 4px; } .bubble time { display: block; font-size: 10.5px; opacity: .65; margin-top: 3px; } .chat-input { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line); } .chat-input textarea { flex: 1; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); resize: none; height: 48px; outline: none; background: var(--paper); } .chat-input textarea:focus { border-color: var(--brand); } /* Seller profile ------------------------------------------------------------------------ */ .profile-head { display: flex; gap: 24px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; margin: 32px 0; flex-wrap: wrap; } .profile-head h1 { font-size: 28px; } .profile-head .bio { color: var(--ink-2); max-width: 560px; margin-top: 6px; } .profile-head .meta { color: var(--muted); font-size: 13.5px; margin-top: 4px; } .review { border-top: 1px solid var(--line); padding: 16px 0; } .review .who { font-weight: 700; font-size: 14px; } .review p { color: var(--ink-2); font-size: 14px; margin-top: 4px; } /* Footer ----------------------------------------------------------------------------------- */ .site-footer { background: var(--ink); color: #B0B0B0; margin-top: 72px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding: 56px 0 40px; } .site-footer .logo { color: #fff; } .site-footer p { font-size: 13.5px; line-height: 1.7; } .site-footer h4 { color: #fff; font-family: var(--font-body); font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; } .site-footer ul { list-style: none; display: grid; gap: 9px; font-size: 14px; } .site-footer ul a:hover { color: #fff; } .newsletter { display: flex; margin-top: 14px; } .newsletter input { flex: 1; padding: 11px 14px; border: 1px solid #444444; background: #262626; border-radius: 999px 0 0 999px; color: #fff; outline: none; } .newsletter button { padding: 0 20px; border: 0; border-radius: 0 999px 999px 0; background: var(--brand); color: #fff; font-weight: 700; } .newsletter button:hover { background: var(--brand-dark); } .footer-bottom { border-top: 1px solid #333333; padding: 20px 0; display: flex; justify-content: space-between; gap: 12px; font-size: 13px; flex-wrap: wrap; } /* Utility ------------------------------------------------------------------------------------ */ .empty-state { text-align: center; padding: 70px 20px; color: var(--muted); } .empty-state .emoji { font-size: 46px; margin-bottom: 14px; } .empty-state h3 { color: var(--ink); font-size: 21px; margin-bottom: 6px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mb-2 { margin-bottom: 16px; } .text-muted { color: var(--muted); } .prose { max-width: 760px; } .prose h2 { margin: 28px 0 10px; font-size: 24px; } .prose p { margin-bottom: 14px; color: var(--ink-2); } /* Responsive ---------------------------------------------------------------------------------- */ @media (max-width: 1024px) { .listing-grid { grid-template-columns: repeat(3, 1fr); } .cat-grid { grid-template-columns: repeat(2, 1fr); } .hero-inner { grid-template-columns: 1fr; padding: 48px 0; } .hero-art { display: none; } /* Results first, filters after — shoppers see items immediately */ .shop-layout { display: flex; flex-direction: column; } /* Every child pinned to 100% width so the carousel scrolls inside, not the page */ .shop-layout > * { width: 100%; min-width: 0; } /* Filters become an off-canvas drawer opened from the "Filters" button up top, so shoppers no longer have to scroll past every result to reach them. */ .filter-toggle { display: inline-flex; } /* Floating panel: inset from every edge with rounded corners, so it reads as a card hovering over the results rather than a slab welded to the screen edge. */ .shop-layout > aside.filters { position: fixed; top: 12px; bottom: 12px; left: 12px; z-index: 200; width: calc(100% - 24px); max-width: 360px; height: auto; margin: 0; border: 1px solid var(--line); border-radius: 20px; padding: 20px; background: var(--card); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; transform: translateX(calc(-100% - 16px)); opacity: 0; transition: transform .28s cubic-bezier(.22,.8,.3,1), opacity .2s ease; box-shadow: 0 18px 50px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.10); } .shop-layout > aside.filters.open { transform: translateX(0); opacity: 1; } .filters-drawer-head { display: flex; align-items: center; justify-content: space-between; margin: -20px -20px 14px; padding: 15px 18px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 16px; position: sticky; top: -20px; background: var(--card); z-index: 1; border-radius: 20px 20px 0 0; } .filters-close { border: 0; background: none; font-size: 18px; line-height: 1; width: 34px; height: 34px; border-radius: 50%; color: var(--ink-2); display: grid; place-items: center; } .filters-close:hover { background: var(--brand-tint); color: var(--brand-dark); } .filters-backdrop { display: block; position: fixed; inset: 0; z-index: 199; background: rgba(20,14,10,.42); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity .25s ease; } .filters-backdrop.open { opacity: 1; visibility: visible; } .product-layout { grid-template-columns: 1fr; gap: 30px; } .footer-grid { grid-template-columns: 1fr 1fr; } .stat-grid { grid-template-columns: repeat(2, 1fr); } .dash-layout { grid-template-columns: 1fr; } .dash-nav { position: static; display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 8px; } .dash-nav a { flex: none; } .dash-nav hr { display: none; } .chat-layout { grid-template-columns: 1fr; } .chat-list { display: none; } } @media (max-width: 640px) { .container { padding: 0 16px; } .listing-grid, .listing-grid.cols-3 { grid-template-columns: repeat(2, 1fr); gap: 12px; } .steps { grid-template-columns: 1fr; } .form-row, .form-row-3 { grid-template-columns: 1fr; } /* Shop toolbar: result count on its own line, then Filters (left) and sort (right) as one matched pair of half-width pills. */ .shop-toolbar-results { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; } .shop-toolbar-results .count { grid-column: 1 / -1; order: -1; } .shop-toolbar-results .filter-toggle, .shop-toolbar-results form, .shop-toolbar-results .select { width: 100%; height: 42px; margin: 0; } .shop-toolbar-results .filter-toggle { justify-content: center; } .shop-toolbar-results .select { padding-left: 14px; text-align: left; } /* Header: compact two-row layout */ .header-inner { flex-wrap: wrap; gap: 10px; padding: 12px 0; } .logo { font-size: 21px; } .icon-link { width: 36px; height: 36px; } .search-form { order: 3; max-width: none; flex-basis: 100%; } .search-form input { padding: 10px 42px 10px 15px; font-size: 14px; } /* Keep the desktop-style horizontal, swipeable category bar on mobile — no hamburger dropdown */ .nav-toggle { display: none; } .topbar { display: none; } /* Row cards: tighter, thumb-friendly */ .row-card { grid-template-columns: 104px 1fr; gap: 12px; padding: 12px; } .row-title { font-size: 15px; } .row-tags .tag-time { display: none; } .row-side { padding-top: 10px; } .row-price .now { font-size: 19px; } .row-side-actions .btn { padding: 8px 14px; } .ad-flag { top: -9px; right: 10px; font-size: 9.5px; padding: 3px 9px; } /* Carousel: smaller cards; keep the prev/next arrows (nudged inside the edges) */ .carousel-card { flex: 0 0 138px; } .carousel-btn { display: grid; width: 34px; height: 34px; font-size: 16px; } .carousel-btn.prev { left: 2px; } .carousel-btn.next { right: 2px; } .trending-strip h2 { font-size: 18px; } .promo { flex-direction: column; text-align: center; padding: 30px 20px; } .footer-grid { grid-template-columns: 1fr; gap: 26px; } .contact-row { grid-template-columns: 1fr; } .hero-stats { gap: 20px; } .hero-stats strong { font-size: 21px; } .section { padding: 36px 0; } .section-head { margin-bottom: 16px; } .page-title { font-size: 22px; } .form-card { padding: 20px 16px; } .profile-head { padding: 20px 16px; gap: 14px; } .product-info h1 { font-size: 23px; } .product-price .now { font-size: 26px; } .gallery-thumbs button { flex: 0 0 62px; } .bubble { max-width: 84%; } .chat-body { padding: 14px; } .chat-layout { min-height: 70vh; } .stat .value { font-size: 22px; } .data-table td, .data-table th { padding: 10px 12px; } .earn-step { gap: 11px; } .earn-icon { width: 32px; height: 32px; font-size: 16px; border-radius: 8px; } } /* ============ Affiliate: ways to earn ============ */ .earn-card h3 { font-size: 17px; } .earn-steps { list-style: none; margin: 4px 0 0; padding: 0; counter-reset: earn; } .earn-step { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); } .earn-step:first-child { border-top: 0; } .earn-icon { flex: none; width: 38px; height: 38px; display: grid; place-items: center; font-size: 19px; background: var(--brand-tint); border-radius: 10px; } .earn-body { min-width: 0; } .earn-body h4 { font-size: 14.5px; margin-bottom: 2px; } .earn-body h4::after { counter-increment: earn; content: " · way " counter(earn) " of 3"; font-size: 11.5px; font-weight: 500; color: var(--muted); } .earn-body p { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; max-width: 65ch; } .earn-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .earn-tier { font-size: 12px; color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; } /* ============ Pagination ============ */ .pagination-wrap .pager { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; } /* Previous / Next — pill buttons, clearly distinct from the number tiles */ .pagination-wrap .pager-btn { width: auto; min-width: 0; height: 40px; padding: 0 20px; gap: 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); font-size: 14px; font-weight: 600; color: var(--ink); } .pagination-wrap a.pager-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; background-clip: padding-box; } .pagination-wrap .pager-btn.disabled { opacity: 1; cursor: default; color: var(--muted); background: var(--paper); border-color: var(--line); } /* Prev sits at the start, Next at the end; small breathing room from the tiles */ .pagination-wrap .pager > a.pager-btn[rel="prev"], .pagination-wrap .pager > span.pager-btn:first-child { margin-right: 4px; } .pagination-wrap .pager > a.pager-btn[rel="next"], .pagination-wrap .pager > span.pager-btn:last-child { margin-left: 4px; } /* ============ Stat cards ============ */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; } .stat-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 16px; text-align: center; } .stat-card .stat-value { font-size: 24px; font-weight: 800; color: var(--ink); } .stat-card .stat-label { font-size: 13px; color: var(--ink-2); margin-top: 2px; } /* ============ Package cards ============ */ .pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; align-items: stretch; } .pkg-card { position: relative; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; padding: 24px 22px; display: flex; flex-direction: column; transition: all .15s ease; } .pkg-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); } .pkg-card.featured { border-color: var(--brand); box-shadow: 0 6px 24px rgba(0,0,0,.07); } .pkg-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 4px 14px; border-radius: 999px; text-transform: uppercase; } .pkg-name { font-size: 17px; font-weight: 700; } .pkg-price { font-size: 30px; font-weight: 800; margin: 10px 0 2px; } .pkg-price small { font-size: 13px; font-weight: 600; color: var(--ink-2); } .pkg-perks { list-style: none; padding: 0; margin: 14px 0 18px; flex: 1; } .pkg-perks li { padding: 6px 0; font-size: 14px; color: var(--ink-2); border-bottom: 1px dashed var(--line); } .pkg-perks li:last-child { border-bottom: 0; } .pkg-perks li::before { content: "✓"; color: var(--brand); font-weight: 800; margin-right: 9px; } /* ============ Demo login ============ */ .demo-login { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); } .demo-login h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); margin-bottom: 10px; } .demo-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .demo-roles .btn { justify-content: center; } /* Mobile carousel sizing (kept last for precedence) */ @media (max-width: 640px) { .carousel .carousel-card { flex: 0 0 138px; } } /* ============ Payment methods (checkout) ============ */ .pay-methods { display: grid; gap: 10px; margin: 10px 0 16px; } .pay-method { display: block; border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: all .15s ease; } .pay-method:hover { border-color: var(--brand); } .pay-method.selected { border-color: var(--brand); background: var(--brand-tint); } .pay-method input { margin-right: 8px; accent-color: var(--brand); } .pay-method-head { font-weight: 700; } .pay-logo { font-size: 15px; } .pay-method-sub { display: block; font-size: 13px; color: var(--ink-2); margin-top: 4px; margin-left: 24px; } .pay-panel { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin-bottom: 4px; background: var(--paper); } .pay-panel p { font-size: 14px; color: var(--ink-2); margin-bottom: 10px; } .pay-qr { width: 220px; height: 220px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; } .pay-method-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .pay-total { font-size: 15px; font-weight: 700; color: var(--brand-dark); white-space: nowrap; } /* Price breakdown so gateway fees are never a surprise */ .pay-summary { border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 12px 14px; margin-bottom: 14px; } .pay-summary > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-2); padding: 3px 0; } .pay-summary-total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px !important; font-weight: 700; color: var(--ink) !important; font-size: 15px !important; } .pay-steps { margin: 0 0 14px 18px; padding: 0; font-size: 14px; color: var(--ink-2); } .pay-steps li { padding: 3px 0; } .req { color: var(--brand); font-weight: 700; } /* Verified seller badge — earned by holding an active paid plan */ .verified-badge { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; background: #E8F1FE; color: #1B5FBF; border: 1px solid #C7DDFA; } .verified-badge.lg { font-size: 13px; padding: 5px 12px; } .tag-verified { background: #E8F1FE !important; color: #1B5FBF !important; border-color: #C7DDFA !important; font-weight: 700; } /* Compact admin row controls */ .inline-form { display: flex; align-items: center; gap: 6px; } .select-xs, .input-xs { padding: 6px 10px; font-size: 12.5px; } .select-xs { padding-right: 28px; background-position: right 10px center; } .input-xs { width: 105px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); outline: none; } .input-xs:focus { border-color: var(--brand); } /* Package orders awaiting manual payment review */ .order-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-top: 10px; background: var(--card); } .order-card.is-pending { border-color: #F2DFC2; background: #FFFCF7; } .order-main { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; } .order-proof { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); } .order-proof code { background: var(--paper); padding: 1px 6px; border-radius: 5px; font-size: 12.5px; } .receipt-thumb { display: block; text-align: center; font-size: 12px; font-weight: 600; color: var(--brand-dark); flex: none; } .receipt-thumb img { display: block; width: 96px; height: 96px; object-fit: cover; background: #fff; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 4px; transition: transform .15s ease; } .receipt-thumb:hover img { transform: scale(1.04); border-color: var(--brand); } .order-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; } .input-note { width: 190px; padding: 7px 12px; font-size: 13px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); outline: none; } .input-note:focus { border-color: var(--brand); } /* ============ FAQ (affiliate) ============ */ .faq-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .faq-langs { display: inline-flex; gap: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 3px; } .faq-lang { border: 0; background: transparent; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: all .15s ease; } .faq-lang:hover { color: var(--brand-dark); } .faq-lang.active { background: var(--brand); color: #fff; } .faq-list { display: flex; flex-direction: column; gap: 8px; } .faq-item { border: 1px solid var(--line); border-radius: 12px; padding: 4px 16px; } .faq-item summary { cursor: pointer; padding: 12px 0; font-weight: 600; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::before { content: "+"; display: inline-block; width: 18px; color: var(--brand); font-weight: 800; } .faq-item[open] summary::before { content: "–"; } .faq-answer { padding: 0 0 14px 18px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }