:root { --brand: #4f46e5; --brand-dark: #4338ca; --brand-light: #eef2ff; --secondary: #0f766e; --accent: #f59e0b; --success: #16a34a; --danger: #dc2626; --ink: #1e2130; --heading: #1e2130; --link: #4f46e5; --muted: #6b7280; --bg: #f6f7fb; --card-bg: #ffffff; --border: #e8e9f2; --radius: 14px; --font-body: 'Inter'; --font-heading: 'Inter'; --font-button: 'Inter'; --heading-weight: 800; --body-line-height: 1.6; --shadow: 0 6px 24px rgba(30, 33, 48, .06); --shadow-lg: 0 14px 40px rgba(30, 33, 48, .12); /* Storefront theme-customizer tokens — set per-website in layouts/shop.php. Fall back to the values above (and sensible literals) so admin/vendor/ auth layouts, which never set these, render exactly as before. */ --btn-bg: var(--brand); --btn-text: #ffffff; --btn-radius: 10px; --card-shadow: var(--shadow); --card-border-width: 1px; --container-width: 1320px; --header-height: auto; --section-spacing: 3rem; } /* Dark palette lives in one place, applied two ways: explicitly via [data-theme="dark"] (user picked Dark — applies regardless of OS setting), and via prefers-color-scheme guarded to skip an explicit Light choice (user picked System and their OS happens to be in dark mode). Bootstrap 5.3 renders headings, form labels, and several components from its own --bs-* variables rather than inheriting `color` — so a theme that only overrides our own custom properties leaves those elements stuck in Bootstrap's light-mode defaults (near-invisible dark text on a dark card). Overriding the --bs-* variables Bootstrap actually reads is the documented way to theme it. The per-website Theme Customizer also writes its own `:root{...}` block inline in , after this stylesheet, setting --ink/--bg/--heading/ --link/--border to that site's light-mode brand colors — same selector specificity as a bare [data-theme="dark"], so without a boost here it would win purely on source order and silently undo dark mode's text colors (dark card, but still light-mode-dark heading/body text on it). :root[data-theme="dark"] carries one extra selector, so it always wins regardless of where the inline block falls. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #eef0f8; --heading: #eef0f8; --link: #818cf8; --muted: #9aa0b4; --bg: #10121b; --card-bg: #171a26; --border: #262a3a; --brand-light: #1c1f33; --shadow: 0 6px 24px rgba(0, 0, 0, .35); --bs-body-color: #eef0f8; --bs-body-color-rgb: 238, 240, 248; --bs-body-bg: #10121b; --bs-body-bg-rgb: 16, 18, 27; --bs-heading-color: #eef0f8; --bs-emphasis-color: #ffffff; --bs-secondary-color: #9aa0b4; --bs-tertiary-color: #7d8299; --bs-border-color: #262a3a; --bs-border-color-translucent: #262a3a; --bs-tertiary-bg: #1c1f33; --bs-secondary-bg: #171a26; --bs-link-color: #818cf8; --bs-link-hover-color: #a5b4fc; } } :root[data-theme="dark"] { --ink: #eef0f8; --heading: #eef0f8; --link: #818cf8; --muted: #9aa0b4; --bg: #10121b; --card-bg: #171a26; --border: #262a3a; --brand-light: #1c1f33; --shadow: 0 6px 24px rgba(0, 0, 0, .35); --bs-body-color: #eef0f8; --bs-body-color-rgb: 238, 240, 248; --bs-body-bg: #10121b; --bs-body-bg-rgb: 16, 18, 27; --bs-heading-color: #eef0f8; --bs-emphasis-color: #ffffff; --bs-secondary-color: #9aa0b4; --bs-tertiary-color: #7d8299; --bs-border-color: #262a3a; --bs-border-color-translucent: #262a3a; --bs-tertiary-bg: #1c1f33; --bs-secondary-bg: #171a26; --bs-link-color: #818cf8; --bs-link-hover-color: #a5b4fc; } * { box-sizing: border-box; } body { font-family: var(--font-body), -apple-system, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--ink); line-height: var(--body-line-height); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading), -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: var(--heading-weight); color: var(--heading); } a { text-decoration: none; } .text-muted-2 { color: var(--muted) !important; } .bg-brand { background: var(--brand) !important; } .text-brand { color: var(--brand) !important; } .bg-brand-2 { background: var(--secondary) !important; } .text-brand-2 { color: var(--secondary) !important; } .fw-800 { font-weight: 800; } .btn-brand { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-text); font-family: var(--font-button), -apple-system, 'Segoe UI', Roboto, sans-serif; font-weight: 600; border-radius: var(--btn-radius); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .btn-brand:hover { background: var(--brand-dark); color: var(--btn-text); transform: translateY(-1px); box-shadow: var(--shadow); } .btn-outline-brand { border: 1.5px solid var(--btn-bg); color: var(--btn-bg); border-radius: var(--btn-radius); font-weight: 600; font-family: var(--font-button), -apple-system, 'Segoe UI', Roboto, sans-serif; } .btn-outline-brand:hover { background: var(--btn-bg); color: var(--btn-text); } .card, .app-card { background: var(--card-bg); border: var(--card-border-width) solid var(--border); border-radius: var(--radius); box-shadow: var(--card-shadow); } .form-control, .form-select { border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg); color: var(--ink); padding: .55rem .85rem; } .form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(79,70,229,.15); } /* ---------------- Top announcement + header ---------------- */ .announce-bar { background: rgba(100, 116, 139, .55); color: #fff; font-size: .82rem; padding: 6px 0; position: relative; z-index: 1040; } .announce-bar .container { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: nowrap; } .announce-bar .announce-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .announce-bar .header-icon-btn { color: #fff; padding: 0; flex: 0 0 auto; } .announce-bar .header-icon-btn:hover { color: #fff; opacity: .8; } .site-header { background: var(--card-bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 1030; } .brand-logo { font-weight: 800; font-size: 1.5rem; color: var(--brand) !important; } .header-icon-btn { position: relative; color: var(--ink); font-size: 1.25rem; padding: 6px; } .header-icon-btn .badge-count { position: absolute; top: -2px; right: -6px; background: var(--accent); color: #fff; font-size: .62rem; padding: 1px 5px; border-radius: 999px; font-weight: 700; } /* ---------------- Order tracking timeline ---------------- */ .mh-timeline { position: relative; padding-left: 6px; } .mh-timeline-step { position: relative; display: flex; gap: 16px; padding-bottom: 28px; } .mh-timeline-step:last-child { padding-bottom: 0; } .mh-timeline-step::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--border); } .mh-timeline-step:last-child::before { display: none; } .mh-timeline-step.is-complete::before { background: var(--brand); } .mh-timeline-dot { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); background: var(--card-bg); display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 800; color: var(--muted); z-index: 1; } .mh-timeline-step.is-complete .mh-timeline-dot { background: var(--brand); border-color: var(--brand); color: #fff; } .mh-timeline-step.is-current .mh-timeline-dot { box-shadow: 0 0 0 4px var(--brand-light); } .mh-timeline-step:not(.is-complete) .mh-timeline-content { opacity: .55; } /* ---------------- Delivery location widget (Flipkart-style: flat text, no button chrome, brand blue) ---------------- */ .location-widget-btn { --fk-blue: #2874f0; display: inline-flex; align-items: center; gap: 8px; background: none; border: none; padding: 2px 0; margin: 0; max-width: 240px; cursor: pointer; text-align: left; line-height: 1.2; } .location-widget-pin { color: var(--fk-blue); font-size: 1.15rem; flex-shrink: 0; } .location-widget-text { display: flex; flex-direction: column; min-width: 0; } .location-widget-label { font-size: .72rem; color: var(--muted); font-weight: 400; } .location-widget-value { font-size: .86rem; font-weight: 600; color: var(--fk-blue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; display: inline-flex; align-items: center; gap: 2px; } .location-widget-btn:hover .location-widget-value { text-decoration: underline; } .location-widget-chevron { font-size: .7rem; flex-shrink: 0; } @media (max-width: 767.98px) { .location-widget-btn:not(.w-100) { max-width: 160px; } .location-widget-btn:not(.w-100) .location-widget-value { max-width: 120px; font-size: .82rem; } } .location-widget-btn.w-100 { max-width: 100%; } .location-widget-btn.w-100 .location-widget-value { max-width: none; } /* ---------------- Location picker modal ---------------- */ #locationModal .modal-dialog { max-width: 620px; } #locationModal .modal-content { border-radius: var(--radius); overflow: hidden; } .loc-step { display: none; } .loc-step.active { display: block; } .loc-current-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--card-bg); text-align: left; margin-bottom: 12px; cursor: pointer; } .loc-current-btn:hover { border-color: var(--brand); background: var(--brand-light); } .loc-current-btn i { font-size: 1.3rem; color: var(--brand); } .loc-current-btn .loc-btn-title { font-weight: 700; font-size: .92rem; color: var(--ink); } .loc-current-btn .loc-btn-sub { font-size: .76rem; color: var(--muted); } .loc-search-box { position: relative; margin-bottom: 12px; } .loc-search-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); z-index: 20; max-height: 240px; overflow-y: auto; display: none; } .loc-search-results.show { display: block; } .loc-search-result-item { padding: 10px 14px; cursor: pointer; font-size: .86rem; border-bottom: 1px solid var(--border); } .loc-search-result-item:last-child { border-bottom: none; } .loc-search-result-item:hover { background: var(--brand-light); } .loc-saved-address { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .loc-saved-address:hover { border-color: var(--brand); } .loc-saved-address.is-default { border-color: var(--brand); background: var(--brand-light); } #locMap { width: 100%; height: 260px; border-radius: 12px; background: var(--bg); } .loc-map-fallback { width: 100%; min-height: 140px; border-radius: 12px; background: var(--bg); border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .84rem; text-align: center; padding: 16px; } .loc-summary-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: .85rem; } .loc-summary-row:last-child { border-bottom: none; } .loc-summary-label { color: var(--muted); } .loc-summary-value { font-weight: 600; text-align: right; } @media (max-width: 575.98px) { #locationModal .modal-dialog { max-width: 100%; margin: 0; height: 100%; } #locationModal .modal-content { height: 100%; border-radius: 0; } #locationModal .modal-body { overflow-y: auto; } } .search-suggest-box { position: absolute; top: 100%; left: 0; right: 0; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); z-index: 1050; max-height: 420px; overflow-y: auto; display: none; } .search-suggest-item { display: flex; gap: 10px; padding: 10px 14px; align-items: center; border-bottom: 1px solid var(--border); } .search-suggest-item:hover { background: var(--brand-light); } .search-suggest-item img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; } .category-menu { background: var(--card-bg); border-bottom: 1px solid var(--border); } .category-menu .nav-link { color: var(--ink); font-weight: 500; font-size: .92rem; padding: 10px 14px; } .category-menu .nav-link:hover { color: var(--brand); } /* ---------------- Product cards ---------------- */ .product-card { background: var(--card-bg); border: var(--card-border-width) solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; height: 100%; display: flex; flex-direction: column; } .product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .product-card .thumb-wrap { position: relative; aspect-ratio: 1/1; background: var(--brand-light); overflow: hidden; } .product-card .thumb-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .product-card:hover .thumb-wrap img { transform: scale(1.06); } .product-card .badge-sale { position: absolute; top: 10px; left: 10px; background: var(--danger); color: #fff; font-weight: 700; font-size: .72rem; padding: 3px 8px; border-radius: 6px; } .wishlist-btn { position: absolute; top: 8px; right: 8px; background: var(--card-bg); border: 1px solid var(--border); width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .wishlist-btn.active { color: var(--danger); border-color: var(--danger); } .product-card .body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .product-card .title { font-size: .92rem; font-weight: 600; color: var(--ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; } .price-current { font-weight: 800; color: var(--ink); font-size: 1.05rem; } .price-old { text-decoration: line-through; color: var(--muted); font-size: .85rem; } .rating-stars { color: var(--accent); font-size: .82rem; } .section-title { font-weight: 800; font-size: 1.4rem; } .section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; } .view-all-link { font-weight: 600; font-size: .9rem; } /* skeleton loading */ .skeleton { background: linear-gradient(90deg, var(--border) 25%, var(--brand-light) 37%, var(--border) 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; border-radius: 8px; } @keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* hero slider */ .hero-slide { border-radius: var(--radius); overflow: hidden; background: var(--brand-light); } .hero-slide img { width: 100%; height: 100%; object-fit: cover; } /* footer */ .site-footer { background: var(--ink); color: #cfd3e6; } [data-theme="dark"] .site-footer, body:not([data-theme]) .site-footer { background: #14161f; } .site-footer a { color: #cfd3e6; } .site-footer a:hover { color: #fff; } .footer-title { color: #fff; font-weight: 700; margin-bottom: 14px; } /* ---------------- Dashboards (admin/vendor/etc.) ---------------- */ .app-shell { display: flex; min-height: 100vh; } .app-sidebar { width: 260px; background: var(--card-bg); border-right: 1px solid var(--border); position: sticky; top: 0; height: 100vh; overflow-y: auto; flex-shrink: 0; z-index: 1040; } .app-sidebar .brand { padding: 20px; font-weight: 800; font-size: 1.25rem; color: var(--brand); border-bottom: 1px solid var(--border); } .app-sidebar .nav-link { color: var(--muted); padding: 10px 20px; font-weight: 500; font-size: .92rem; border-left: 3px solid transparent; display: flex; align-items: center; gap: 10px; } .app-sidebar .nav-link:hover { color: var(--brand); background: var(--brand-light); } .app-sidebar .nav-link.active { color: var(--brand); background: var(--brand-light); border-left-color: var(--brand); font-weight: 700; } .app-sidebar .nav-section { padding: 14px 20px 4px; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .app-main { flex: 1; min-width: 0; } .app-topbar { background: var(--card-bg); border-bottom: 1px solid var(--border); padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1030; } .app-content { padding: 24px; } .stat-card { padding: 20px; border-radius: var(--radius); background: var(--card-bg); border: var(--card-border-width) solid var(--border); box-shadow: var(--card-shadow); } .stat-card .icon-wrap { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } .stat-card .value { font-size: 1.6rem; font-weight: 800; } .stat-card .label { color: var(--muted); font-size: .82rem; } .table { color: var(--ink); } .table thead th { border-bottom: 2px solid var(--border); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; } .table td, .table th { vertical-align: middle; padding: .85rem .75rem; } .table-card { background: var(--card-bg); border: var(--card-border-width) solid var(--border); border-radius: var(--radius); overflow: hidden; } .badge-status { padding: 5px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; text-transform: capitalize; } .status-pending, .status-processing, .status-open, .status-requested { background: #fef3c7; color: #92400e; } .status-confirmed, .status-active, .status-approved, .status-paid, .status-delivered, .status-resolved, .status-published { background: #dcfce7; color: #166534; } .status-cancelled, .status-rejected, .status-failed, .status-suspended, .status-closed { background: #fee2e2; color: #991b1b; } .status-shipped, .status-out_for_delivery, .status-picked_up, .status-in_progress, .status-reached_nearby { background: #dbeafe; color: #1e40af; } .status-inactive, .status-draft, .status-expired, .status-paused { background: #f1f2f6; color: #4b5563; } .empty-state { text-align: center; padding: 60px 20px; color: var(--muted); } .empty-state i { font-size: 3rem; opacity: .4; } .avatar-circle { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--brand-light); } @media (max-width: 991px) { .app-sidebar { position: fixed; left: -280px; transition: left .25s ease; box-shadow: var(--shadow-lg); } .app-sidebar.show { left: 0; } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1035; } .sidebar-backdrop.show { display: block; } } .toast-container { z-index: 1080; } /* ---------------- Storefront theme-customizer layout hooks ---------------- */ /* Scoped to body.shop-theme (set only in layouts/shop.php) so these never affect the admin/vendor/partner/auth panels, which don't set the underlying --container-width/--section-spacing/--header-height vars. */ body.shop-theme .container { max-width: var(--container-width); } body.shop-theme .site-header { min-height: var(--header-height); } body.shop-theme .theme-section { margin-top: var(--section-spacing); margin-bottom: var(--section-spacing); } body.shop-theme .view-all-link, body.shop-theme .footer-title a { color: var(--link); } /* ---------------- Promotional card carousel ---------------- */ .promo-carousel-wrap { position: relative; } .promo-carousel-track { display: flex; gap: var(--promo-gap, 16px); overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .promo-carousel-track::-webkit-scrollbar { display: none; } .promo-carousel-track { scrollbar-width: none; } .promo-card { position: relative; flex: 0 0 calc((100% - (var(--promo-cards-desktop, 4) - 1) * var(--promo-gap, 16px)) / var(--promo-cards-desktop, 4)); scroll-snap-align: start; min-height: 260px; display: flex; flex-direction: column; justify-content: flex-end; background-size: cover; background-position: center; color: var(--ink); text-decoration: none; overflow: hidden; box-shadow: var(--card-shadow); transition: transform .2s ease, box-shadow .2s ease; } .promo-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.12); color: inherit; } .promo-card-mobile-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .promo-card-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--accent, #f59e0b); color: #fff; font-size: .7rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: .03em; } .promo-card-logo { position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; object-fit: contain; background: #fff; border-radius: 8px; padding: 4px; } .promo-card-body { position: relative; z-index: 1; padding: 16px; background: linear-gradient(0deg, rgba(255,255,255,.94) 60%, rgba(255,255,255,0)); } .promo-card:not([style*="background-image"]) .promo-card-body { background: none; } .promo-card-heading { font-size: 1.15rem; font-weight: 800; line-height: 1.2; } .promo-card-subtitle { font-size: .85rem; opacity: .85; margin-top: 2px; } .promo-card-offer { font-size: .8rem; font-weight: 600; margin-top: 6px; color: var(--brand); } .promo-card-product-image { max-width: 100%; max-height: 90px; object-fit: contain; margin: 8px 0; align-self: flex-start; } .promo-card-cta { display: inline-block; margin-top: 8px; padding: 6px 16px; border-radius: var(--btn-radius, 10px); background: var(--btn-bg, var(--brand)); color: var(--btn-text, #fff); font-size: .8rem; font-weight: 700; } .promo-card-bottom-text { font-size: .72rem; opacity: .75; margin-top: 6px; } .promo-card-terms { font-size: .65rem; opacity: .6; margin-top: 4px; } .promo-carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--card-bg, #fff); box-shadow: var(--card-shadow); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); opacity: .95; } .promo-carousel-arrow:hover { background: var(--brand); color: #fff; } .promo-carousel-arrow.is-prev { left: -6px; } .promo-carousel-arrow.is-next { right: -6px; } .promo-carousel-arrow:disabled { opacity: .3; cursor: default; } .promo-carousel-arrow:disabled:hover { background: var(--card-bg, #fff); color: var(--ink); } .promo-carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; } .promo-carousel-dots button { width: 7px; height: 7px; border-radius: 50%; border: none; background: var(--border); padding: 0; cursor: pointer; } .promo-carousel-dots button.active { background: var(--brand); width: 20px; border-radius: 4px; } @media (max-width: 991.98px) { .promo-card { flex-basis: calc((100% - (var(--promo-cards-tablet, 2) - 1) * var(--promo-gap, 16px)) / var(--promo-cards-tablet, 2)); } } @media (max-width: 575.98px) { .promo-card { flex-basis: calc((100% - (var(--promo-cards-mobile, 1) - 1) * var(--promo-gap, 16px)) / var(--promo-cards-mobile, 1)); min-height: 200px; } .promo-carousel-arrow { width: 32px; height: 32px; } } body.shop-theme .footer-title { font-family: var(--font-heading), -apple-system, 'Segoe UI', Roboto, sans-serif; } /* ---------------- Theme-driven Add to Cart / Buy Now button treatments ---------------- Each theme's button_style picks a genuinely different shape/weight/icon arrangement here, not just a recolor — see partials/product_buttons.php, which decides content per style, and this block, which decides shape. */ .theme-btn-arrow { border-radius: 0; text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; display: flex; align-items: center; justify-content: center; gap: .4rem; } .theme-btn-arrow-glyph { transition: transform .15s ease; } .theme-btn-arrow:hover .theme-btn-arrow-glyph { transform: translateX(3px); } .theme-btn-compact { border-radius: 999px; padding: .3rem .9rem; font-size: .78rem; font-weight: 700; width: auto; display: inline-flex; } .theme-btn-icon-leading { border-radius: 999px; font-weight: 600; } .theme-btn-bold-primary { border-radius: 2px; font-weight: 800; letter-spacing: .03em; padding: .65rem 1rem; font-size: .85rem; box-shadow: 0 4px 14px rgba(0,0,0,.18); } .theme-btn-bold-secondary { border-radius: 2px; font-weight: 700; padding: .5rem 1rem; font-size: .8rem; } /* ---------------- Theme-driven product card layouts ---------------- Three genuinely different structures (see partials/product_card_*.php), not the same card recolored. */ /* Compact / Minimal Store: tiny thumbnail, price-led, single inline action */ .product-card-compact .thumb-wrap-compact { aspect-ratio: 4/3; } .product-card-compact .body-compact { padding: 10px 12px; gap: 4px; } .product-card-compact .title { font-size: .85rem; font-weight: 500; min-height: auto; -webkit-line-clamp: 1; } .product-card-compact .price-current { font-size: .95rem; } /* Marketplace / Premium Store: seller line, delivery note, rating pill, two stacked actions */ .product-card-marketplace .thumb-wrap-marketplace { aspect-ratio: 1/1; } .product-card-marketplace .body-marketplace { padding: 14px 16px; gap: 4px; } .product-card-marketplace .seller-line { font-size: .74rem; } .product-card-marketplace .delivery-line { font-size: .74rem; } .product-card-marketplace .rating-pill { background: #16a34a; color: #fff; font-weight: 700; font-size: .72rem; padding: 1px 7px; border-radius: 4px; display: inline-flex; align-items: center; gap: 3px; } .product-card-marketplace .title { font-size: .95rem; font-weight: 700; }