body.my-dashboard { --g2p-dash-paper: #f6f2ea; --g2p-dash-panel: rgba(255, 253, 247, 0.94); --g2p-dash-panel-solid: #fffdf7; --g2p-dash-ink: #172018; --g2p-dash-muted: #687064; --g2p-dash-green: #2f4f35; --g2p-dash-orange: #c85f2d; --g2p-dash-line: rgba(47, 79, 53, 0.16); --g2p-dash-shadow: 0 18px 55px rgba(28, 32, 24, 0.12); /* Flat, clean paper — no gradient, no panel box, no topo. The background runs uniformly to the footer (see .wrapper below, which is now chromeless). */ background-color: var(--g2p-dash-paper) !important; background-image: none !important; color: var(--g2p-dash-ink); font-family: "Inter", "Helvetica Neue", Arial, sans-serif; } /* Inner containers stay transparent so the .wrapper panel (see below) shows through. NOTE: .wrapper is deliberately NOT in this list — it owns the warm panel gradient. */ body.my-dashboard .content, body.my-dashboard .content-wrapper, body.my-dashboard #main-area, body.my-dashboard .main { background: transparent !important; } body.my-dashboard #header-dashboard.header-dashboard { min-height: 68px; padding: 0 32px; background: var(--g2p-dash-paper) !important; border-bottom: 1px solid rgba(47, 79, 53, 0.12); box-shadow: 0 8px 24px rgba(24, 32, 24, 0.04); overflow: visible; } /* dashboard header marketing nav (replaces the buyer/seller pill) */ body.my-dashboard #header-dashboard .g2p-dash-topnav { display: flex; align-items: center; gap: 24px; margin-left: 16px; } body.my-dashboard #header-dashboard .g2p-dash-topnav a { color: #41463b; font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; transition: color 0.15s ease; } body.my-dashboard #header-dashboard .g2p-dash-topnav a:hover { color: #2f4f35; } @media (max-width: 1180px) { body.my-dashboard #header-dashboard .g2p-dash-topnav { display: none; } } body.my-dashboard #header-dashboard .header-logo.dashboard-user { min-height: 68px; gap: 18px; align-items: center; } body.my-dashboard #header-dashboard .logo-dashboard { display: flex; align-items: center; width: 138px; height: 38px; } body.my-dashboard #header-dashboard .logo-dashboard img { display: block; width: 100%; max-width: 138px; max-height: 38px; object-fit: contain; } body.my-dashboard #header-dashboard .dropdown-toggle-custom { min-height: 40px; padding: 0 18px; border: 1px solid var(--g2p-dash-line); border-radius: 999px; background: rgba(255, 253, 247, 0.78); color: var(--g2p-dash-ink); font-weight: 700; } body.my-dashboard #header-dashboard .header-actions { align-items: center; gap: 10px; overflow: visible; } body.my-dashboard #header-dashboard .header-actions-item { position: relative; overflow: visible; } body.my-dashboard #header-dashboard .header-actions-link { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--g2p-dash-line); border-radius: 999px; background: rgba(255, 253, 247, 0.82); color: var(--g2p-dash-green); transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; } body.my-dashboard #header-dashboard .header-actions-link:hover, body.my-dashboard #header-dashboard .header-actions-link:focus-visible { background: var(--g2p-dash-green); border-color: var(--g2p-dash-green); color: #fffdf7; transform: translateY(-1px); } body.my-dashboard #header-dashboard .header-actions-item.dropdown .header-actions-link[aria-expanded="true"] { background: var(--g2p-dash-green); border-color: var(--g2p-dash-green); color: #fffdf7; } body.my-dashboard #header-dashboard .g2p-message-action { width: auto; min-width: 124px; gap: 8px; padding: 0 15px; background: rgba(47, 79, 53, 0.08); border-color: rgba(47, 79, 53, 0.18); font-weight: 800; letter-spacing: 0.01em; } body.my-dashboard #header-dashboard .g2p-message-action.is-active, body.my-dashboard #header-dashboard .g2p-message-action[aria-current="page"] { background: var(--g2p-dash-green); border-color: var(--g2p-dash-green); color: #fffdf7; } body.my-dashboard #header-dashboard .g2p-message-action .svg { flex: 0 0 auto; } body.my-dashboard #header-dashboard .g2p-message-action-label { display: inline-block; transform: translateY(0.5px); } body.my-dashboard #header-dashboard .g2p-dashboard-search-action .svg { width: 18px; height: 18px; fill: none; } body.my-dashboard #header-dashboard .header-actions-link .counts { position: absolute; top: -6px; right: -5px; display: grid; min-width: 18px; height: 18px; place-items: center; padding: 0 5px; border: 2px solid var(--g2p-dash-paper); border-radius: 999px; background: var(--g2p-dash-orange); color: #fffdf7; font-size: 10px; font-weight: 900; line-height: 1; box-shadow: 0 8px 18px rgba(200, 95, 45, 0.24); } body.my-dashboard #header-dashboard .header-actions-link .counts .heartbit { display: none; } body.my-dashboard #header-dashboard .dropdown-menu-account { width: min(334px, calc(100vw - 28px)); padding: 8px; margin-top: 12px !important; border: 1px solid var(--g2p-dash-line); border-radius: 24px; background: rgba(255, 253, 247, 0.98); box-shadow: 0 22px 70px rgba(25, 32, 24, 0.18); overflow: hidden; } body.my-dashboard #header-dashboard .dropdown-menu-account::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(135deg, rgba(200, 95, 45, 0.08), rgba(47, 79, 53, 0.04) 58%, rgba(255, 255, 255, 0)); } body.my-dashboard #header-dashboard .dropdown-menu-account .dropdown-menu-item { position: relative; z-index: 1; } body.my-dashboard #header-dashboard .dropdown-menu-account .profile.profile-account { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 78px; margin: 0 0 6px; padding: 13px 90px 13px 13px; border: 1px solid rgba(47, 79, 53, 0.13); border-radius: 20px; background: radial-gradient(circle at 100% 0%, rgba(200, 95, 45, 0.08), transparent 42%), linear-gradient(135deg, rgba(255, 253, 247, 0.94), rgba(244, 240, 230, 0.84)); } body.my-dashboard #header-dashboard .dropdown-menu-account .profile.profile-account::before { content: "Account"; position: absolute; top: 12px; right: 12px; padding: 4px 7px 3px; border: 1px solid rgba(200, 95, 45, 0.14); border-radius: 999px; background: rgba(255, 253, 247, 0.74); color: var(--g2p-dash-orange); font-size: 9px; font-weight: 900; letter-spacing: 0.18em; line-height: 1; text-transform: uppercase; } body.my-dashboard #header-dashboard .dropdown-menu-account .profile-image { width: 54px; height: 54px; min-width: 54px; display: inline-flex; align-items: center; justify-content: center; padding: 4px; margin: 0; border: 1px solid rgba(47, 79, 53, 0.14); border-radius: 18px; background: rgba(255, 253, 247, 0.88); box-shadow: inset 0 0 0 3px rgba(244, 240, 230, 0.7); overflow: hidden; box-sizing: border-box; } body.my-dashboard #header-dashboard .dropdown-menu-account .profile-avatar { display: block; width: 100%; height: 100%; border: 0; border-radius: 14px; background: rgba(47, 79, 53, 0.08); box-shadow: none; object-fit: contain; object-position: center; } body.my-dashboard #header-dashboard .dropdown-menu-account .profile-data { min-width: 0; padding: 0; } body.my-dashboard #header-dashboard .dropdown-menu-account .profile-name { display: block; margin: 0 0 2px; color: var(--g2p-dash-ink); font-family: "Georgia", "Times New Roman", serif; font-size: 17.5px; font-weight: 800; line-height: 1.05; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.my-dashboard #header-dashboard .dropdown-menu-account .profile-email { display: block; max-width: 100%; margin: 0; color: var(--g2p-dash-muted); font-family: Inter, "Helvetica Neue", Arial, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.my-dashboard #header-dashboard .dropdown-menu-account .dropdown-menu-link { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 10px 12px; border-radius: 14px; color: var(--g2p-dash-ink); font-size: 13px; font-weight: 750; text-decoration: none; transition: background 140ms ease, color 140ms ease, transform 140ms ease; } body.my-dashboard #header-dashboard .dropdown-menu-account .dropdown-menu-link .svg { width: 16px; height: 16px; color: var(--g2p-dash-green); flex: 0 0 16px; } body.my-dashboard #header-dashboard .dropdown-menu-account .dropdown-menu-link:hover, body.my-dashboard #header-dashboard .dropdown-menu-account .dropdown-menu-link:focus-visible { background: rgba(47, 79, 53, 0.09); color: var(--g2p-dash-green); transform: translateX(2px); } body.my-dashboard #header-dashboard .dropdown-menu-account .logout { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(47, 79, 53, 0.12); } body.my-dashboard #header-dashboard .dropdown-menu-account .logout .dropdown-menu-link:hover, body.my-dashboard #header-dashboard .dropdown-menu-account .logout .dropdown-menu-link:focus-visible { background: rgba(200, 95, 45, 0.1); color: var(--g2p-dash-orange); } body.my-dashboard .sidebar { background: rgba(255, 253, 247, 0.8) !important; border-right: 1px solid rgba(47, 79, 53, 0.12); box-shadow: 14px 0 34px rgba(25, 32, 24, 0.04); } body.my-dashboard .sidebar-body { background: transparent !important; } body.my-dashboard .dashboard-menu a, body.my-dashboard .dashboard-menu button, body.my-dashboard .menu-sub-link { border-radius: 14px; color: var(--g2p-dash-ink); font-weight: 700; } body.my-dashboard .dashboard-menu a:hover, body.my-dashboard .dashboard-menu button:hover, body.my-dashboard .menu-sub-link:hover, body.my-dashboard .dashboard-menu .is-active > a, body.my-dashboard .dashboard-menu .is-active > button, body.my-dashboard .menu-sub-link.is-active { background: rgba(47, 79, 53, 0.09); color: var(--g2p-dash-green); } body.my-dashboard .content-wrapper { max-width: 1180px; margin: 0 auto; padding: 42px 28px 72px; } body.my-dashboard .content-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; padding: 0; background: transparent !important; } body.my-dashboard .content-header-heading { color: var(--g2p-dash-ink); font-family: "Georgia", "Times New Roman", serif; font-size: clamp(38px, 5vw, 68px); font-weight: 800; letter-spacing: 0; line-height: 0.92; } body.my-dashboard .card, body.my-dashboard .card-tabs, body.my-dashboard .bg-gray, body.my-dashboard .section, body.my-dashboard .box { border: 1px solid rgba(47, 79, 53, 0.13) !important; border-radius: 24px !important; background: var(--g2p-dash-panel) !important; box-shadow: var(--g2p-dash-shadow); } body.my-dashboard .card-head, body.my-dashboard .card-body { border-color: rgba(47, 79, 53, 0.13) !important; } body.my-dashboard .nav-tabs { gap: 8px; border-bottom-color: rgba(47, 79, 53, 0.12); } body.my-dashboard .nav-tabs .nav-link { min-height: 42px; padding: 0 16px; border: 1px solid transparent !important; border-radius: 999px; color: var(--g2p-dash-muted); font-weight: 800; } body.my-dashboard .nav-tabs .is-active .nav-link, body.my-dashboard .nav-tabs .nav-link.active, body.my-dashboard .nav-tabs .nav-link:hover { background: var(--g2p-dash-green) !important; color: #fffdf7 !important; } body.my-dashboard .form input[type="text"], body.my-dashboard .form input[type="email"], body.my-dashboard .form input[type="password"], body.my-dashboard .form input[type="tel"], body.my-dashboard .form select, body.my-dashboard .form textarea, body.my-dashboard .form .field, body.my-dashboard .form .custom-select { min-height: 46px; border: 1px solid rgba(47, 79, 53, 0.16) !important; border-radius: 14px !important; background: rgba(255, 253, 247, 0.86) !important; color: var(--g2p-dash-ink); font-weight: 700; } body.my-dashboard .form input:focus, body.my-dashboard .form select:focus, body.my-dashboard .form textarea:focus { border-color: rgba(200, 95, 45, 0.58) !important; box-shadow: 0 0 0 4px rgba(200, 95, 45, 0.12) !important; } body.my-dashboard .btn, body.my-dashboard button.btn { border-radius: 999px; font-weight: 800; } body.my-dashboard .btn-brand, body.my-dashboard .btn-outline-brand:hover, body.my-dashboard .switch-group .is-active .btn-outline-brand { border-color: var(--g2p-dash-green) !important; background: var(--g2p-dash-green) !important; color: #fffdf7 !important; } body.my-dashboard .btn-outline-gray, body.my-dashboard .btn-outline-brand { border-color: rgba(47, 79, 53, 0.18) !important; background: rgba(255, 253, 247, 0.7) !important; color: var(--g2p-dash-green) !important; } body.my-dashboard .info-msg, body.my-dashboard .success-msg, body.my-dashboard .warning-msg, body.my-dashboard .error-msg, body.my-dashboard .alert, body.my-dashboard .alert-info { border: 1px solid rgba(47, 79, 53, 0.12) !important; border-radius: 16px !important; background: rgba(248, 244, 235, 0.86) !important; color: var(--g2p-dash-muted) !important; } body.my-dashboard .img-disclaimer.g2p-upload-guidance { display: flex !important; align-items: flex-start; gap: 14px; margin: 0 0 18px; padding: 16px 18px !important; border-color: rgba(47, 79, 53, 0.14) !important; border-radius: 18px !important; background: radial-gradient(circle at 100% 0%, rgba(200, 95, 45, 0.08), transparent 40%), rgba(255, 253, 247, 0.82) !important; } body.my-dashboard .g2p-upload-guidance-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid rgba(47, 79, 53, 0.16); border-radius: 999px; background: rgba(47, 79, 53, 0.08); color: var(--g2p-dash-green); } body.my-dashboard .g2p-upload-guidance-copy { display: grid; gap: 10px; min-width: 0; } body.my-dashboard .g2p-upload-guidance-copy strong { color: var(--g2p-dash-ink); font-family: Georgia, "Times New Roman", serif; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.05; } body.my-dashboard .g2p-upload-guidance-copy ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } body.my-dashboard .g2p-upload-guidance-copy li { display: inline-flex; align-items: center; min-height: 28px; padding: 6px 10px; border: 1px solid rgba(47, 79, 53, 0.12); border-radius: 999px; background: rgba(243, 239, 228, 0.78); color: var(--g2p-dash-muted); font-size: 12px; font-weight: 800; line-height: 1.2; } body.my-dashboard .iti { position: relative; display: block; width: 100%; overflow: visible; } body.my-dashboard .iti input.phone-js, body.my-dashboard .iti input[type="tel"], body.my-dashboard .iti input[name*="phone"] { width: 100% !important; min-height: 54px !important; height: 54px !important; margin: 0 !important; padding: 0 16px 0 114px !important; border: 1px solid rgba(47, 79, 53, 0.15) !important; border-radius: 18px !important; background: rgba(255, 253, 247, 0.78) !important; color: var(--g2p-dash-ink) !important; box-shadow: none !important; font-weight: 800; } body.my-dashboard .iti input.phone-js:focus, body.my-dashboard .iti input[type="tel"]:focus, body.my-dashboard .iti input[name*="phone"]:focus { border-color: rgba(200, 95, 45, 0.46) !important; box-shadow: 0 0 0 4px rgba(200, 95, 45, 0.1) !important; outline: none; } body.my-dashboard .iti__flag-container { position: absolute !important; top: 1px !important; bottom: 1px !important; left: 1px !important; width: auto !important; min-width: 100px; border-right: 1px solid rgba(47, 79, 53, 0.12); border-radius: 17px 0 0 17px; background: rgba(243, 239, 228, 0.9); z-index: 3; } body.my-dashboard .iti__selected-flag { display: inline-flex; align-items: center; gap: 7px; width: 100%; min-width: 100px; min-height: 52px; padding: 0 12px; border-radius: 17px 0 0 17px; color: var(--g2p-dash-ink); font-size: 13px; font-weight: 900; letter-spacing: -0.01em; } body.my-dashboard .iti__selected-flag:hover, body.my-dashboard .iti__selected-flag:focus-visible { background: rgba(47, 79, 53, 0.08); outline: none; } body.my-dashboard .iti__selected-dial-code { margin-left: 1px; color: var(--g2p-dash-ink); font-weight: 900; } body.my-dashboard .iti__arrow { margin-left: auto; border-top-color: rgba(47, 79, 53, 0.72); } body.my-dashboard .iti__country-list { top: calc(100% + 10px) !important; left: 0 !important; right: auto !important; width: min(380px, calc(100vw - 48px)) !important; min-width: min(320px, calc(100vw - 48px)) !important; max-width: calc(100vw - 48px) !important; max-height: min(300px, 44vh) !important; margin: 0 !important; padding: 8px !important; overflow-x: hidden !important; overflow-y: auto !important; border: 1px solid rgba(47, 79, 53, 0.16) !important; border-radius: 20px !important; background: rgba(255, 253, 247, 0.99) !important; color: var(--g2p-dash-ink) !important; box-shadow: 0 24px 60px rgba(24, 32, 24, 0.18) !important; scrollbar-color: rgba(47, 79, 53, 0.38) transparent; z-index: 20000 !important; } body.my-dashboard .iti__country { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 8px 14px; border-radius: 13px; color: var(--g2p-dash-ink); font-size: 13px; font-weight: 800; } body.my-dashboard .iti__country:hover, body.my-dashboard .iti__country.iti__highlight { background: rgba(200, 95, 45, 0.09); color: var(--g2p-dash-orange); } body.my-dashboard .iti__country[aria-selected="true"], body.my-dashboard .iti__country.iti__active { background: rgba(47, 79, 53, 0.1); color: var(--g2p-dash-green); } body.my-dashboard .iti__country-name { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.my-dashboard .iti__dial-code { flex: 0 0 auto; margin-left: auto; color: rgba(104, 112, 100, 0.72); font-weight: 900; } body.my-dashboard .iti__flag-box { flex: 0 0 auto; } body.my-dashboard .modal .iti, body.my-dashboard .modal .iti__flag-container, body.my-dashboard .modal .iti__country-list { overflow: visible !important; } body.my-dashboard .modal .modal-dialog, body.my-dashboard .modal .modal-content, body.my-dashboard .modal .modal-body { overflow: visible !important; } body.my-dashboard .modal .iti__country-list { width: min(360px, calc(100vw - 48px)) !important; max-height: min(250px, 36vh) !important; } body.my-dashboard .modal .iti__country { border-radius: 13px; } body.my-dashboard .modal .iti__country + .iti__country { margin-top: 2px; } body.my-dashboard .profile-image .avtar, body.my-dashboard .avtar, body.my-dashboard .avtar img { border-radius: 22px; } @media (max-width: 991.98px) { body.my-dashboard #header-dashboard.header-dashboard { padding: 0 16px; } body.my-dashboard .content-wrapper { padding: 26px 16px 56px; } body.my-dashboard .content-header { display: block; } } /* Gear2Peer account workspace redesign. Keep this at the end so legacy dashboard CSS cannot win. */ body.my-dashboard { min-height: 100vh; overflow-x: hidden; } body.my-dashboard .wrapper { width: min(100% - 48px, 1320px); min-height: calc(100vh - 48px); margin: 24px auto; display: grid; grid-template-columns: 274px minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: stretch; /* Chromeless: no panel box, no gradient, no border/shadow. The flat body paper shows through and runs straight to the footer. */ border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: clip; } body.my-dashboard #header-dashboard.header-dashboard { grid-column: 1 / -1; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; min-height: 74px; padding: 0 28px; border-radius: 0; } body.my-dashboard #header-dashboard .logo-dashboard { width: auto; min-width: 198px; height: 42px; gap: 10px; padding: 0; text-decoration: none; } body.my-dashboard #header-dashboard .logo-dashboard img { max-height: 42px; object-fit: contain; } body.my-dashboard #header-dashboard .logo-dashboard-map { width: 88px !important; height: 30px !important; border: 0 !important; border-radius: 0; box-shadow: none; } body.my-dashboard #header-dashboard .logo-dashboard-wordmark { width: 92px !important; height: 24px !important; } body.my-dashboard #header-dashboard .dropdown-menu-anim { border: 1px solid rgba(47, 79, 53, 0.14); border-radius: 18px; background: rgba(255, 253, 247, 0.98); box-shadow: 0 20px 60px rgba(24, 32, 24, 0.15); overflow: hidden; } body.my-dashboard #header-dashboard .dropdown-menu-anim .dropdown-menu-link { min-height: 40px; padding: 10px 14px; color: var(--g2p-dash-ink); font-weight: 800; } body.my-dashboard #header-dashboard .dropdown-menu-anim .dropdown-menu-link:hover, body.my-dashboard #header-dashboard .dropdown-menu-anim .is-active .dropdown-menu-link { background: rgba(47, 79, 53, 0.09); color: var(--g2p-dash-green); } body.my-dashboard #header-dashboard #notificationList-header:empty { display: none !important; } body.my-dashboard #header-dashboard .g2p-notification-menu { inset: calc(100% + 12px) 0 auto auto !important; transform: none !important; width: min(312px, calc(100vw - 28px)); min-height: 0; margin: 0 !important; padding: 10px; border-radius: 24px; overflow: visible; z-index: 1100; } body.my-dashboard #header-dashboard .g2p-notification-menu::before { content: ""; position: absolute; top: -7px; right: 18px; width: 14px; height: 14px; border-top: 1px solid rgba(47, 79, 53, 0.14); border-left: 1px solid rgba(47, 79, 53, 0.14); background: rgba(255, 253, 247, 0.98); transform: rotate(45deg); box-shadow: -4px -4px 12px rgba(24, 32, 24, 0.04); } body.my-dashboard #header-dashboard .g2p-notification-empty { position: relative; display: grid; gap: 4px; min-height: 104px; padding: 18px 18px 18px 62px; border: 1px solid rgba(47, 79, 53, 0.12); border-radius: 20px; background: radial-gradient(circle at 100% 0%, rgba(200, 95, 45, 0.08), transparent 44%), linear-gradient(135deg, rgba(255, 253, 247, 0.98), rgba(243, 239, 228, 0.9)); color: var(--g2p-dash-muted); font-size: 12px; font-weight: 800; line-height: 1.35; } body.my-dashboard #header-dashboard .g2p-notification-empty::before { content: ""; position: absolute; left: 18px; top: 22px; width: 30px; height: 30px; border: 1px solid rgba(47, 79, 53, 0.18); border-radius: 999px; background: radial-gradient(circle at 50% 50%, var(--g2p-dash-green) 0 4px, transparent 5px), rgba(47, 79, 53, 0.08); } body.my-dashboard #header-dashboard .g2p-notification-empty-kicker { color: var(--g2p-dash-orange); font-size: 10px; font-weight: 900; letter-spacing: 0.18em; line-height: 1; text-transform: uppercase; } body.my-dashboard #header-dashboard .g2p-notification-empty strong { color: var(--g2p-dash-ink); font-family: Georgia, "Times New Roman", serif; font-size: 20px; line-height: 1.05; } body.my-dashboard #header-dashboard .g2p-notification-loading::before { animation: g2pNotificationPulse 900ms ease-in-out infinite alternate; } @keyframes g2pNotificationPulse { from { opacity: 0.64; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } body.my-dashboard #header-dashboard .list-notifications { width: 100%; max-height: min(420px, calc(100vh - 110px)); overflow-y: auto; } body.my-dashboard #header-dashboard .list-notifications-head { padding: 10px 12px 8px; color: var(--g2p-dash-orange); font-size: 10px; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; } body.my-dashboard #header-dashboard .list-notifications-item { border-top: 1px solid rgba(47, 79, 53, 0.1); } body.my-dashboard #header-dashboard .list-notifications-link { display: grid; gap: 6px; width: 100%; padding: 12px; border: 0; border-radius: 14px; background: transparent; color: var(--g2p-dash-ink); text-align: left; } body.my-dashboard #header-dashboard .list-notifications-link:hover, body.my-dashboard #header-dashboard .list-notifications-link:focus-visible { background: rgba(200, 95, 45, 0.08); } body.my-dashboard #header-dashboard .list-notifications-link .desc { font-size: 12px; font-weight: 800; line-height: 1.35; } body.my-dashboard #header-dashboard .list-notifications-link .date { color: var(--g2p-dash-muted); font-size: 10px; font-weight: 800; } body.my-dashboard .sidebar { grid-column: 1; grid-row: 2; position: relative !important; inset: auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; min-height: 100%; padding: 18px 14px 28px; overflow: visible !important; } body.my-dashboard .sidebar-body, body.my-dashboard .custom-scrollbar, body.my-dashboard .dashboard-sidebar--js { height: auto !important; max-height: none !important; overflow: visible !important; } body.my-dashboard #main-area.main, body.my-dashboard .main { grid-column: 2; grid-row: 2; position: relative; min-width: 0; margin: 0 !important; padding: 0 !important; background: radial-gradient(circle at 82% 8%, rgba(200, 95, 45, 0.08), transparent 28%), linear-gradient(180deg, rgba(255, 253, 247, 0.36), rgba(243, 239, 228, 0.08)); } body.my-dashboard #main-area.main::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(47, 79, 53, 0.04), transparent 26%), radial-gradient(circle at 12% 100%, rgba(47, 79, 53, 0.08), transparent 34%); opacity: 0.72; } body.my-dashboard #main-area > .content-wrapper { position: relative; z-index: 1; max-width: none; margin: 0; padding: 42px 46px 78px; } body.my-dashboard .dashboard-menu { margin: 0; padding: 0; display: grid; gap: 8px; list-style: none; } body.my-dashboard .dashboard-menu-item { margin: 0; } body.my-dashboard .dashboard-menu-btn, body.my-dashboard .menu-sub-link { width: 100%; min-height: 46px; display: grid; grid-template-columns: 30px minmax(0, 1fr) 14px; align-items: center; gap: 9px; padding: 0 8px; border: 1px solid transparent !important; background: transparent !important; text-align: left; text-decoration: none; transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; } body.my-dashboard .dashboard-menu-btn:hover, body.my-dashboard .menu-sub-link:hover, body.my-dashboard .dashboard-menu-btn:focus-visible, body.my-dashboard .menu-sub-link:focus-visible, body.my-dashboard .dashboard-menu-item.is-active > .dashboard-menu-btn, body.my-dashboard .menu-sub-item.is-active > .menu-sub-link { border-color: rgba(47, 79, 53, 0.12) !important; background: rgba(47, 79, 53, 0.09) !important; color: var(--g2p-dash-green) !important; transform: translateX(2px); } body.my-dashboard .dashboard-menu-icon, body.my-dashboard .menu-sub-icon { width: 30px; height: 30px; min-width: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(47, 79, 53, 0.12); border-radius: 12px; background: rgba(47, 79, 53, 0.07); color: var(--g2p-dash-green); } body.my-dashboard .menu-sub-icon { width: 24px; height: 24px; min-width: 24px; border-radius: 9px; } body.my-dashboard .dashboard-menu-icon .svg, body.my-dashboard .menu-sub-icon .svg { display: block; width: 15px; height: 15px; overflow: visible; } body.my-dashboard .dashboard-menu-icon .svg { width: 16px; height: 16px; } body.my-dashboard .dashboard-menu-head, body.my-dashboard .menu-sub-head { min-width: 0; color: inherit; font-size: 12.5px; font-weight: 850; line-height: 1.12; overflow-wrap: normal; word-break: normal; } body.my-dashboard .dashboard-menu-arrow { position: relative; width: 14px; height: 14px; min-width: 14px; margin-left: auto; } body.my-dashboard .dashboard-menu-arrow::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translate(-50%, -62%) rotate(45deg); transition: transform 160ms ease; } body.my-dashboard .dashboard-menu-btn:not(.collapsed) .dashboard-menu-arrow::before { transform: translate(-50%, -36%) rotate(225deg); } body.my-dashboard .menu-sub { margin: 4px 0 8px 28px; padding: 4px 0 4px 9px; border-left: 1px solid rgba(47, 79, 53, 0.12); background: transparent; list-style: none; } body.my-dashboard .menu-sub-link { min-height: 36px; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 0 6px; } body.my-dashboard .menu-sub-link .dashboard-menu-arrow { display: none; } body.my-dashboard .content-header { align-items: center; margin-bottom: 30px; } body.my-dashboard .content-header-title { min-width: 0; } body.my-dashboard .content-header-title::before { content: "Gear2Peer account"; display: block; margin-bottom: 10px; color: var(--g2p-dash-orange); font-size: 11px; font-weight: 900; letter-spacing: 0.22em; line-height: 1; text-transform: uppercase; } body.my-dashboard .content-header-heading { margin: 0; max-width: 760px; color: var(--g2p-dash-ink); } body.my-dashboard .content-header-toolbar, body.my-dashboard .links-inline { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } body.my-dashboard .links-inline .btn, body.my-dashboard .content-header-toolbar .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; } body.my-dashboard .widget-scroll { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; margin: 0 0 28px; overflow: visible !important; } body.my-dashboard .widget, body.my-dashboard .widget-stats { min-width: 0 !important; width: auto !important; margin: 0 !important; } body.my-dashboard .widget-stats .card { height: 100%; min-height: 164px; } body.my-dashboard #main-area > .content-wrapper, body.my-dashboard #main-area .content-body { width: 100%; } body.my-dashboard #main-area .content-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; } /* Kill the legacy 50px horizontal inset on every content container so sub-page cards + filter forms align with their heading (x=395), matching the dashboard home content width. Applies to .content-body (tables/cards) and .content-form (search/filter blocks). home.php uses .g2p-ad-* containers and is unaffected. */ body.my-dashboard #main-area .content-body, body.my-dashboard #main-area .content-form { padding-left: 0; padding-right: 0; } body.my-dashboard #main-area .content-wrapper.g2p-dashboard-home { --g2p-dashboard-home-rail: min(100%, 820px); } body.my-dashboard #main-area .content-wrapper.g2p-dashboard-home > .content-header, body.my-dashboard #main-area .content-wrapper.g2p-dashboard-home > .content-body { width: var(--g2p-dashboard-home-rail); max-width: var(--g2p-dashboard-home-rail); margin-left: auto; margin-right: auto; } body.my-dashboard #main-area .content-body > .widget-scroll, body.my-dashboard #main-area .content-body > .row { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } body.my-dashboard #main-area .content-body > .widget-scroll { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 22px; margin-bottom: 0; } body.my-dashboard #main-area .content-body > .dashboard-stats-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: stretch; } body.my-dashboard #main-area .content-wrapper.g2p-dashboard-home .dashboard-stats-grid { display: flex !important; justify-content: space-between; gap: clamp(34px, 5vw, 82px); } body.my-dashboard #main-area .content-body > .dashboard-stats-grid > .widget-stats, body.my-dashboard #main-area .content-body > .dashboard-stats-grid > .widget { width: 100% !important; max-width: none !important; } body.my-dashboard #main-area .content-wrapper.g2p-dashboard-home .dashboard-stats-grid > .widget-stats, body.my-dashboard #main-area .content-wrapper.g2p-dashboard-home .dashboard-stats-grid > .widget { flex: 0 0 clamp(176px, 26%, 216px); max-width: 216px !important; } body.my-dashboard #main-area .content-body > .dashboard-stats-grid .card { min-height: 0; aspect-ratio: 1 / 1; display: flex; flex-direction: column; } body.my-dashboard #main-area .content-body > .dashboard-stats-grid .card-body { flex: 1; display: flex; } body.my-dashboard #main-area .content-body > .dashboard-stats-grid .stats { width: 100%; } body.my-dashboard #main-area .content-body > .dashboard-stats-grid .stats-number { justify-content: center; } body.my-dashboard #main-area .content-body > .row { --bs-gutter-x: 28px; --bs-gutter-y: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bs-gutter-y) var(--bs-gutter-x); } body.my-dashboard #main-area .content-body > .row::before, body.my-dashboard #main-area .content-body > .row::after { display: none; } body.my-dashboard #main-area .content-body > .row > [class*="col-"] { width: auto; max-width: none; min-width: 0; padding-left: 0; padding-right: 0; margin-bottom: 0 !important; } body.my-dashboard #main-area .content-body > .row > .col-lg-6 { grid-column: span 1; } body.my-dashboard #main-area .content-body > .row > .col-lg-12, body.my-dashboard #main-area .content-body > .row > .col-12 { grid-column: 1 / -1; } body.my-dashboard #main-area .content-body > .row .card { width: 100%; min-height: 348px; } body.my-dashboard #main-area .content-body > .row .card-table, body.my-dashboard #main-area .content-body > .row .table-wrap, body.my-dashboard #main-area .content-body > .row table { height: 100%; } body.my-dashboard #main-area .content-body > .row .block-empty { min-height: 224px; } body.my-dashboard .card { overflow: hidden; } body.my-dashboard .card-head { min-height: 58px; display: flex; align-items: center; padding: 18px 22px !important; background: rgba(255, 253, 247, 0.76) !important; } body.my-dashboard .card-head h4, body.my-dashboard .card-title, body.my-dashboard .card h4, body.my-dashboard .card h5 { color: var(--g2p-dash-ink); font-family: "Georgia", "Times New Roman", serif; font-weight: 800; letter-spacing: 0; } body.my-dashboard .card-body { padding: 22px !important; } body.my-dashboard #main-area .content-body.g2p-credentials-page { max-width: 940px; margin-right: auto; margin-left: auto; } body.my-dashboard #main-area .content-body.g2p-credentials-page > .row { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: stretch; justify-content: center; } body.my-dashboard #main-area .content-body.g2p-credentials-page > .row > [class*="col-"] { display: flex; } body.my-dashboard #main-area .content-body.g2p-credentials-page .card { display: flex; min-height: 388px; flex-direction: column; overflow: visible !important; } body.my-dashboard #main-area .content-body.g2p-credentials-page .card-body { display: flex; flex: 1; flex-direction: column; overflow: visible !important; } body.my-dashboard #main-area .content-body.g2p-credentials-page .card-body > [id$="FrmBlock"] { display: flex; position: relative; flex: 1; flex-direction: column; overflow: visible !important; z-index: 20; } body.my-dashboard #main-area .content-body.g2p-credentials-page .form { display: flex; flex: 1; flex-direction: column; overflow: visible !important; } body.my-dashboard #main-area .content-body.g2p-credentials-page .form .field-set, body.my-dashboard #main-area .content-body.g2p-credentials-page .form .field-wraper, body.my-dashboard #main-area .content-body.g2p-credentials-page .form .field-wrapper { margin-bottom: 15px; overflow: visible !important; } body.my-dashboard #changePhoneNumberFrmBlock { z-index: 40; } body.my-dashboard #changePhoneNumberFrmBlock .iti:focus-within { z-index: 20000; } body.my-dashboard #main-area .content-body.g2p-credentials-page .form .btn, body.my-dashboard #main-area .content-body.g2p-credentials-page .form button[type="submit"] { min-width: 72px; min-height: 44px; margin-top: auto; padding: 0 20px; } body.my-dashboard #main-area .content-body.g2p-credentials-page .form small { display: block; max-width: 310px; margin-top: 10px; color: var(--g2p-dash-muted); font-size: 13px; font-weight: 700; line-height: 1.45; } body.my-dashboard .stats-number { height: 100%; display: flex; flex-direction: column; gap: 12px; } body.my-dashboard .stats-number .stats-number-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 11px; border-top: 1px dashed rgba(47, 79, 53, 0.16); color: var(--g2p-dash-muted); font-size: 13px; font-weight: 700; } body.my-dashboard .stats-number .stats-number-item:first-child { border-top: 0; padding-top: 0; } body.my-dashboard .stats-number .value, body.my-dashboard .stats-number strong, body.my-dashboard .stats-number b { color: var(--g2p-dash-ink); font-weight: 900; } body.my-dashboard .row { row-gap: 24px; } body.my-dashboard .table, body.my-dashboard table { color: var(--g2p-dash-ink); } body.my-dashboard .table thead th, body.my-dashboard .card-table thead th { padding: 14px 16px !important; border-color: rgba(47, 79, 53, 0.12) !important; background: rgba(243, 239, 228, 0.52) !important; color: var(--g2p-dash-muted); font-size: 11px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; } body.my-dashboard .table td, body.my-dashboard .card-table td { padding: 14px 16px !important; border-color: rgba(47, 79, 53, 0.1) !important; vertical-align: middle; } body.my-dashboard .block-empty { min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 30px; border-radius: 20px; background: radial-gradient(circle at 50% 35%, rgba(200, 95, 45, 0.08), transparent 24%), rgba(243, 239, 228, 0.46); } body.my-dashboard .block-empty .block__img { width: 118px !important; height: auto !important; opacity: 0.72; filter: grayscale(0.15) sepia(0.18) hue-rotate(345deg) saturate(0.8); } body.my-dashboard .block-empty h5 { margin: 0; color: var(--g2p-dash-ink); font-family: "Georgia", "Times New Roman", serif; font-size: 22px; line-height: 1.05; } body.my-dashboard .block-empty p, body.my-dashboard .g2p-empty-copy { max-width: 360px; margin: 0; color: var(--g2p-dash-muted); font-weight: 700; line-height: 1.45; } body.my-dashboard [id$="FrmBlock"], body.my-dashboard #listing, body.my-dashboard #listingDiv, body.my-dashboard #messageListing, body.my-dashboard #credits-info { min-height: 64px; } body.my-dashboard [id$="FrmBlock"]:not(:has(*)), body.my-dashboard #listing:not(:has(*)), body.my-dashboard #messageListing:not(:has(*)) { display: flex; align-items: center; color: var(--g2p-dash-muted); font-weight: 800; } body.my-dashboard .card-tabs .tabs { padding: 14px 16px 0; } body.my-dashboard .g2p-privacy-requests-card, body.my-dashboard .g2p-privacy-fragment { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: center; margin: 0 0 22px; padding: 24px; border: 1px solid rgba(47, 79, 53, 0.13); border-radius: 24px; background: rgba(255, 253, 247, 0.9); box-shadow: var(--g2p-dash-shadow); } body.my-dashboard .g2p-privacy-fragment { grid-template-columns: minmax(0, 1fr); margin: 0; box-shadow: none; } body.my-dashboard .g2p-privacy-eyebrow, body.my-dashboard .g2p-modal-eyebrow { display: block; margin: 0 0 8px; color: var(--g2p-dash-orange); font-size: 11px; font-weight: 900; letter-spacing: 0.2em; line-height: 1; text-transform: uppercase; } body.my-dashboard .g2p-privacy-copy h3, body.my-dashboard .g2p-privacy-fragment h3 { margin: 0; color: var(--g2p-dash-ink); font-family: "Georgia", "Times New Roman", serif; font-size: clamp(28px, 3vw, 42px); font-weight: 800; line-height: 0.98; } body.my-dashboard .g2p-privacy-copy p, body.my-dashboard .g2p-privacy-fragment p { max-width: 620px; margin: 10px 0 0; color: var(--g2p-dash-muted); font-weight: 800; line-height: 1.45; } body.my-dashboard .g2p-privacy-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; } body.my-dashboard .g2p-privacy-actions .btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0 20px; white-space: nowrap; } body.my-dashboard .g2p-privacy-status-wrap, body.my-dashboard .g2p-privacy-empty { display: inline-grid; gap: 4px; margin-top: 16px; padding: 12px 16px; border: 1px solid rgba(47, 79, 53, 0.12); border-radius: 18px; background: rgba(47, 79, 53, 0.06); } body.my-dashboard .g2p-privacy-empty { display: grid; max-width: 520px; } body.my-dashboard .g2p-privacy-status-label { color: var(--g2p-dash-orange); font-size: 10px; font-weight: 900; letter-spacing: 0.18em; line-height: 1; text-transform: uppercase; } body.my-dashboard .g2p-privacy-status { color: var(--g2p-dash-green); font-family: "Georgia", "Times New Roman", serif; font-size: 22px; line-height: 1; } body.my-dashboard .g2p-privacy-status-meta, body.my-dashboard .g2p-privacy-empty span { color: var(--g2p-dash-muted); font-weight: 800; } body.my-dashboard .g2p-privacy-downloads { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } body.my-dashboard .g2p-privacy-downloads a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid rgba(47, 79, 53, 0.14); border-radius: 999px; background: rgba(255, 253, 247, 0.74); color: var(--g2p-dash-green); font-weight: 900; } body.my-dashboard .tabs_nav, body.my-dashboard .tabs { border-color: rgba(47, 79, 53, 0.12) !important; } body.my-dashboard .tabs_nav a, body.my-dashboard .tabs a { border-radius: 999px !important; color: var(--g2p-dash-muted); font-weight: 850; } body.my-dashboard .tabs_nav .is-active a, body.my-dashboard .tabs .is-active a, body.my-dashboard .tabs_nav a:hover, body.my-dashboard .tabs a:hover { background: rgba(47, 79, 53, 0.1) !important; color: var(--g2p-dash-green) !important; } body.my-dashboard .uploaded-profile-preview, body.my-dashboard .profile-avatar-panel, body.my-dashboard .profile-photo { border: 1px solid rgba(47, 79, 53, 0.12); border-radius: 24px; background: rgba(243, 239, 228, 0.62); } body.my-dashboard .my-addresses, body.my-dashboard .cards, body.my-dashboard .listing, body.my-dashboard .list-group { gap: 14px; } body.my-dashboard .my-addresses-item, body.my-dashboard .list-group-item, body.my-dashboard .address-card { border: 1px solid rgba(47, 79, 53, 0.13) !important; border-radius: 20px !important; background: rgba(255, 253, 247, 0.9) !important; box-shadow: 0 12px 34px rgba(24, 32, 24, 0.07); } body.my-dashboard .product-profile, body.my-dashboard .profile { color: var(--g2p-dash-ink); } body.my-dashboard .badge, body.my-dashboard .tag { border-radius: 999px !important; background: rgba(47, 79, 53, 0.09) !important; color: var(--g2p-dash-green) !important; font-weight: 900; letter-spacing: 0.05em; } body.my-dashboard .pagination-wrapper, body.my-dashboard .pagination { display: flex; justify-content: center; gap: 8px; margin-top: 24px; } body.my-dashboard .pagination a, body.my-dashboard .pagination span, body.my-dashboard .pagination .page-link { min-width: 38px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(47, 79, 53, 0.14) !important; border-radius: 999px !important; background: rgba(255, 253, 247, 0.82) !important; color: var(--g2p-dash-ink) !important; font-weight: 850; } body.my-dashboard .pagination .active a, body.my-dashboard .pagination .active span, body.my-dashboard .pagination .is-active, body.my-dashboard .pagination .page-item.active .page-link { background: var(--g2p-dash-green) !important; color: #fffdf7 !important; } body.my-dashboard .modal-content, body.my-dashboard .modal-dialog .card { border: 1px solid rgba(47, 79, 53, 0.13); border-radius: 28px; background: rgba(255, 253, 247, 0.98); box-shadow: 0 28px 90px rgba(24, 32, 24, 0.2); } body.my-dashboard .modal-header, body.my-dashboard .modal-footer { border-color: rgba(47, 79, 53, 0.12); } body.my-dashboard .footer, body.my-dashboard .back-to-top { grid-column: 1 / -1; } /* Search/list account pages: keep legacy search cards out of the hero title. */ body.my-dashboard #main-area .content-wrapper.content-space { display: block; } body.my-dashboard #main-area .content-header { position: relative; z-index: 2; align-items: flex-start; margin-bottom: clamp(30px, 3vw, 46px) !important; } body.my-dashboard #main-area .content-header-heading { max-width: min(100%, 900px); font-size: clamp(40px, 4.35vw, 60px); line-height: 0.98; } body.my-dashboard #main-area .content-form { position: relative; z-index: 1; width: 100%; margin: 0 0 28px !important; clear: both; } body.my-dashboard #main-area .content-form:empty { display: none; } body.my-dashboard #main-area .content-form .form-search { width: 100%; margin: 0; padding: 24px; border: 1px solid rgba(47, 79, 53, 0.13); border-radius: 22px; background: rgba(255, 253, 247, 0.94); box-shadow: 0 18px 54px rgba(24, 32, 24, 0.1); } body.my-dashboard #main-area .content-form .form-search .row { --bs-gutter-x: 18px; --bs-gutter-y: 18px; display: flex; flex-wrap: wrap; align-items: end; margin-right: -9px; margin-left: -9px; } body.my-dashboard #main-area .content-form .form-search .row::before, body.my-dashboard #main-area .content-form .form-search .row::after { display: none; } body.my-dashboard #main-area .content-form .form-search [class*="col-"] { min-width: 0; padding-right: 9px; padding-left: 9px; } body.my-dashboard #main-area .content-form .form-search .field-set, body.my-dashboard #main-area .content-form .form-search .field-wraper, body.my-dashboard #main-area .content-form .form-search .field-wrapper { min-width: 0; } body.my-dashboard #main-area .content-form .form-search label, body.my-dashboard #main-area .content-form .form-search .field_label, body.my-dashboard #main-area .content-form .form-search .caption-wraper, body.my-dashboard #main-area .content-form .form-search .caption-wrapper { display: block; margin: 0 0 8px; color: var(--g2p-dash-muted); font-size: 11px; font-weight: 900; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; } body.my-dashboard #main-area .content-form .form-search input, body.my-dashboard #main-area .content-form .form-search select, body.my-dashboard #main-area .content-form .form-search textarea, body.my-dashboard #main-area .content-form .form-search .custom-select { width: 100%; min-height: 48px; border: 1px solid rgba(47, 79, 53, 0.16) !important; border-radius: 14px !important; background-color: rgba(255, 253, 247, 0.82) !important; color: var(--g2p-dash-ink) !important; font-weight: 800; } body.my-dashboard #main-area .content-form .form-search .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px !important; font-weight: 900; } body.my-dashboard #main-area .content-form .form-search .btn-block { width: 100%; } body.my-dashboard #main-area .content-form .form-search .btn-brand, body.my-dashboard #main-area .content-form .form-search .btn-search { border-color: var(--g2p-dash-green) !important; background: var(--g2p-dash-green) !important; color: #fffdf7 !important; } body.my-dashboard #main-area .content-form .form-search .btn-gray, body.my-dashboard #main-area .content-form .form-search .btn-clear { border-color: transparent !important; background: rgba(47, 79, 53, 0.07) !important; color: var(--g2p-dash-ink) !important; } body.my-dashboard #main-area .content-form + .content-body { margin-top: 0; } body.my-dashboard #main-area .content-body > .card, body.my-dashboard #main-area .content-body .card-table { width: 100%; } body.my-dashboard #main-area .content-body .table-wrap, body.my-dashboard #main-area .content-body .scroll-x { width: 100%; min-height: 280px; overflow-x: auto; } @supports not selector(:has(*)) { body.my-dashboard [id$="FrmBlock"], body.my-dashboard #listing, body.my-dashboard #messageListing { color: var(--g2p-dash-muted); font-weight: 800; } } @media (max-width: 1199.98px) { body.my-dashboard .wrapper { width: min(100% - 28px, 1120px); grid-template-columns: 236px minmax(0, 1fr); } body.my-dashboard #main-area > .content-wrapper { padding: 34px 30px 64px; } body.my-dashboard #main-area .content-body > .widget-scroll { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.my-dashboard #main-area .content-body > .dashboard-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } } @media (max-width: 899.98px) { body.my-dashboard .wrapper { width: 100%; min-height: 100vh; margin: 0; grid-template-columns: 1fr; border-width: 0; border-radius: 0; } body.my-dashboard #header-dashboard.header-dashboard, body.my-dashboard .sidebar, body.my-dashboard #main-area.main { grid-column: 1; } body.my-dashboard .sidebar { grid-row: 2; min-height: 0; padding: 12px 14px; border-right: 0; border-bottom: 1px solid rgba(47, 79, 53, 0.12); overflow-x: auto !important; } body.my-dashboard .dashboard-menu { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; } body.my-dashboard .dashboard-menu-item { flex: 0 0 auto; min-width: 210px; } body.my-dashboard .menu-sub { display: none !important; } body.my-dashboard #main-area.main { grid-row: 3; } body.my-dashboard #main-area > .content-wrapper { padding: 28px 18px 58px; } body.my-dashboard .content-header { align-items: flex-start; gap: 16px; } body.my-dashboard .content-header-toolbar, body.my-dashboard .links-inline { justify-content: flex-start; } body.my-dashboard .g2p-privacy-requests-card { grid-template-columns: minmax(0, 1fr); } body.my-dashboard .g2p-privacy-actions { justify-content: flex-start; } body.my-dashboard #main-area .content-body > .widget-scroll, body.my-dashboard #main-area .content-body > .row { grid-template-columns: minmax(0, 1fr); } body.my-dashboard #main-area .content-body > .dashboard-stats-grid { grid-template-columns: minmax(0, 1fr); } body.my-dashboard #main-area .content-wrapper.g2p-dashboard-home .dashboard-stats-grid { display: grid !important; justify-content: stretch; } body.my-dashboard #main-area .content-wrapper.g2p-dashboard-home .dashboard-stats-grid > .widget-stats, body.my-dashboard #main-area .content-wrapper.g2p-dashboard-home .dashboard-stats-grid > .widget { max-width: none !important; } body.my-dashboard #main-area .content-body > .row > .col-lg-6 { grid-column: 1 / -1; } } @media (max-width: 575.98px) { body.my-dashboard #header-dashboard.header-dashboard { min-height: 66px; padding: 0 12px; } body.my-dashboard #header-dashboard .logo-dashboard { min-width: 158px; } body.my-dashboard #header-dashboard .logo-dashboard-map { width: 72px !important; height: 24px !important; } body.my-dashboard #header-dashboard .logo-dashboard-wordmark { width: 76px !important; height: 20px !important; } body.my-dashboard #header-dashboard .dropdown-toggle-custom { padding: 0 12px; } body.my-dashboard #header-dashboard .header-actions-link { width: 38px; height: 38px; } body.my-dashboard #header-dashboard .g2p-message-action { min-width: 38px; width: 38px; padding: 0; } body.my-dashboard #header-dashboard .g2p-message-action-label { display: none; } body.my-dashboard .content-header-heading { font-size: clamp(34px, 13vw, 48px); } body.my-dashboard .widget-scroll { grid-template-columns: 1fr; } body.my-dashboard .card-body, body.my-dashboard .card-head { padding-left: 16px !important; padding-right: 16px !important; } body.my-dashboard .g2p-privacy-requests-card, body.my-dashboard .g2p-privacy-fragment { padding: 18px; border-radius: 20px; } body.my-dashboard .g2p-privacy-actions .btn { width: 100%; } } /* ============================================================ Account Home (Renting | Lending) — dashboard/home.php Scoped to .g2p-acct; uses the --g2p-dash-* token set. ============================================================ */ body.my-dashboard .g2p-acct { --acct-amber: #b9822a; --acct-amber-bg: rgba(230, 181, 71, 0.18); padding: 8px 4px 56px; } body.my-dashboard .g2p-acct *, body.my-dashboard .g2p-acct *::before, body.my-dashboard .g2p-acct *::after { box-sizing: border-box; } /* head + segmented toggle */ body.my-dashboard .g2p-acct-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 6px 0 22px; } body.my-dashboard .g2p-acct-kicker { margin: 0 0 6px; color: var(--g2p-dash-orange); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } body.my-dashboard .g2p-acct-title { margin: 0; font-family: "Georgia", "Times New Roman", serif; font-weight: 500; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.2rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--g2p-dash-ink); } body.my-dashboard .g2p-acct-seg { display: inline-flex; background: rgba(47, 79, 53, 0.08); border: 1px solid var(--g2p-dash-line); border-radius: 999px; padding: 3px; gap: 2px; } body.my-dashboard .g2p-acct-seg button { appearance: none; border: 0; background: transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px; border-radius: 999px; font: inherit; font-weight: 600; font-size: 0.88rem; color: var(--g2p-dash-ink); transition: background 0.18s ease, color 0.18s ease; } body.my-dashboard .g2p-acct-seg button svg { width: 16px; height: 16px; } body.my-dashboard .g2p-acct-seg button.on { background: var(--g2p-dash-green); color: #fffdf7; box-shadow: 0 6px 16px rgba(28, 32, 24, 0.14); } /* stat cards */ body.my-dashboard .g2p-acct-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 22px; } body.my-dashboard .g2p-acct-stat { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 1px solid var(--g2p-dash-line); border-radius: 20px; background: var(--g2p-dash-panel-solid); color: var(--g2p-dash-ink); box-shadow: 0 10px 30px rgba(28, 32, 24, 0.05); transition: transform 0.16s ease, box-shadow 0.16s ease; } body.my-dashboard a.g2p-acct-stat:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(28, 32, 24, 0.1); } body.my-dashboard .g2p-acct-stat-num { font-family: "Georgia", "Times New Roman", serif; font-size: 1.9rem; font-weight: 500; line-height: 1; letter-spacing: -0.01em; } body.my-dashboard .g2p-acct-stat-lbl { font-size: 0.82rem; color: var(--g2p-dash-muted); } /* attention strip */ body.my-dashboard .g2p-acct-attn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; } body.my-dashboard .g2p-acct-attn-item { display: flex; gap: 13px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--g2p-dash-line); border-radius: 18px; background: var(--g2p-dash-panel); } body.my-dashboard .g2p-acct-attn-item b { font-size: 0.96rem; color: var(--g2p-dash-ink); } body.my-dashboard .g2p-acct-attn-item p { margin: 3px 0 10px; font-size: 0.85rem; color: var(--g2p-dash-muted); } body.my-dashboard .g2p-acct-blip { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fffdf7; font-size: 1rem; line-height: 1; } body.my-dashboard .g2p-acct-blip.clay { background: var(--g2p-dash-orange); } body.my-dashboard .g2p-acct-blip.pine { background: var(--g2p-dash-green); } /* buttons */ body.my-dashboard .g2p-acct-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; border: 0; border-radius: 999px; padding: 9px 18px; font: inherit; font-weight: 600; font-size: 0.86rem; text-decoration: none; transition: transform 0.16s ease, background 0.16s ease, opacity 0.16s ease; } body.my-dashboard .g2p-acct-btn:hover { transform: translateY(-1px); } body.my-dashboard .g2p-acct-btn.pine { background: var(--g2p-dash-green); color: #fffdf7; } body.my-dashboard .g2p-acct-btn.clay { background: var(--g2p-dash-orange); color: #fffdf7; } body.my-dashboard .g2p-acct-btn.ghost { background: transparent; border: 1px solid var(--g2p-dash-line); color: var(--g2p-dash-ink); } body.my-dashboard .g2p-acct-btn.sm { padding: 7px 14px; font-size: 0.8rem; } body.my-dashboard .g2p-acct-btn.block { width: 100%; padding: 13px; } /* section heads */ body.my-dashboard .g2p-acct-sectionhead { display: flex; align-items: center; justify-content: space-between; margin: 28px 0 14px; } body.my-dashboard .g2p-acct-sectionhead h2 { margin: 0; font-family: "Georgia", "Times New Roman", serif; font-weight: 500; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--g2p-dash-ink); } body.my-dashboard .g2p-acct-sectionhead a { font-size: 0.85rem; font-weight: 600; color: var(--g2p-dash-orange); text-decoration: none; } /* rental rows */ body.my-dashboard .g2p-acct-rental { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; align-items: center; padding: 14px; border: 1px solid var(--g2p-dash-line); border-radius: 18px; background: var(--g2p-dash-panel-solid); margin-bottom: 12px; } body.my-dashboard .g2p-acct-rental-thumb { display: block; width: 96px; height: 72px; border-radius: 13px; background: var(--g2p-dash-paper) center/cover no-repeat; border: 1px solid var(--g2p-dash-line); } body.my-dashboard .g2p-acct-rental-name { font-weight: 600; font-size: 1.02rem; color: var(--g2p-dash-ink); text-decoration: none; } body.my-dashboard .g2p-acct-rental-name:hover { color: var(--g2p-dash-green); } body.my-dashboard .g2p-acct-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 7px; font-size: 0.83rem; color: var(--g2p-dash-muted); } body.my-dashboard .g2p-acct-facts span { display: inline-flex; align-items: center; gap: 6px; } body.my-dashboard .g2p-acct-facts svg { width: 14px; height: 14px; opacity: 0.7; flex: none; } body.my-dashboard .g2p-acct-rental-right { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; text-align: right; } body.my-dashboard .g2p-acct-dep { font-size: 0.78rem; color: var(--g2p-dash-muted); } body.my-dashboard .g2p-acct-rental-actions { display: flex; gap: 8px; } /* status pills */ body.my-dashboard .g2p-acct-pill { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 11px; border-radius: 999px; white-space: nowrap; } body.my-dashboard .g2p-acct-pill.is-out { background: rgba(196, 95, 45, 0.14); color: var(--g2p-dash-orange); } body.my-dashboard .g2p-acct-pill.is-return { background: rgba(196, 95, 45, 0.2); color: #9c4318; } body.my-dashboard .g2p-acct-pill.is-upcoming { background: var(--acct-amber-bg); color: var(--acct-amber); } body.my-dashboard .g2p-acct-pill.is-done { background: rgba(47, 79, 53, 0.1); color: var(--g2p-dash-green); } /* empty state */ body.my-dashboard .g2p-acct-empty { text-align: center; padding: 46px 24px; border: 1px dashed var(--g2p-dash-line); border-radius: 22px; background: var(--g2p-dash-panel); } body.my-dashboard .g2p-acct-empty h3 { margin: 0 0 8px; font-family: "Georgia", "Times New Roman", serif; font-weight: 500; font-size: 1.3rem; color: var(--g2p-dash-ink); } body.my-dashboard .g2p-acct-empty p { margin: 0 0 18px; color: var(--g2p-dash-muted); } /* lender pane */ body.my-dashboard .g2p-acct-grid-2 { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; } body.my-dashboard .g2p-acct-card { padding: 20px; border: 1px solid var(--g2p-dash-line); border-radius: 22px; background: var(--g2p-dash-panel-solid); box-shadow: 0 10px 30px rgba(28, 32, 24, 0.05); margin-bottom: 18px; } body.my-dashboard .g2p-acct-earn-amt { font-family: "Georgia", "Times New Roman", serif; font-size: 2.3rem; font-weight: 500; line-height: 1; margin: 4px 0 6px; color: var(--g2p-dash-ink); } body.my-dashboard .g2p-acct-note { margin: 0 0 14px; font-size: 0.88rem; color: var(--g2p-dash-muted); } body.my-dashboard .g2p-acct-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } body.my-dashboard .g2p-acct-tile { display: block; padding: 16px 18px; border: 1px solid var(--g2p-dash-line); border-radius: 18px; background: var(--g2p-dash-panel-solid); text-decoration: none; transition: transform 0.16s ease, box-shadow 0.16s ease; } body.my-dashboard .g2p-acct-tile:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(28, 32, 24, 0.1); } body.my-dashboard .g2p-acct-tile b { display: flex; align-items: center; gap: 8px; font-size: 0.98rem; color: var(--g2p-dash-ink); } body.my-dashboard .g2p-acct-tile b i { font-style: normal; font-size: 0.74rem; font-weight: 600; background: rgba(47, 79, 53, 0.1); color: var(--g2p-dash-green); padding: 1px 9px; border-radius: 999px; } body.my-dashboard .g2p-acct-tile span { display: block; margin-top: 5px; font-size: 0.83rem; color: var(--g2p-dash-muted); } body.my-dashboard .g2p-acct-statline { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--g2p-dash-line); font-size: 0.9rem; color: var(--g2p-dash-ink); } body.my-dashboard .g2p-acct-statline:last-child { border-bottom: 0; } body.my-dashboard .g2p-acct-statline b { font-family: "Georgia", "Times New Roman", serif; font-size: 1.1rem; font-weight: 500; } /* responsive */ @media (max-width: 1000px) { body.my-dashboard .g2p-acct-stats { grid-template-columns: repeat(2, 1fr); } body.my-dashboard .g2p-acct-attn { grid-template-columns: 1fr; } body.my-dashboard .g2p-acct-grid-2 { grid-template-columns: 1fr; } } @media (max-width: 560px) { body.my-dashboard .g2p-acct-stats { grid-template-columns: 1fr 1fr; gap: 12px; } body.my-dashboard .g2p-acct-tiles { grid-template-columns: 1fr; } body.my-dashboard .g2p-acct-rental { grid-template-columns: 72px 1fr; gap: 14px; } body.my-dashboard .g2p-acct-rental-thumb { width: 72px; height: 60px; } body.my-dashboard .g2p-acct-rental-right { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; flex-wrap: wrap; } body.my-dashboard .g2p-acct-head { align-items: flex-start; } } /* ============================================================ Wallet & Deposits — balance hero (account/credits-info.php) ============================================================ */ body.my-dashboard .g2p-wallet { width: 100%; display: grid; gap: 16px; } body.my-dashboard .g2p-wallet-hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; background: var(--g2p-dash-panel-solid); border: 1px solid var(--g2p-dash-line); border-radius: 20px; padding: 32px 36px; box-shadow: var(--g2p-dash-shadow); } body.my-dashboard .g2p-wallet-bal { flex: 1 1 340px; min-width: 0; } body.my-dashboard .g2p-wallet-kicker { margin: 0 0 10px; font-family: "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--g2p-dash-orange); } body.my-dashboard .g2p-wallet-amount { margin: 0; color: var(--g2p-dash-ink); font-family: "Georgia", "Times New Roman", serif; font-weight: 800; font-size: clamp(40px, 5vw, 56px); line-height: 1; letter-spacing: -0.01em; } body.my-dashboard .g2p-wallet-approx { margin: 6px 0 0; color: var(--g2p-dash-muted); font-size: 0.85rem; } body.my-dashboard .g2p-wallet-sub { margin: 14px 0 0; max-width: 52ch; color: var(--g2p-dash-muted); font-size: 0.92rem; line-height: 1.55; } body.my-dashboard .g2p-wallet-cta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 12px; min-width: 200px; } body.my-dashboard .g2p-wallet-select { height: 48px; min-width: 160px; padding: 0 16px; border: 1px solid var(--g2p-dash-line); border-radius: 12px; background: #fff; color: var(--g2p-dash-ink); font-size: 0.95rem; } body.my-dashboard .g2p-wallet-btn { height: 48px; padding: 0 30px; border: 0; border-radius: 999px; background: var(--g2p-dash-green); color: #fff; font-size: 0.98rem; font-weight: 600; cursor: pointer; transition: background 160ms ease, transform 160ms ease; } body.my-dashboard .g2p-wallet-btn:hover { background: #25402a; transform: translateY(-1px); } body.my-dashboard .g2p-wallet-facets { display: flex; flex-wrap: wrap; gap: 14px; } body.my-dashboard .g2p-wallet-facet { flex: 1 1 200px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--g2p-dash-panel-solid); border: 1px solid var(--g2p-dash-line); border-radius: 16px; padding: 18px 22px; } body.my-dashboard .g2p-wallet-facet .l { color: var(--g2p-dash-muted); font-size: 0.9rem; } body.my-dashboard .g2p-wallet-facet .v { font-family: "Georgia", "Times New Roman", serif; font-weight: 700; font-size: 1.4rem; color: var(--g2p-dash-ink); } /* Transaction ledger — signed amounts, right-aligned figures */ body.my-dashboard .g2p-wallet-txns .g2p-txn-num { text-align: right; white-space: nowrap; } body.my-dashboard .g2p-wallet-txns .g2p-txn-amt { font-weight: 600; } body.my-dashboard .g2p-wallet-txns .g2p-txn-amt.is-credit { color: #2f7d4f; } body.my-dashboard .g2p-wallet-txns .g2p-txn-amt.is-debit { color: var(--g2p-dash-muted); } @media (max-width: 640px) { body.my-dashboard .g2p-wallet-hero { padding: 24px; } body.my-dashboard .g2p-wallet-cta { width: 100%; } body.my-dashboard .g2p-wallet-btn { flex: 1; } } /* ============================================================ Dashboard search / filter forms — consistent field grid. Legacy Bootstrap col-lg-2 squeezed right-side fields to ~129px (Status/dates cut off) and rows had uneven gaps. Normalize into an even, wrapping row with the buttons hugging their content. ============================================================ */ /* Field-only rows: even column grid. auto-fill keeps empty tracks so a wrapped field stays one column wide instead of stretching full-width. */ body.my-dashboard .form-search .row:not(:has(.btn)) { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px 18px; margin: 0 0 16px; } /* Rows that contain buttons (button-only or mixed): flex, fields grow, buttons hug their content and sit on the input baseline. */ body.my-dashboard .form-search .row:has(.btn) { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 16px; margin: 0; } body.my-dashboard .form-search .row > [class*="col-"] { width: auto; max-width: none; min-width: 0; margin: 0; padding: 0; } body.my-dashboard .form-search .row:has(.btn) > [class*="col-"] { flex: 1 1 180px; } body.my-dashboard .form-search .row:has(.btn) > [class*="col-"]:has(.btn) { flex: 0 0 auto; } body.my-dashboard .form-search .row:has(.btn) .btn { width: auto; min-width: 128px; } /* Field internals fill their cell */ body.my-dashboard .form-search .row > [class*="col-"] .field-set, body.my-dashboard .form-search .row > [class*="col-"] .form-control, body.my-dashboard .form-search .row > [class*="col-"] select { width: 100%; } /* Drop verbose "search by X, Y, Z" hints — clutter + uneven row heights */ body.my-dashboard .form-search .form-text { display: none; } /* ============================================================ Tooltips — replace the stock cramped, center-aligned dark Bootstrap bubble with a warm, readable, branded one, and give the info icons the brand clay colour. ============================================================ */ body.my-dashboard .fa-info-circle, body.my-dashboard .field-set .info-circle { color: var(--g2p-dash-orange); opacity: 0.82; cursor: help; transition: opacity 140ms ease; } body.my-dashboard .fa-info-circle:hover { opacity: 1; } body.my-dashboard .tooltip { font-family: "Inter", "Helvetica Neue", Arial, sans-serif; } body.my-dashboard .tooltip .tooltip-inner { max-width: 286px; padding: 12px 15px; background: #20301f; color: #f4efe4; border-radius: 13px; font-size: 0.84rem; font-weight: 400; line-height: 1.5; text-align: left; box-shadow: 0 14px 36px rgba(20, 28, 18, 0.28); } body.my-dashboard .tooltip.bs-tooltip-end .tooltip-arrow::before, body.my-dashboard .tooltip[data-popper-placement^="right"] .tooltip-arrow::before { border-right-color: #20301f; } body.my-dashboard .tooltip.bs-tooltip-start .tooltip-arrow::before, body.my-dashboard .tooltip[data-popper-placement^="left"] .tooltip-arrow::before { border-left-color: #20301f; } body.my-dashboard .tooltip.bs-tooltip-top .tooltip-arrow::before, body.my-dashboard .tooltip[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: #20301f; } body.my-dashboard .tooltip.bs-tooltip-bottom .tooltip-arrow::before, body.my-dashboard .tooltip[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: #20301f; } /* ============================================================ Dashboard nav inline search field — matches the storefront nav search so the top bar reads as one consistent bar site-wide. ============================================================ */ body.my-dashboard #header-dashboard .header-actions-search { display: flex; align-items: center; } body.my-dashboard #header-dashboard .g2p-dash-navsearch { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 13px; min-width: 196px; max-width: 240px; margin: 0; border: 1px solid rgba(47, 79, 53, 0.18); border-radius: 999px; background: rgba(255, 253, 247, 0.72); transition: border-color 160ms ease, background 160ms ease; } body.my-dashboard #header-dashboard .g2p-dash-navsearch:focus-within { border-color: rgba(200, 95, 45, 0.45); background: #fff; } body.my-dashboard #header-dashboard .g2p-dash-navsearch-btn { display: inline-flex; align-items: center; border: 0; padding: 0; background: transparent; color: var(--g2p-dash-orange); cursor: pointer; } body.my-dashboard #header-dashboard .g2p-dash-navsearch-input { width: 100%; min-width: 0; border: 0; padding: 0; background: transparent; outline: none; font: inherit; font-size: 0.9rem; color: var(--g2p-dash-ink); } body.my-dashboard #header-dashboard .g2p-dash-navsearch-input::placeholder { color: rgba(23, 32, 24, 0.45); } @media (max-width: 1180px) { body.my-dashboard #header-dashboard .g2p-dash-navsearch { min-width: 0; max-width: none; width: 42px; padding: 0; justify-content: center; } body.my-dashboard #header-dashboard .g2p-dash-navsearch-input { display: none; } } /* * Gear2Peer brand-styled map * -------------------------- * Same paper/green look as the iOS app's MapKit view. We render OpenStreetMap * tiles via Leaflet, then pull them through a CSS filter stack that mirrors the * SwiftUI .saturation/.contrast/.colorMultiply modifiers, plus a paper-color * blend overlay and an ink-grain vignette. * * Privacy: pins are rendered as ~400 m translucent circles around a neighborhood * centroid. The browser never receives a precise shop address. Exact pickup is * exchanged in chat after booking. Mirror this in PHP: emit neighborhood lat/lng * to the page, not the raw shop lat/lng. */ .g2p-map { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: #ECE6D7; isolation: isolate; /* contains the blend-mode overlay */ } .g2p-map--compact { aspect-ratio: 16 / 9; border-radius: 18px; } .g2p-map__canvas { position: absolute; inset: 0; /* Light desaturation on OSM tiles so they sit calmly inside the app chrome. * No heavy filter stack — the previous brand-tinting attempts were trying * to do work that ultimately needs a custom tile style (paid or self-hosted). * For zero-cost we accept "OpenStreetMap with a gentle nudge". */ filter: saturate(0.80); } /* Very light paper wash so the tiles don't feel disconnected from the rest of * the brand. Kept subtle on purpose. */ .g2p-map__canvas::after { content: ''; position: absolute; inset: 0; background: rgb(244 240 230 / 0.18); mix-blend-mode: multiply; pointer-events: none; } /* No-ops kept so existing markup continues to parse cleanly. */ .g2p-map__tint, .g2p-map__warmth { display: none; } /* Soft ink vignette — paper-edge feel. Much lighter than the original. */ .g2p-map__vignette { position: absolute; inset: 0; background: radial-gradient( circle at center, transparent 0%, transparent 45%, rgba(28, 31, 26, 0.06) 100% ); pointer-events: none; z-index: 402; } /* Hand-lettered neighborhood label, anchored to a lat/lng via Leaflet DivIcon. */ .g2p-map__label { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; font-weight: 600; color: rgb(28 31 26 / 0.40); letter-spacing: 0.10em; text-transform: uppercase; white-space: nowrap; user-select: none; pointer-events: none; text-shadow: 0 1px 0 rgb(255 255 255 / 0.40); } .g2p-map__label--display { color: rgb(255 255 255 / 0.62); text-transform: none; letter-spacing: 0; font-size: 28px; text-shadow: 0 2px 6px rgb(0 0 0 / 0.18); } /* Approximation circle. Leaflet's L.circle path stroked + filled with brand color. */ .g2p-map__circle { fill: rgb(47 74 51 / 0.18); stroke: rgb(47 74 51 / 0.65); stroke-width: 1.2; transition: fill 160ms ease, stroke 160ms ease, stroke-width 160ms ease; } .g2p-map__circle--active { fill: rgb(47 74 51 / 0.30); stroke: rgb(47 74 51 / 0.95); stroke-width: 1.8; } /* Price bubble — DivIcon HTML, anchored at the circle's center. */ .g2p-map__pin { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer; transition: transform 180ms ease; } .g2p-map__pin-bubble { font-family: ui-serif, Georgia, 'Times New Roman', serif; font-size: 11px; font-weight: 600; color: #1C1F1A; background: rgb(255 255 255 / 0.97); border: 0.5px solid rgb(28 31 26 / 0.10); border-radius: 999px; padding: 5px 11px; box-shadow: 0 2px 6px rgb(0 0 0 / 0.12); white-space: nowrap; } .g2p-map__pin-dot { width: 5px; height: 5px; border-radius: 50%; background: white; border: 1px solid rgb(28 31 26 / 0.20); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); } .g2p-map__pin--active .g2p-map__pin-bubble { font-size: 13px; padding: 7px 14px; color: white; background: #2F4A33; border-color: transparent; box-shadow: 0 5px 10px rgb(0 0 0 / 0.24); } .g2p-map__pin--active .g2p-map__pin-dot { width: 7px; height: 7px; background: #2F4A33; border-color: rgb(255 255 255 / 0.82); } .g2p-map__pin--active { transform: translate(-50%, -50%) scale(1.05); } /* Suppress Leaflet's default UI chrome — Gear2Peer chrome is provided by the * page (search bar, filter chips, bottom sheet). */ .g2p-map .leaflet-control-container, .g2p-map .leaflet-control-attribution { display: none !important; } .g2p-map .leaflet-marker-icon, .g2p-map .leaflet-marker-shadow { background: transparent; border: 0; } /* Small attribution chip kept for OSM compliance, styled to fit the brand. */ .g2p-map__attribution { position: absolute; right: 8px; bottom: 6px; z-index: 402; font-size: 9px; color: rgb(28 31 26 / 0.42); background: rgb(255 255 255 / 0.62); border-radius: 4px; padding: 2px 6px; pointer-events: auto; text-decoration: none; } .g2p-map__attribution:hover { color: rgb(28 31 26 / 0.72); } /* Design fonts (Fraunces / Inter Tight / JetBrains Mono) are loaded non-blocking in _partial/header/commonHeadMiddle.php to avoid a render-blocking CSS @import. */ body.g2p-marketplace-ready, body.is--blog, .g2p-home, .g2p-listing-page, .g2p-detail-page, .g2p-cart-page, .g2p-booking-page, .g2p-supplier-page, .g2p-auth-page, .g2p-how-page, .g2p-areas-page, .g2p-guides-page, .g2p-blog-page, .g2p-static-page { --g2p-map: #F4F0E6; --g2p-paper: #FFFFFF; --g2p-paper-2: #ECE6D7; --g2p-surface-2: #FAF7EE; --g2p-ink: #1C1F1A; --g2p-ink-2: #3E4438; --g2p-muted: #6E7163; --g2p-pine: #2F4A33; --g2p-teal: #2F4A33; --g2p-glacier: #FAF7EE; --g2p-clay: #C45A2C; --g2p-sun: #E6B547; --g2p-line: rgba(28, 31, 26, 0.12); --g2p-line-strong: rgba(28, 31, 26, 0.2); --g2p-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06); --g2p-radius: 14px; --g2p-radius-card: 24px; --g2p-radius-panel: 22px; --g2p-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --g2p-serif: "Fraunces", Georgia, serif; --g2p-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --g2p-cartography-field: url("data:image/svg+xml,%3Csvg width='1800' height='1300' viewBox='0 0 1800 1300' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%231C1F1A' stroke-opacity='.052' stroke-width='1.15' stroke-linecap='round'%3E%3Cpath d='M-220 174C96 76 344 78 640 150c336 82 590 84 912-2 154-42 318-58 520-18'/%3E%3Cpath d='M-230 298C92 206 356 210 658 282c330 78 588 82 914-6 168-46 346-58 520-12'/%3E%3Cpath d='M-236 432C96 344 374 346 686 416c330 74 598 78 936-12 168-44 340-52 496-4'/%3E%3Cpath d='M-218 578C116 488 388 494 710 562c326 68 604 72 936-22 164-46 330-52 482-4'/%3E%3Cpath d='M-230 724C94 638 376 640 710 710c342 70 616 70 954-22 166-46 332-48 492 0'/%3E%3Cpath d='M-220 876C116 790 414 790 746 860c330 70 628 70 960-22 160-44 322-48 476-4'/%3E%3Cpath d='M-238 1034C96 946 396 946 744 1018c342 70 638 70 972-18 162-42 330-46 496 2'/%3E%3Cpath d='M-224 1192C104 1104 404 1100 760 1174c344 72 642 74 976-16 160-42 324-46 486-2'/%3E%3C/g%3E%3Cg fill='none' stroke='%232F4A33' stroke-opacity='.036' stroke-width='1.05' stroke-linecap='round'%3E%3Cpath d='M190-140C330 26 310 178 166 314C24 448 42 584 216 728c160 132 178 282 40 448c-42 50-68 106-80 170'/%3E%3Cpath d='M936-120C1052 64 1020 220 856 346c-148 114-156 250-26 408c130 158 128 304-8 444c-42 44-74 92-94 148'/%3E%3Cpath d='M1628-130c-150 154-154 306-14 456c138 148 132 304-18 468c-126 138-134 292-22 462'/%3E%3C/g%3E%3C/svg%3E"); color: var(--g2p-ink); font-family: var(--g2p-sans); line-height: 1.5; } .g2p-home *, .g2p-home *::before, .g2p-home *::after, .g2p-listing-page *, .g2p-listing-page *::before, .g2p-listing-page *::after, .g2p-detail-page *, .g2p-detail-page *::before, .g2p-detail-page *::after, .g2p-cart-page *, .g2p-cart-page *::before, .g2p-cart-page *::after, .g2p-booking-page *, .g2p-booking-page *::before, .g2p-booking-page *::after, .g2p-supplier-page *, .g2p-supplier-page *::before, .g2p-supplier-page *::after, .g2p-auth-page *, .g2p-auth-page *::before, .g2p-auth-page *::after, .g2p-how-page *, .g2p-how-page *::before, .g2p-how-page *::after, .g2p-areas-page *, .g2p-areas-page *::before, .g2p-areas-page *::after, .g2p-guides-page *, .g2p-guides-page *::before, .g2p-guides-page *::after, .g2p-blog-page *, .g2p-blog-page *::before, .g2p-blog-page *::after, .g2p-static-page *, .g2p-static-page *::before, .g2p-static-page *::after { box-sizing: border-box; } .g2p-marketplace-kicker, .g2p-map-line, .g2p-card-label, .g2p-field-label { margin: 0; color: var(--g2p-clay); font-family: var(--g2p-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; } .g2p-marketplace-card, .g2p-marketplace-panel { border: 1px solid var(--g2p-line); border-radius: var(--g2p-radius-panel); background: rgba(255, 255, 255, 0.94); box-shadow: var(--g2p-shadow); } .g2p-marketplace-title { margin: 0; color: var(--g2p-ink); font-family: var(--g2p-serif); font-weight: 500; letter-spacing: -0.02em; line-height: 1; } .g2p-trust-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .g2p-trust-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--g2p-muted); font-size: 0.92rem; line-height: 1.4; } .g2p-trust-list li::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-top: 0.45em; border-radius: 50%; background: var(--g2p-pine); } .g2p-home .btn-brand, .g2p-listing-page .btn-brand, .g2p-detail-page .btn-brand, .g2p-cart-page .btn-brand, .g2p-booking-page .btn-brand, .g2p-home .btn-theme, .g2p-listing-page .btn-theme, .g2p-detail-page .btn-theme, .g2p-cart-page .btn-theme, .g2p-booking-page .btn-theme, .g2p-booking-page .btn-primary, .g2p-detail-page .btn--primary { border-color: transparent; border-radius: 999px; background: var(--g2p-pine) !important; color: var(--g2p-map) !important; font-weight: 600; } .g2p-home .btn-brand:hover, .g2p-listing-page .btn-brand:hover, .g2p-detail-page .btn-brand:hover, .g2p-cart-page .btn-brand:hover, .g2p-booking-page .btn-brand:hover, .g2p-home .btn-theme:hover, .g2p-listing-page .btn-theme:hover, .g2p-detail-page .btn-theme:hover, .g2p-cart-page .btn-theme:hover, .g2p-booking-page .btn-theme:hover, .g2p-booking-page .btn-primary:hover, .g2p-detail-page .btn--primary:hover { background: var(--g2p-clay) !important; color: #ffffff !important; } .g2p-home .collection-newsletter, .g2p-listing-page .collection-newsletter, .g2p-detail-page .collection-newsletter, .g2p-cart-page .collection-newsletter, .g2p-booking-page .collection-newsletter { background: #2F4A33 !important; color: #F4F0E6 !important; } .g2p-home input, .g2p-home select, .g2p-home textarea, .g2p-listing-page input, .g2p-listing-page select, .g2p-listing-page textarea, .g2p-detail-page input, .g2p-detail-page select, .g2p-detail-page textarea, .g2p-cart-page input, .g2p-cart-page select, .g2p-cart-page textarea, .g2p-booking-page input, .g2p-booking-page select, .g2p-booking-page textarea, .g2p-blog-page input, .g2p-blog-page select, .g2p-blog-page textarea { border-color: var(--g2p-line); border-radius: 10px; color: var(--g2p-ink); } .g2p-home a, .g2p-listing-page a, .g2p-detail-page a, .g2p-cart-page a, .g2p-booking-page a, .g2p-home button, .g2p-listing-page button, .g2p-detail-page button, .g2p-cart-page button, .g2p-booking-page button, .g2p-blog-page a, .g2p-blog-page button { -webkit-tap-highlight-color: rgba(47, 74, 51, 0.18); touch-action: manipulation; } .g2p-home img, .g2p-listing-page img, .g2p-detail-page img, .g2p-cart-page img, .g2p-booking-page img, .g2p-blog-page img { max-width: 100%; } #collection-sidebar[data-g2p-filter-rail], .productFilters-js { --g2p-pine: #2F4A33; --g2p-clay: #C45A2C; --g2p-line: rgba(28, 31, 26, 0.12); --g2p-price-thumb-hit: 12px; --g2p-price-track-height: 3px; } .g2p-pjax-loading #collection-sidebar[data-g2p-filter-rail] .range-input, .g2p-pjax-loading .productFilters-js .range-input { visibility: hidden; } #collection-sidebar[data-g2p-filter-rail] .range-input input[type="range"], .productFilters-js .range-input input[type="range"] { border: 0 !important; background: transparent !important; box-shadow: none !important; accent-color: var(--g2p-clay, #C45A2C) !important; -webkit-appearance: none; appearance: none; } #collection-sidebar[data-g2p-filter-rail] .range-input input[type="range"]::-webkit-slider-runnable-track, .productFilters-js .range-input input[type="range"]::-webkit-slider-runnable-track { height: var(--g2p-price-track-height, 3px) !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } #collection-sidebar[data-g2p-filter-rail] .range-input input[type="range"]::-webkit-slider-thumb, .productFilters-js .range-input input[type="range"]::-webkit-slider-thumb { width: var(--g2p-price-thumb-hit, 20px) !important; height: var(--g2p-price-thumb-hit, 20px) !important; margin-top: calc((var(--g2p-price-track-height, 3px) - var(--g2p-price-thumb-hit, 20px)) / 2) !important; border: 0 !important; border-radius: 50% !important; background: var(--g2p-clay, #C45A2C) !important; box-shadow: none !important; opacity: 1 !important; -webkit-appearance: none !important; appearance: none !important; } #collection-sidebar[data-g2p-filter-rail] .range-input input[type="range"]::-moz-range-track, .productFilters-js .range-input input[type="range"]::-moz-range-track { height: var(--g2p-price-track-height, 3px) !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } #collection-sidebar[data-g2p-filter-rail] .range-input input[type="range"]::-moz-range-thumb, .productFilters-js .range-input input[type="range"]::-moz-range-thumb { width: var(--g2p-price-thumb-hit, 20px) !important; height: var(--g2p-price-thumb-hit, 20px) !important; border: 0 !important; border-radius: 50% !important; background: var(--g2p-clay, #C45A2C) !important; box-shadow: none !important; opacity: 1 !important; } .g2p-home h1, .g2p-home h2, .g2p-home h3, .g2p-listing-page h1, .g2p-listing-page h2, .g2p-listing-page h3, .g2p-detail-page h1, .g2p-detail-page h2, .g2p-detail-page h3, .g2p-cart-page h1, .g2p-cart-page h2, .g2p-cart-page h3, .g2p-booking-page h1, .g2p-booking-page h2, .g2p-booking-page h3, .g2p-supplier-page h1, .g2p-supplier-page h2, .g2p-supplier-page h3, .g2p-auth-page h1, .g2p-auth-page h2, .g2p-auth-page h3, .g2p-areas-page h1, .g2p-areas-page h2, .g2p-areas-page h3, .g2p-guides-page h1, .g2p-guides-page h2, .g2p-guides-page h3, .g2p-blog-page h1, .g2p-blog-page h2, .g2p-blog-page h3 { overflow-wrap: anywhere; } /* Gear2Peer field-guide header over the active Yo!Rent/Fashion shell. */ #Fashion.g2p-site-header { --g2p-header-map: #F4F0E6; --g2p-header-paper: #FFFDF7; --g2p-header-ink: #1C1F1A; --g2p-header-muted: #5E675C; --g2p-header-line: rgba(47, 74, 51, 0.18); --g2p-header-pine: #2F4A33; --g2p-header-coast: #2F4A33; --g2p-header-clay: #C95F2D; position: relative; z-index: 30; border: 0; background: var(--g2p-header-map); box-shadow: none; color: var(--g2p-header-ink); font-family: "Inter Tight", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } #Fashion.g2p-site-header .container { width: min(100% - 48px, 1240px); max-width: none; padding-right: 0; padding-left: 0; } #Fashion.g2p-site-header .header-top { min-height: 38px; border-bottom: 1px solid var(--g2p-header-line); background: linear-gradient(90deg, rgba(47, 74, 51, 0.08), rgba(244, 240, 230, 0.86) 46%, rgba(201, 95, 45, 0.08)), var(--g2p-header-map); color: var(--g2p-header-coast); } #Fashion.g2p-site-header .header-top-inner { min-height: 38px; gap: 20px; } #Fashion.g2p-site-header .header-top-left, #Fashion.g2p-site-header .header-top-center, #Fashion.g2p-site-header .header-top-right { min-width: 0; } #Fashion.g2p-site-header .location-actions, #Fashion.g2p-site-header .curtate { gap: 12px; align-items: center; } #Fashion.g2p-site-header .select-by { min-height: 30px; padding: 0 14px 0 0; border-right: 1px solid rgba(47, 74, 51, 0.28); color: var(--g2p-header-coast); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; } #Fashion.g2p-site-header .geo-location-trigger { min-height: 30px; padding: 0; border: 0; background: transparent; color: var(--g2p-header-coast); font-size: 0.82rem; font-weight: 800; } #Fashion.g2p-site-header .geo-location-trigger .svg, #Fashion.g2p-site-header .curtate .svg { color: var(--g2p-header-coast); fill: currentColor; } #Fashion.g2p-site-header .geo-location-selected { max-width: 220px; color: var(--g2p-header-coast); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #Fashion.g2p-site-header .slogan { color: var(--g2p-header-coast); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } #Fashion.g2p-site-header .curtate, #Fashion.g2p-site-header .curtate a, #Fashion.g2p-site-header .curtate-item { color: var(--g2p-header-coast); font-size: 0.78rem; font-weight: 800; } #Fashion.g2p-site-header .header-main { border-bottom: 1px solid rgba(28, 31, 26, 0.12); background: radial-gradient(circle at 10% 0%, rgba(230, 181, 71, 0.12), transparent 26%), var(--g2p-header-paper); box-shadow: 0 16px 38px rgba(22, 27, 24, 0.06); } #Fashion.g2p-site-header .header-main-inner { min-height: 70px; gap: 18px; } #Fashion.g2p-site-header .header-main-left { min-width: 0; gap: 22px; } #Fashion.g2p-site-header .logo { width: auto; min-width: 78px; margin: 0; padding: 5px 8px; border: 1px solid rgba(47, 74, 51, 0.2); border-radius: 14px; background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36); } #Fashion.g2p-site-header .logo a { display: flex; align-items: center; justify-content: center; } #Fashion.g2p-site-header .logo img { width: auto; max-width: 88px; height: 48px; object-fit: contain; } #Fashion.g2p-site-header .navigation-wrapper { min-width: 0; margin-left: 0; } #Fashion.g2p-site-header .navigation { gap: 8px; align-items: center; } #Fashion.g2p-site-header .navigation > li > a, #Fashion.g2p-site-header .navigation > li > button, #Fashion.g2p-site-header .navigation a { min-height: 38px; padding: 9px 12px; border-radius: 999px; color: var(--g2p-header-ink); font-size: 0.92rem; font-weight: 800; letter-spacing: 0; line-height: 1; text-decoration: none; } #Fashion.g2p-site-header .navigation > li > a:hover, #Fashion.g2p-site-header .navigation > li > a:focus-visible, #Fashion.g2p-site-header .navigation a:hover, #Fashion.g2p-site-header .navigation a:focus-visible { background: rgba(47, 74, 51, 0.1); color: var(--g2p-header-pine); } #Fashion.g2p-site-header .quick-nav { gap: 8px; align-items: center; } #Fashion.g2p-site-header .quick-nav-item { margin: 0; } #Fashion.g2p-site-header .quick-nav-links, #Fashion.g2p-site-header .header__account > a, #Fashion.g2p-site-header .cart a, #Fashion.g2p-site-header .cart button { display: inline-flex; align-items: center; justify-content: center; width: 40px; min-width: 40px; height: 40px; border: 1px solid rgba(47, 74, 51, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.7); color: var(--g2p-header-ink); transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } #Fashion.g2p-site-header .quick-nav-links:hover, #Fashion.g2p-site-header .header__account > a:hover, #Fashion.g2p-site-header .cart a:hover, #Fashion.g2p-site-header .cart button:hover { border-color: rgba(47, 74, 51, 0.34); background: var(--g2p-header-pine); color: var(--g2p-header-map); transform: translateY(-1px); } #Fashion.g2p-site-header .quick-nav .svg { width: 18px; height: 18px; fill: currentColor; } #Fashion.g2p-site-header .g2p-header-cta-wrap { display: flex; } #Fashion.g2p-site-header .g2p-header-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--g2p-header-clay); color: #ffffff; font-size: 0.85rem; font-weight: 900; line-height: 1; text-decoration: none; box-shadow: 0 12px 26px rgba(201, 95, 45, 0.18); } #Fashion.g2p-site-header .g2p-header-cta:hover, #Fashion.g2p-site-header .g2p-header-cta:focus-visible { background: var(--g2p-header-pine); color: var(--g2p-header-map); } @media (max-width: 991px) { #Fashion.g2p-site-header .container { width: min(100% - 28px, 1240px); } #Fashion.g2p-site-header .header-top-center, #Fashion.g2p-site-header .header-top-right { display: none; } #Fashion.g2p-site-header .header-main-inner { min-height: 64px; } #Fashion.g2p-site-header .logo { min-width: 68px; padding: 4px 6px; } #Fashion.g2p-site-header .logo img { max-width: 76px; height: 42px; } #Fashion.g2p-site-header .g2p-header-cta-wrap { display: none; } } @media (max-width: 767px) { #Fashion.g2p-site-header .header-top { display: none; } #Fashion.g2p-site-header .header-main { border-bottom-color: rgba(47, 74, 51, 0.16); } #Fashion.g2p-site-header .quick-nav { gap: 6px; } #Fashion.g2p-site-header .quick-nav-links, #Fashion.g2p-site-header .header__account > a, #Fashion.g2p-site-header .cart a, #Fashion.g2p-site-header .cart button { width: 38px; min-width: 38px; height: 38px; } } /* Gear2Peer Claude prototype header. This replaces the Yo!Rent/Fashion shell with the same sticky, blurred field-guide marketplace chrome as the uploaded design. */ #Fashion.g2p-site-header { --g2p-claude-bg: #F4F0E6; --g2p-claude-ink: #1C1F1A; --g2p-claude-ink-2: #3E4438; --g2p-claude-muted: #6E7163; --g2p-claude-line: rgba(28, 31, 26, 0.12); --g2p-claude-line-2: rgba(28, 31, 26, 0.20); --g2p-claude-primary: #2F4A33; --g2p-claude-primary-ink: #F4F0E6; --g2p-claude-accent: #C45A2C; position: sticky; top: 0; z-index: 50; border: 0; border-bottom: 1px solid var(--g2p-claude-line); background: rgba(244, 240, 230, 0.9); color: var(--g2p-claude-ink); font-family: "Inter Tight", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; box-shadow: none; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } #Fashion.g2p-site-header .g2p-claude-header { background: transparent; } #Fashion.g2p-site-header .g2p-claude-shell { width: min(100% - 64px, 1280px); margin: 0 auto; } #Fashion.g2p-site-header .g2p-claude-header-row { display: flex; height: 68px; align-items: center; gap: 30px; } #Fashion.g2p-site-header .g2p-claude-brand { display: inline-flex; flex: 0 0 auto; align-items: center; color: var(--g2p-claude-ink); text-decoration: none; cursor: pointer; user-select: none; -webkit-user-select: none; } #Fashion.g2p-site-header .g2p-claude-brand:hover, #Fashion.g2p-site-header .g2p-claude-brand:focus-visible { color: var(--g2p-claude-ink); text-decoration: none; } #Fashion.g2p-site-header .g2p-claude-brand *, #Fashion.g2p-site-header .logo a, #Fashion.g2p-site-header .logo a * { cursor: pointer; } #Fashion.g2p-site-header .g2p-claude-brand-desktop, #Fashion.g2p-site-header .g2p-claude-brand-mobile { display: inline-flex; height: 36px; align-items: center; } #Fashion.g2p-site-header .g2p-claude-brand-desktop { gap: 12px; } #Fashion.g2p-site-header .g2p-claude-brand-mobile { display: none; gap: 8px; } #Fashion.g2p-site-header .g2p-claude-brand-lockup { display: block; width: 118px; height: 34px; overflow: visible; flex: 0 0 118px; } #Fashion.g2p-site-header .g2p-claude-brand-landscape { display: block; width: 118px; max-width: 100%; height: auto; object-fit: contain; transform: none; } #Fashion.g2p-site-header .g2p-claude-brand-wordmark { display: block; width: 106px; height: auto; flex: 0 0 106px; object-fit: contain; transform: none; } #Fashion.g2p-site-header .g2p-claude-brand-mark { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: transparent; color: var(--g2p-claude-primary); } #Fashion.g2p-site-header .g2p-claude-brand-mark img { display: block; width: 36px; height: 36px; object-fit: contain; } #Fashion.g2p-site-header .g2p-claude-brand-name { color: var(--g2p-claude-ink); font-family: "Fraunces", Georgia, serif; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; text-transform: lowercase; } #Fashion.g2p-site-header .g2p-claude-brand-name em { color: var(--g2p-claude-accent); font-style: normal; } #Fashion.g2p-site-header .g2p-claude-nav { display: flex; flex: 0 0 auto; min-width: 0; align-items: center; gap: 22px; margin-left: 0; } #Fashion.g2p-site-header .g2p-claude-nav a { position: relative; display: inline-flex; align-items: center; min-height: 34px; border-bottom: 2px solid transparent; color: var(--g2p-claude-ink-2); font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; transform: translateY(4px); transition: border-color 0.15s ease, color 0.15s ease; } #Fashion.g2p-site-header .g2p-claude-nav a::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 999px; background: var(--g2p-claude-accent); opacity: 0; transform: scaleX(0.35); transition: opacity 0.15s ease, transform 0.15s ease; } #Fashion.g2p-site-header .g2p-claude-nav a:hover, #Fashion.g2p-site-header .g2p-claude-nav a:focus-visible { border-color: var(--g2p-claude-accent); color: var(--g2p-claude-ink); text-decoration: none; } #Fashion.g2p-site-header .g2p-claude-spacer { flex: 1 1 auto; } #Fashion.g2p-site-header .g2p-claude-actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 10px; } #Fashion.g2p-site-header .g2p-claude-icon-button, #Fashion.g2p-site-header .g2p-claude-search, #Fashion.g2p-site-header .g2p-claude-bag, #Fashion.g2p-site-header .g2p-claude-message, #Fashion.g2p-site-header .g2p-claude-signin, #Fashion.g2p-site-header .g2p-claude-list, #Fashion.g2p-site-header .g2p-claude-account .quick-nav-links, #Fashion.g2p-site-header .g2p-claude-cart .quick-nav-links, #Fashion.g2p-site-header .g2p-claude-cart button, #Fashion.g2p-site-header .g2p-claude-cart a { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; border-radius: 999px; font-size: 13px; font-weight: 500; line-height: 1; text-decoration: none; white-space: nowrap; transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } #Fashion.g2p-site-header .g2p-claude-icon-button, #Fashion.g2p-site-header .g2p-claude-account .quick-nav-links, #Fashion.g2p-site-header .g2p-claude-cart .quick-nav-links, #Fashion.g2p-site-header .g2p-claude-cart button, #Fashion.g2p-site-header .g2p-claude-cart a { width: 38px; min-width: 38px; padding: 0; border: 1px solid var(--g2p-claude-line-2); background: transparent; color: var(--g2p-claude-ink); } #Fashion.g2p-site-header .g2p-claude-signin { position: relative; top: 1px; gap: 7px; height: 38px; padding: 0 14px; border: 1px solid var(--g2p-claude-line-2); background: transparent; color: var(--g2p-claude-ink); } #Fashion.g2p-site-header .g2p-claude-search { position: relative; top: 1px; gap: 7px; height: 38px; padding: 0 14px; border: 1px solid rgba(196, 90, 44, 0.18); background: rgba(196, 90, 44, 0.08); color: var(--g2p-claude-accent); } /* Inline keyword search field in the nav (replaces the old "Search" button) */ #Fashion.g2p-site-header .g2p-claude-searchform { display: inline-flex; align-items: center; gap: 6px; position: relative; top: 1px; height: 38px; padding: 0 14px 0 13px; min-width: 190px; max-width: 230px; margin: 0; border: 1px solid rgba(47, 79, 53, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.55); transition: border-color 160ms ease, background 160ms ease; } #Fashion.g2p-site-header .g2p-claude-searchform:focus-within { border-color: rgba(196, 90, 44, 0.45); background: #fff; } #Fashion.g2p-site-header .g2p-claude-searchform-btn { display: inline-flex; align-items: center; border: 0; padding: 0; background: transparent; color: var(--g2p-claude-accent); cursor: pointer; } #Fashion.g2p-site-header .g2p-claude-searchform-input { width: 100%; min-width: 0; border: 0; padding: 0; background: transparent; outline: none; font: inherit; font-size: 0.9rem; color: var(--g2p-claude-ink); } #Fashion.g2p-site-header .g2p-claude-searchform-input::placeholder { color: rgba(23, 32, 24, 0.45); } @media (max-width: 1120px) { #Fashion.g2p-site-header .g2p-claude-searchform { min-width: 0; max-width: none; width: 44px; padding: 0; justify-content: center; } #Fashion.g2p-site-header .g2p-claude-searchform-input { display: none; } #Fashion.g2p-site-header .g2p-claude-searchform-btn { width: 100%; justify-content: center; } } #Fashion.g2p-site-header .g2p-claude-bag { position: relative; top: 1px; gap: 7px; height: 38px; padding: 0 14px; border: 1px solid var(--g2p-claude-line-2); background: rgba(255, 255, 255, 0.36); color: var(--g2p-claude-ink); } #Fashion.g2p-site-header .g2p-claude-message { position: relative; top: 1px; gap: 7px; height: 38px; padding: 0 14px; border: 1px solid rgba(47, 79, 53, 0.16); background: rgba(47, 79, 53, 0.08); color: var(--g2p-claude-primary); } #Fashion.g2p-site-header .g2p-claude-list { position: relative; top: 1px; gap: 7px; height: 38px; padding: 0 15px; border: 1px solid transparent; background: var(--g2p-claude-primary); color: var(--g2p-claude-primary-ink); } #Fashion.g2p-site-header .g2p-claude-signin svg, #Fashion.g2p-site-header .g2p-claude-signin span, #Fashion.g2p-site-header .g2p-claude-search svg, #Fashion.g2p-site-header .g2p-claude-search span, #Fashion.g2p-site-header .g2p-claude-bag svg, #Fashion.g2p-site-header .g2p-claude-bag span, #Fashion.g2p-site-header .g2p-claude-message svg, #Fashion.g2p-site-header .g2p-claude-message span, #Fashion.g2p-site-header .g2p-claude-list svg, #Fashion.g2p-site-header .g2p-claude-list span { display: block; transform: none; } #Fashion.g2p-site-header .g2p-claude-icon-button:hover, #Fashion.g2p-site-header .g2p-claude-icon-button:focus-visible, #Fashion.g2p-site-header .g2p-claude-search:hover, #Fashion.g2p-site-header .g2p-claude-search:focus-visible, #Fashion.g2p-site-header .g2p-claude-bag:hover, #Fashion.g2p-site-header .g2p-claude-bag:focus-visible, #Fashion.g2p-site-header .g2p-claude-message:hover, #Fashion.g2p-site-header .g2p-claude-message:focus-visible, #Fashion.g2p-site-header .g2p-claude-signin:hover, #Fashion.g2p-site-header .g2p-claude-signin:focus-visible, #Fashion.g2p-site-header .g2p-claude-account .quick-nav-links:hover, #Fashion.g2p-site-header .g2p-claude-account .quick-nav-links:focus-visible, #Fashion.g2p-site-header .g2p-claude-cart .quick-nav-links:hover, #Fashion.g2p-site-header .g2p-claude-cart .quick-nav-links:focus-visible, #Fashion.g2p-site-header .g2p-claude-cart button:hover, #Fashion.g2p-site-header .g2p-claude-cart a:hover { border-color: var(--g2p-claude-ink); background: rgba(28, 31, 26, 0.04); color: var(--g2p-claude-ink); text-decoration: none; transform: translateY(-1px); } #Fashion.g2p-site-header .g2p-claude-search.is-active, #Fashion.g2p-site-header .g2p-claude-search[aria-current="page"] { border-color: transparent; background: var(--g2p-claude-accent); color: #FFFFFF; } #Fashion.g2p-site-header .g2p-claude-bag.is-active, #Fashion.g2p-site-header .g2p-claude-bag[aria-current="page"] { border-color: transparent; background: var(--g2p-claude-accent); color: #FFFFFF; } #Fashion.g2p-site-header .g2p-claude-message.is-active, #Fashion.g2p-site-header .g2p-claude-message[aria-current="page"] { border-color: transparent; background: var(--g2p-claude-primary); color: #FFFFFF; } #Fashion.g2p-site-header .g2p-claude-message-count { position: absolute; top: -6px; right: -5px; display: grid; min-width: 18px; height: 18px; place-items: center; padding: 0 5px; border: 2px solid var(--g2p-claude-bg); border-radius: 999px; background: var(--g2p-claude-accent); color: #ffffff; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 9px; font-weight: 800; line-height: 1; } #Fashion.g2p-site-header .g2p-claude-list:hover, #Fashion.g2p-site-header .g2p-claude-list:focus-visible { background: var(--g2p-claude-accent); color: #FFFFFF; text-decoration: none; transform: translateY(-1px); } #Default .short-links .g2p-legacy-message-action { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; min-width: 40px; height: 40px; padding: 0; border: 1px solid rgba(47, 79, 53, 0.16); border-radius: 999px; background: rgba(47, 79, 53, 0.08); color: var(--g2p-claude-primary); text-decoration: none; transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } #Default .short-links .g2p-legacy-message-action:hover, #Default .short-links .g2p-legacy-message-action:focus-visible { border-color: var(--g2p-claude-primary); background: var(--g2p-claude-primary); color: #FFFFFF; text-decoration: none; transform: translateY(-1px); } #Default .short-links .g2p-legacy-message-action.is-active, #Default .short-links .g2p-legacy-message-action[aria-current="page"] { border-color: transparent; background: var(--g2p-claude-primary); color: #FFFFFF; } #Default .short-links .g2p-legacy-message-action .svg { display: block; width: 17px; height: 17px; fill: none; } #Default .short-links .g2p-legacy-message-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } #Default .short-links .g2p-legacy-message-count { position: absolute; top: -6px; right: -5px; display: grid; min-width: 18px; height: 18px; place-items: center; padding: 0 5px; border: 2px solid var(--g2p-claude-bg); border-radius: 999px; background: var(--g2p-claude-accent); color: #FFFFFF; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 9px; font-weight: 800; line-height: 1; } #Fashion.g2p-site-header .g2p-claude-actions .quick-nav-item { margin: 0; } #Fashion.g2p-site-header .g2p-claude-actions .svg { width: 17px; height: 17px; fill: currentColor; } #Fashion.g2p-site-header .g2p-claude-cart { position: relative; } #Fashion.g2p-site-header .g2p-claude-cart .cartQuantity { position: absolute; top: -2px; right: -3px; display: grid; min-width: 16px; height: 16px; place-items: center; padding: 0 4px; border: 2px solid var(--g2p-claude-bg); border-radius: 999px; background: var(--g2p-claude-primary); color: #ffffff; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 9px; font-weight: 700; line-height: 1; } #Fashion.g2p-site-header .dropdown-menu-account { overflow: visible; width: min(334px, calc(100vw - 28px)); min-width: 304px; padding: 8px; border: 1px solid rgba(28, 31, 26, 0.11); border-radius: 22px; background: linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(244, 240, 230, 0.96)), var(--g2p-cartography-field); background-size: auto, 1200px auto; background-position: center top; color: var(--g2p-claude-ink); box-shadow: 0 22px 56px rgba(28, 31, 26, 0.16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } #Fashion.g2p-site-header .dropdown-menu-account::before { content: ""; position: absolute; top: -7px; right: 24px; width: 14px; height: 14px; border-top: 1px solid rgba(28, 31, 26, 0.11); border-left: 1px solid rgba(28, 31, 26, 0.11); background: rgba(255, 253, 248, 0.98); transform: rotate(45deg); } #Fashion.g2p-site-header .dropdown-menu-account .dropdown-menu-item { margin: 0; } #Fashion.g2p-site-header .dropdown-menu-account .profile-account { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 78px; margin: 0 0 8px; padding: 13px 90px 13px 13px; border: 1px solid rgba(47, 74, 51, 0.12); border-radius: 20px; background: radial-gradient(circle at 100% 0%, rgba(196, 90, 44, 0.11), transparent 34%), linear-gradient(135deg, rgba(47, 74, 51, 0.09), rgba(244, 240, 230, 0.66)); color: var(--g2p-claude-ink); } #Fashion.g2p-site-header .dropdown-menu-account .profile-account::before { content: "Account"; position: absolute; top: 12px; right: 12px; padding: 4px 7px 3px; border: 1px solid rgba(196, 90, 44, 0.14); border-radius: 999px; background: rgba(255, 253, 248, 0.74); color: var(--g2p-claude-accent); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 9px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; } #Fashion.g2p-site-header .dropdown-menu-account .profile-image { width: 54px; height: 54px; min-width: 54px; flex: 0 0 54px; display: flex; align-items: center; justify-content: center; padding: 5px; border: 1px solid rgba(47, 74, 51, 0.14); border-radius: 18px; background: rgba(255, 253, 248, 0.86); box-shadow: inset 0 0 0 3px rgba(244, 240, 230, 0.6); overflow: hidden; box-sizing: border-box; } #Fashion.g2p-site-header .dropdown-menu-account .profile-avatar { display: block; width: 100%; height: 100%; max-width: none; border: 0; border-radius: 14px; background: rgba(47, 74, 51, 0.08); object-fit: contain; object-position: center; box-shadow: none; } #Fashion.g2p-site-header .dropdown-menu-account .profile-data { min-width: 0; padding-top: 0; padding-right: 0; } #Fashion.g2p-site-header .dropdown-menu-account .profile-name { display: block; margin: 0 0 3px; overflow: hidden; color: var(--g2p-claude-ink); font-family: var(--g2p-serif, "Fraunces", Georgia, serif); font-size: 17.5px; font-weight: 760; line-height: 1.03; text-overflow: ellipsis; white-space: nowrap; } #Fashion.g2p-site-header .dropdown-menu-account .profile-email { display: block; margin: 0; overflow: hidden; color: rgba(28, 31, 26, 0.66); font-size: 12px; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } #Fashion.g2p-site-header .dropdown-menu-account .dropdown-menu-link { display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 0 12px; border: 1px solid transparent; border-radius: 14px; color: var(--g2p-claude-ink); font-size: 13px; font-weight: 800; letter-spacing: 0; line-height: 1; text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; } #Fashion.g2p-site-header .dropdown-menu-account .dropdown-menu-link .svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--g2p-claude-primary); fill: currentColor; } #Fashion.g2p-site-header .dropdown-menu-account .dropdown-menu-link:hover, #Fashion.g2p-site-header .dropdown-menu-account .dropdown-menu-link:focus-visible { border-color: rgba(47, 74, 51, 0.16); background: rgba(47, 74, 51, 0.08); color: var(--g2p-claude-primary); text-decoration: none; transform: translateX(2px); } #Fashion.g2p-site-header .dropdown-menu-account .dropdown-menu-link:hover .svg, #Fashion.g2p-site-header .dropdown-menu-account .dropdown-menu-link:focus-visible .svg { color: var(--g2p-claude-accent); } #Fashion.g2p-site-header .dropdown-menu-account .logout { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(28, 31, 26, 0.10); } #Fashion.g2p-site-header .dropdown-menu-account .logout .dropdown-menu-link { color: var(--g2p-claude-primary); } #Fashion.g2p-site-header .dropdown-menu-account .logout .dropdown-menu-link:hover, #Fashion.g2p-site-header .dropdown-menu-account .logout .dropdown-menu-link:focus-visible { border-color: rgba(196, 90, 44, 0.18); background: rgba(196, 90, 44, 0.10); color: var(--g2p-claude-accent); } @media (max-width: 640px) { #Fashion.g2p-site-header .dropdown-menu-account { min-width: min(288px, calc(100vw - 28px)); border-radius: 20px; } } @media (max-width: 980px) { #Fashion.g2p-site-header .g2p-claude-shell { width: min(100% - 36px, 1280px); } #Fashion.g2p-site-header .g2p-claude-header-row { gap: 18px; } #Fashion.g2p-site-header .g2p-claude-nav { gap: 14px; } } @media (max-width: 1120px) { #Fashion.g2p-site-header .g2p-claude-search { width: 38px; min-width: 38px; padding: 0; } #Fashion.g2p-site-header .g2p-claude-search span { display: none; } #Fashion.g2p-site-header .g2p-claude-message { width: 38px; min-width: 38px; padding: 0; } #Fashion.g2p-site-header .g2p-claude-message span { display: none; } } @media (max-width: 900px) { #Fashion.g2p-site-header .g2p-claude-actions { display: none; } } @media (max-width: 820px) { #Fashion.g2p-site-header .g2p-claude-nav { display: none; } #Fashion.g2p-site-header .g2p-claude-signin span { display: none; } #Fashion.g2p-site-header .g2p-claude-signin { width: 38px; min-width: 38px; padding: 0; } } @media (max-width: 640px) { #Fashion.g2p-site-header .g2p-claude-shell { width: min(100% - 24px, 1280px); } #Fashion.g2p-site-header .g2p-claude-header-row { height: 64px; gap: 10px; } #Fashion.g2p-site-header .g2p-claude-brand-desktop { display: none; } #Fashion.g2p-site-header .g2p-claude-brand-mobile { display: inline-flex; } #Fashion.g2p-site-header .g2p-claude-brand-lockup { width: 34px; height: 34px; flex-basis: 34px; } #Fashion.g2p-site-header .g2p-claude-brand-landscape { width: 34px; transform: none; } #Fashion.g2p-site-header .g2p-claude-brand-wordmark { width: 116px; flex-basis: 116px; } #Fashion.g2p-site-header .g2p-claude-brand-mark { width: 34px; height: 34px; } #Fashion.g2p-site-header .g2p-claude-brand-mark img { width: 34px; height: 34px; } #Fashion.g2p-site-header .g2p-claude-brand-name { font-size: 20px; } #Fashion.g2p-site-header .g2p-claude-actions { display: inline-flex; gap: 7px; } #Fashion.g2p-site-header .g2p-claude-signin, #Fashion.g2p-site-header .g2p-claude-search, #Fashion.g2p-site-header .g2p-claude-account, #Fashion.g2p-site-header .g2p-claude-cart { display: none; } #Fashion.g2p-site-header .g2p-claude-message { width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 0; } #Fashion.g2p-site-header .g2p-claude-list { min-height: 36px; padding: 0 12px; font-size: 12px; } #Fashion.g2p-site-header .g2p-claude-list svg { display: none; } } body .cookies-notice { right: auto; bottom: 24px; left: 24px; z-index: 60; width: min(360px, calc(100% - 48px)); border: 1px solid rgba(28, 31, 26, 0.12); border-radius: 16px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 18px 48px rgba(28, 31, 26, 0.14); color: #1C1F1A; font-family: "Inter Tight", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); } body .cookies-notice-content { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px 14px; align-items: center; padding: 16px; } body .cookies-notice-img { width: 40px; height: 40px; object-fit: contain; } body .cookies-notice-message { margin: 0; color: #3E4438; font-size: 13px; line-height: 1.45; } body .cookies-notice-message a { color: #1C1F1A; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } body .cookies-notice-buttons { display: flex; grid-column: 1 / -1; gap: 8px; justify-content: flex-end; } body .cookies-notice .btn { min-height: 38px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1; } body .cookies-notice .btn-decline { border: 1px solid rgba(28, 31, 26, 0.2); background: transparent; color: #1C1F1A; } body .cookies-notice .btn-accept { border: 1px solid transparent; background: #2F4A33; color: #F4F0E6; } body .cookies-notice { display: none !important; } @media (max-width: 640px) { body .cookies-notice { bottom: 14px; left: 14px; width: calc(100% - 28px); } } @media (max-width: 767px) { body.g2p-mobile-marketplace .mobile-actions { position: fixed; right: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 50%; z-index: 1000; display: flex; width: min(326px, calc(100% - 48px)); min-height: 56px; align-items: center; justify-content: space-between; gap: 4px; padding: 5px; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 999px; background: rgba(255, 253, 248, 0.72); box-shadow: 0 16px 44px rgba(28, 31, 26, 0.18); transform: translateX(-50%); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); } body.g2p-mobile-marketplace .mobile-actions::before { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.16)); pointer-events: none; } body.g2p-mobile-marketplace .mobile-actions-item { flex: 1 1 0; min-width: 0; } body.g2p-mobile-marketplace .mobile-actions-link { display: grid; width: 100%; min-width: 0; height: 46px; min-height: 46px; place-items: center; padding: 0; border: 0; border-radius: 999px; background: transparent; color: rgba(28, 31, 26, 0.76); text-decoration: none; transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease; } body.g2p-mobile-marketplace .mobile-actions-link:hover, body.g2p-mobile-marketplace .mobile-actions-link:focus { background: rgba(47, 74, 51, 0.09); color: #2F4A33; text-decoration: none; } body.g2p-mobile-marketplace .mobile-actions-link .svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } body.g2p-mobile-marketplace .mobile-actions-link .txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } body.g2p-mobile-marketplace .mobile-actions-link.is-active, body.g2p-mobile-marketplace.g2p-nav-home-active .mobile-actions-link[data-g2p-mobile-nav="home"], body.g2p-mobile-marketplace.g2p-nav-browse-active .mobile-actions-link[data-g2p-mobile-nav="browse"], body.g2p-mobile-marketplace.g2p-nav-areas-active .mobile-actions-link[data-g2p-mobile-nav="areas"], body.g2p-mobile-marketplace.g2p-nav-guides-active .mobile-actions-link[data-g2p-mobile-nav="guides"], body.g2p-mobile-marketplace.g2p-nav-account-active .mobile-actions-link[data-g2p-mobile-nav="account"] { background: #2F4A33; color: #F4F0E6; box-shadow: inset 0 0 0 1px rgba(244, 240, 230, 0.08), 0 8px 20px rgba(47, 74, 51, 0.2); transform: translateY(-1px); } body.g2p-mobile-marketplace .zeynep { width: min(72vw, 304px); max-width: calc(100vw - 76px); border-right: 1px solid rgba(28, 31, 26, 0.1); background: rgba(255, 253, 248, 0.98); box-shadow: 18px 0 48px rgba(28, 31, 26, 0.16); } body.g2p-mobile-marketplace .zeynep ul { padding: 22px 0 calc(96px + env(safe-area-inset-bottom, 0px)); background: transparent; } body.g2p-mobile-marketplace .zeynep li, body.g2p-mobile-marketplace .zeynep a { border-color: rgba(28, 31, 26, 0.08); color: #2F342C; font-family: var(--g2p-sans, "Inter Tight", system-ui, sans-serif); font-size: 17px; font-weight: 700; letter-spacing: 0; } body.g2p-mobile-marketplace .zeynep a:hover, body.g2p-mobile-marketplace .zeynep a:focus { background: rgba(47, 74, 51, 0.08); color: #2F4A33; text-decoration: none; } body.g2p-mobile-marketplace .zeynep .submenu-header, body.g2p-mobile-marketplace .zeynep .submenu-header a { background: #F4F0E6; color: #2F4A33; } body.g2p-mobile-marketplace .zeynep-overlay { background: rgba(28, 31, 26, 0.54); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } body.g2p-mobile-marketplace #main-search-top.main-search-bar { top: calc(14px + env(safe-area-inset-top, 0px)) !important; bottom: auto !important; height: auto; max-height: min(74vh, 620px); padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 0 0 30px 30px; background: rgba(255, 253, 248, 0.98); color: #1C1F1A; box-shadow: 0 18px 54px rgba(28, 31, 26, 0.24); transform: translateY(-110%) !important; } body.g2p-mobile-marketplace #main-search-top.main-search-bar.show { transform: none !important; } body.g2p-mobile-marketplace #main-search-top .offcanvas-header, body.g2p-mobile-marketplace #offcanvas-gps-location .offcanvas-header { min-height: 58px; padding: 14px 20px 10px; border-bottom: 1px solid rgba(28, 31, 26, 0.08); background: transparent; } body.g2p-mobile-marketplace #main-search-top .offcanvas-body, body.g2p-mobile-marketplace #offcanvas-gps-location .offcanvas-body { padding: 18px 20px 22px; background: transparent; } body.g2p-mobile-marketplace #main-search-top .site-search-form, body.g2p-mobile-marketplace #main-search-top .site-search-form-pop { width: 100%; margin: 0; padding: 0; border: 0; background: transparent !important; box-shadow: none; } body.g2p-mobile-marketplace #main-search-top h3 { margin: 0 0 6px; color: #1C1F1A; font-family: var(--g2p-serif, Georgia, serif); font-size: 30px; font-weight: 500; letter-spacing: 0; line-height: 1; } body.g2p-mobile-marketplace #main-search-top p { margin: 0 0 16px; color: #6E7163; font-size: 15px; } body.g2p-mobile-marketplace #main-search-top ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } body.g2p-mobile-marketplace #main-search-top .field-cover, body.g2p-mobile-marketplace #offcanvas-gps-location .geo-location_body { border: 0; background: transparent; } body.g2p-mobile-marketplace #main-search-top .form-label { margin-bottom: 7px; color: #2F4A33; font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } body.g2p-mobile-marketplace #main-search-top input, body.g2p-mobile-marketplace #offcanvas-gps-location input, body.g2p-mobile-marketplace .modal.show input { width: 100%; min-height: 52px; border: 1px solid rgba(28, 31, 26, 0.13); border-radius: 14px; background: #FFFFFF; color: #1C1F1A; font-size: 16px; box-shadow: none; } body.g2p-mobile-marketplace #main-search-top .btn, body.g2p-mobile-marketplace #main-search-top button[type="submit"], body.g2p-mobile-marketplace #offcanvas-gps-location .btn-detect, body.g2p-mobile-marketplace .modal.show .btn-brand, body.g2p-mobile-marketplace .modal.show button[type="submit"] { width: 100%; min-height: 54px; border: 0; border-radius: 18px; background: #2F4A33 !important; color: #F4F0E6 !important; font-weight: 800; letter-spacing: 0; box-shadow: 0 16px 32px rgba(47, 74, 51, 0.16); } body.g2p-mobile-marketplace #main-search-top .btn-close, body.g2p-mobile-marketplace #offcanvas-gps-location .btn-close, body.g2p-mobile-marketplace .modal.show .btn-close, body.g2p-mobile-marketplace .modal.show .close { width: 42px; height: 42px; border-radius: 999px; background-color: rgba(28, 31, 26, 0.08); opacity: 1; } body.g2p-mobile-marketplace #offcanvas-gps-location { max-height: min(48vh, 420px); border-radius: 28px 28px 0 0; background: rgba(255, 253, 248, 0.98); color: #1C1F1A; } body.g2p-mobile-marketplace #offcanvas-gps-location .offcanvas-title, body.g2p-mobile-marketplace .modal.show .modal-title { color: #1C1F1A; font-family: var(--g2p-serif, Georgia, serif); font-size: 28px; font-weight: 500; letter-spacing: 0; } body.g2p-mobile-marketplace #offcanvas-gps-location .or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: #6E7163; } body.g2p-mobile-marketplace #offcanvas-gps-location .or::before, body.g2p-mobile-marketplace #offcanvas-gps-location .or::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(28, 31, 26, 0.12); } body.g2p-mobile-marketplace .modal.show .modal-dialog { width: min(100% - 28px, 520px); margin: 14vh auto 0; } body.g2p-mobile-marketplace .modal.show .modal-content { overflow: hidden; border: 1px solid rgba(28, 31, 26, 0.1); border-radius: 26px; background: rgba(255, 253, 248, 0.98); box-shadow: 0 24px 70px rgba(28, 31, 26, 0.28); } body.g2p-mobile-marketplace .modal.show .modal-header, body.g2p-mobile-marketplace .modal.show .modal-body, body.g2p-mobile-marketplace .modal.show .modal-footer { border-color: rgba(28, 31, 26, 0.08); background: transparent; } body.g2p-mobile-marketplace .modal.show a { color: #2F4A33; font-weight: 800; text-underline-offset: 3px; } body.g2p-mobile-marketplace .modal.show .facebook, body.g2p-mobile-marketplace .modal.show .google, body.g2p-mobile-marketplace .modal.show .btn-outline, body.g2p-mobile-marketplace .modal.show .btn-social { border-color: rgba(28, 31, 26, 0.16) !important; border-radius: 999px !important; background: #FFFFFF !important; color: #1C1F1A !important; } body.g2p-mobile-marketplace .g2p-mobile-featured-gear { display: block !important; margin-top: 22px; } body.g2p-mobile-marketplace .g2p-mobile-featured-head { display: flex !important; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 12px; } body.g2p-mobile-marketplace .g2p-mobile-featured-head span { display: block; color: var(--g2p-muted, #6E7163); font-family: var(--g2p-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; line-height: 1; text-transform: uppercase; } body.g2p-mobile-marketplace .g2p-mobile-featured-head h2 { margin: 5px 0 0; color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-serif, Georgia, serif); font-size: 34px; font-weight: 500; letter-spacing: 0; line-height: 0.98; } body.g2p-mobile-marketplace .g2p-mobile-featured-head a { flex: 0 0 auto; color: var(--g2p-clay, #C45A2C); font-weight: 800; text-decoration: none; } body.g2p-mobile-marketplace .g2p-mobile-featured-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } body.g2p-mobile-marketplace .g2p-mobile-gear-card { display: grid !important; min-width: 0; overflow: hidden; border: 1px solid rgba(28, 31, 26, 0.08); border-radius: 22px; background: rgba(255, 255, 255, 0.94); color: var(--g2p-ink, #1C1F1A); box-shadow: 0 14px 34px rgba(28, 31, 26, 0.09); text-decoration: none; } body.g2p-mobile-marketplace .g2p-mobile-gear-card:hover, body.g2p-mobile-marketplace .g2p-mobile-gear-card:focus { color: var(--g2p-ink, #1C1F1A); text-decoration: none; } body.g2p-mobile-marketplace .g2p-mobile-gear-image { display: block !important; width: 100%; aspect-ratio: 1.18 / 1; background-color: #E8E1D1; background-position: center; background-size: cover; } body.g2p-mobile-marketplace .g2p-mobile-gear-body { display: grid !important; min-height: 142px; align-content: start; padding: 11px 12px 12px; } body.g2p-mobile-marketplace .g2p-mobile-gear-body small { overflow: hidden; color: var(--g2p-pine, #2F4A33); font-family: var(--g2p-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 10px; font-weight: 500; letter-spacing: 0.12em; line-height: 1.15; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } body.g2p-mobile-marketplace .g2p-mobile-gear-body strong { display: -webkit-box; min-height: 40px; margin-top: 7px; overflow: hidden; color: var(--g2p-ink, #1C1F1A); font-size: 17px; font-weight: 800; line-height: 1.14; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } body.g2p-mobile-marketplace .g2p-mobile-gear-body em { margin-top: 9px; overflow: hidden; color: var(--g2p-muted, #6E7163); font-size: 14px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; } body.g2p-mobile-marketplace .g2p-mobile-gear-body b { margin-top: 7px; color: var(--g2p-ink, #1C1F1A); font-size: 22px; font-weight: 500; line-height: 1; } body.g2p-mobile-marketplace .g2p-mobile-gear-body b span { color: var(--g2p-muted, #6E7163); font-size: 13px; font-weight: 700; } } @media (max-width: 767px) { body.g2p-mobile-marketplace { background: var(--g2p-map, #F4F0E6); padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); } .g2p-home, .g2p-listing-page, .g2p-detail-page, .g2p-cart-page, .g2p-booking-page, .g2p-supplier-page, .g2p-auth-page { background-image: none !important; background-color: var(--g2p-map, #F4F0E6); } body.g2p-mobile-marketplace .cookies-notice { display: none !important; } .g2p-home input, .g2p-home select, .g2p-home textarea, .g2p-listing-page input, .g2p-listing-page select, .g2p-listing-page textarea, .g2p-detail-page input, .g2p-detail-page select, .g2p-detail-page textarea, .g2p-cart-page input, .g2p-cart-page select, .g2p-cart-page textarea, .g2p-booking-page input, .g2p-booking-page select, .g2p-booking-page textarea, .g2p-supplier-page input, .g2p-supplier-page select, .g2p-supplier-page textarea, .g2p-auth-page input, .g2p-auth-page select, .g2p-auth-page textarea { min-height: 44px; font-size: 16px; } .g2p-home .btn, .g2p-home .g2p-button, .g2p-listing-page .btn, .g2p-listing-page .g2p-product-cta, .g2p-detail-page .btn, .g2p-cart-page .btn, .g2p-booking-page .btn, .g2p-supplier-page .btn, .g2p-auth-page .btn { min-height: 44px; } .g2p-supplier-page, .g2p-auth-page { min-width: 0; overflow-x: hidden; padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); } .g2p-supplier-page .container, .g2p-auth-page .container, .g2p-auth-page .form-sign-body { width: min(100% - 24px, 680px); max-width: none; } .g2p-supplier-page .banner { padding: 24px 0; background-color: var(--g2p-map, #F4F0E6); background-size: cover; background-position: center; } .g2p-supplier-page .banner .row { row-gap: 18px; } .g2p-supplier-page .seller-slogan, .g2p-supplier-page .seller-register-form, .g2p-auth-page .card-sign { overflow: hidden; border: 1px solid var(--g2p-line, rgba(28, 31, 26, 0.12)); border-radius: 24px; background: rgba(255, 255, 255, 0.92); box-shadow: var(--g2p-shadow, 0 18px 44px rgba(28, 31, 26, 0.12)); } .g2p-supplier-page .seller-slogan, .g2p-supplier-page .seller-register-form { padding: 18px; } .g2p-supplier-page img, .g2p-auth-page img { height: auto; } .g2p-auth-page { background: var(--g2p-map, #F4F0E6); } .g2p-auth-page .form-sign { min-height: auto; padding: 24px 0; } .g2p-auth-page .card-sign_head, .g2p-auth-page .card-sign_body, .g2p-auth-page .card-sign_foot { padding-right: 18px; padding-left: 18px; } .g2p-home .g2p-mobile-chrome, .g2p-listing-page .g2p-mobile-chrome, .g2p-detail-page .g2p-mobile-chrome, .g2p-cart-page .g2p-mobile-chrome, .g2p-booking-page .g2p-mobile-chrome { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 18px; z-index: 55; border: 1px solid rgba(255, 255, 255, 0.62); border-radius: 999px; background: rgba(255, 253, 247, 0.78); box-shadow: 0 18px 46px rgba(28, 31, 26, 0.16); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); } } @keyframes g2p-page-progress { 0% { opacity: 0.95; transform: scaleX(0.08); } 60% { opacity: 1; transform: scaleX(0.7); } 100% { opacity: 0.95; transform: scaleX(0.92); } } body.g2p-page-transitioning::before { content: ""; position: fixed; top: 0; left: 0; z-index: 99999; width: 100%; height: 3px; background: linear-gradient(90deg, var(--g2p-clay, #C45A2C), var(--g2p-sun, #E6B547), var(--g2p-pine, #2F4A33)); pointer-events: none; transform: scaleX(0.08); transform-origin: left center; animation: g2p-page-progress 1.2s ease-out forwards; } body.g2p-page-transitioning::after { content: "Loading"; position: fixed; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 99999; min-width: 78px; padding: 9px 12px; border: 1px solid rgba(255, 255, 255, 0.46); border-radius: 999px; background: rgba(28, 31, 26, 0.9); box-shadow: 0 16px 36px rgba(22, 27, 24, 0.2); color: #ffffff; font-size: 0.78rem; font-weight: 800; letter-spacing: 0; line-height: 1; pointer-events: none; } @media (max-width: 640px) { body.g2p-page-transitioning::after { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } } @media (prefers-reduced-motion: reduce) { body.g2p-page-transitioning::before { animation: none; transform: scaleX(0.68); } } /* Phase 4 desktop/tablet Claude parity layer. Mobile chrome stays owned by the mobile override above. */ #Fashion.g2p-site-header .g2p-claude-nav a.is-active, #Fashion.g2p-site-header .g2p-claude-nav a[aria-current="page"] { color: var(--g2p-ink, #1C1F1A); border-color: transparent; } #Fashion.g2p-site-header .g2p-claude-nav a.is-active::after, #Fashion.g2p-site-header .g2p-claude-nav a[aria-current="page"]::after { opacity: 1; transform: scaleX(1); } @media (min-width: 768px) { .g2p-listing-page, .g2p-detail-page, .g2p-cart-page, .g2p-booking-page, .g2p-supplier-page, .g2p-auth-page, .g2p-how-page, .g2p-static-page { min-height: 100vh; background-color: transparent !important; background-image: none !important; background-size: auto; color: var(--g2p-ink, #1C1F1A); } .g2p-listing-page .container, .g2p-detail-page .container, .g2p-cart-page .container, .g2p-booking-page .container, .g2p-supplier-page .container, .g2p-auth-page .container, .g2p-static-page .container { width: min(100% - 48px, 1180px); max-width: none; } .g2p-listing-page .bg-brand, .g2p-detail-page .bg-brand, .g2p-cart-page .bg-main, .g2p-booking-page .bg-main, .g2p-static-page .bg-brand-light, .g2p-static-page .bg--white { background: transparent !important; } .g2p-listing-page .g2p-browse-hero, .g2p-cart-page .g2p-cart-hero, .g2p-booking-page .g2p-checkout-hero, .g2p-static-page .bg-brand-light { padding: 56px 0 30px; } .g2p-static-page .page-banner { position: relative; overflow: hidden; min-height: 320px; margin: 40px auto 24px; width: min(100% - 48px, 1180px); border-radius: 28px; background-color: var(--g2p-ink, #1C1F1A); background-position: center; background-size: cover; box-shadow: var(--g2p-shadow, 0 18px 44px rgba(28, 31, 26, 0.12)); } .g2p-static-page .page-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28, 31, 26, 0.72), rgba(28, 31, 26, 0.12)); } .g2p-static-page .page-banner .container, .g2p-static-page .page-banner .banner-txt { position: relative; z-index: 1; } .g2p-listing-page .g2p-browse-head { max-width: 760px; } .g2p-listing-page .g2p-browse-eyebrow { margin: 0 0 14px !important; font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 12px; font-weight: 800; letter-spacing: 0.28em; line-height: 1.35; text-transform: uppercase; } .g2p-listing-page .g2p-browse-head h1, .g2p-cart-page .g2p-cart-hero h1, .g2p-booking-page .g2p-checkout-hero h1, .g2p-static-page h1 { color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-serif, Georgia, serif); font-size: clamp(3rem, 7vw, 5.9rem); font-weight: 600; letter-spacing: 0; line-height: 0.98; } .g2p-listing-page .g2p-browse-head h1 { margin: 0 !important; padding-bottom: 0.05em; } .g2p-listing-page .g2p-browse-meta { max-width: 680px; margin: 16px 0 0 !important; font-family: var(--g2p-sans, sans-serif); font-size: 15px; font-weight: 750; line-height: 1.45; } .g2p-static-page .page-banner h1, .g2p-static-page .page-banner h4 { color: var(--g2p-map, #F4F0E6); } .g2p-listing-page .g2p-browse-head h1 em, .g2p-static-page h1 em { color: var(--g2p-clay, #C45A2C); font-style: italic; } .g2p-listing-page .g2p-browse-eyebrow, .g2p-listing-page .g2p-browse-meta, .g2p-static-page .section-subtitle, .g2p-static-page .section-head p { color: var(--g2p-muted, #6E7163) !important; } .g2p-listing-page .g2p-browse-toolbar-wrap, .g2p-listing-page .page-sort-wrap, .g2p-listing-page .collection-sidebar, .g2p-listing-page .filters, .g2p-detail-page .product-detail, .g2p-detail-page .detail-gallery, .g2p-cart-page .cart-page, .g2p-cart-page .cart-summary, .g2p-booking-page .checkout-page, .g2p-booking-page .checkout-summary, .g2p-supplier-page .seller-slogan, .g2p-supplier-page .seller-register-form, .g2p-auth-page .card-sign, .g2p-static-page .section, .g2p-static-page .border, .g2p-static-page .faqlist > li { border: 1px solid var(--g2p-line, rgba(28, 31, 26, 0.12)) !important; border-radius: 24px !important; background: rgba(255, 255, 255, 0.9) !important; box-shadow: var(--g2p-shadow, 0 18px 44px rgba(28, 31, 26, 0.12)); } .g2p-listing-page .g2p-browse-toolbar-wrap, .g2p-listing-page .page-sort-wrap { padding: 14px 16px; } .g2p-listing-page .g2p-browse-chip, .g2p-listing-page .filter-item, .g2p-listing-page .filter__head, .g2p-static-page .faq-filters a, .g2p-static-page .faq-filters button { border: 1px solid var(--g2p-line, rgba(28, 31, 26, 0.12)) !important; border-radius: 999px !important; background: var(--g2p-surface-2, #FAF7EE) !important; color: var(--g2p-ink-2, #3E4438) !important; font-family: var(--g2p-mono, ui-monospace, monospace); letter-spacing: 0.08em; } .g2p-listing-page .g2p-browse-chip.is-active, .g2p-listing-page .g2p-browse-chip:hover, .g2p-static-page .faq-filters .is-active, .g2p-static-page .faq-filters a:hover { background: var(--g2p-pine, #2F4A33) !important; color: var(--g2p-map, #F4F0E6) !important; } .g2p-listing-page .g2p-browse-context-wrap { margin: 0 0 24px; } .g2p-listing-page .g2p-browse-context { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border: 1px solid rgba(47, 74, 51, 0.14); border-radius: 18px; background: rgba(255, 255, 255, 0.52); box-shadow: 0 14px 34px rgba(28, 31, 26, 0.06); } .g2p-listing-page .g2p-browse-context strong { display: block; color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-serif, Georgia, serif); font-size: 21px; font-weight: 650; letter-spacing: 0; line-height: 1.05; } .g2p-listing-page .g2p-browse-context span { display: block; max-width: 620px; margin-top: 4px; color: var(--g2p-muted, #6E7163); font-size: 13px; font-weight: 650; line-height: 1.35; } .g2p-listing-page .g2p-browse-context a { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--g2p-clay, #C45A2C); color: #fff !important; font-weight: 850; text-decoration: none; box-shadow: 0 10px 22px rgba(196, 90, 44, 0.16); transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease; } .g2p-listing-page .g2p-browse-context a:hover, .g2p-listing-page .g2p-browse-context a:focus-visible { background: #A94825; color: #fff; transform: translateY(-1px); box-shadow: 0 14px 28px rgba(196, 90, 44, 0.2); } .g2p-listing-page .product-listing, .g2p-home .product-listing { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; align-items: stretch; } .g2p-listing-page .product-listing > *, .g2p-home .product-listing > * { width: auto !important; max-width: none !important; } .g2p-listing-page .product.g2p-product-card, .g2p-home .product.g2p-product-card { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; overflow: hidden; border: 1px solid var(--g2p-line, rgba(28, 31, 26, 0.12)); border-radius: 20px; background: transparent; box-shadow: none; } .g2p-listing-page .product.g2p-product-card .product-img, .g2p-home .product.g2p-product-card .product-img { aspect-ratio: 4 / 3; min-height: 0; overflow: hidden; border-radius: 18px; background: var(--g2p-paper-2, #ECE6D7); } .g2p-listing-page .product.g2p-product-card .product-img img, .g2p-home .product.g2p-product-card .product-img img { width: 100%; height: 100%; object-fit: cover; } .g2p-listing-page .product.g2p-product-card .product-body, .g2p-home .product.g2p-product-card .product-body { min-height: 132px; margin: -22px 14px 14px; padding: 18px 18px 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 16px 36px rgba(28, 31, 26, 0.1); } .g2p-listing-page .product.g2p-product-card .product-name, .g2p-home .product.g2p-product-card .product-name { display: -webkit-box; min-height: 2.35em; overflow: hidden; color: var(--g2p-ink, #1C1F1A); font-size: clamp(1rem, 1.3vw, 1.22rem); font-weight: 800; letter-spacing: 0; line-height: 1.16; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .g2p-listing-page .product.g2p-product-card .product-category, .g2p-home .product.g2p-product-card .product-category, .g2p-listing-page .product.g2p-product-card .g2p-product-meta, .g2p-home .product.g2p-product-card .g2p-product-meta { color: var(--g2p-muted, #6E7163); } .g2p-listing-page .product.g2p-product-card .product-price, .g2p-home .product.g2p-product-card .product-price { color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-serif, Georgia, serif); font-size: 1.35rem; font-weight: 600; } .g2p-listing-page .g2p-product-cta, .g2p-detail-page .btn-brand, .g2p-cart-page .btn-brand, .g2p-booking-page .btn-brand, .g2p-supplier-page .btn-brand, .g2p-auth-page .btn-brand, .g2p-static-page .btn-brand { min-height: 48px; border: 0 !important; border-radius: 999px !important; background: var(--g2p-pine, #2F4A33) !important; color: var(--g2p-map, #F4F0E6) !important; font-weight: 800; } .g2p-listing-page .g2p-product-cta:hover, .g2p-detail-page .btn-brand:hover, .g2p-cart-page .btn-brand:hover, .g2p-booking-page .btn-brand:hover, .g2p-supplier-page .btn-brand:hover, .g2p-auth-page .btn-brand:hover, .g2p-static-page .btn-brand:hover { background: var(--g2p-clay, #C45A2C) !important; color: #fff !important; } .g2p-detail-page .detail_gallery-view, .g2p-detail-page .detail-gallery { overflow: hidden; border-radius: 24px; background: var(--g2p-paper-2, #ECE6D7); } .g2p-detail-page .product-detail h1, .g2p-detail-page .product-detail .product-title, .g2p-supplier-page h1, .g2p-auth-page h1 { color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-serif, Georgia, serif); font-weight: 600; letter-spacing: 0; } .g2p-supplier-page .banner { padding: 72px 0; background-color: transparent !important; } .g2p-supplier-page .seller-slogan, .g2p-supplier-page .seller-register-form, .g2p-auth-page .card-sign { padding: 28px; } .g2p-auth-page { padding: 52px 0; } .g2p-auth-page .form-sign { min-height: auto; } .g2p-auth-page .g2p-auth-sr-label { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .g2p-static-page .faqsearch, .g2p-static-page .form { overflow: hidden; border-radius: 18px; background: rgba(255, 255, 255, 0.9); } .g2p-static-page input, .g2p-static-page textarea, .g2p-static-page select, .g2p-supplier-page input, .g2p-supplier-page textarea, .g2p-supplier-page select, .g2p-auth-page input, .g2p-auth-page textarea, .g2p-auth-page select { min-height: 48px; border: 1px solid var(--g2p-line, rgba(28, 31, 26, 0.12)) !important; border-radius: 12px !important; background: rgba(255, 255, 255, 0.96) !important; color: var(--g2p-ink, #1C1F1A) !important; } .g2p-home .collection-newsletter, .g2p-listing-page .collection-newsletter, .g2p-detail-page .collection-newsletter, .g2p-cart-page .collection-newsletter, .g2p-booking-page .collection-newsletter, .g2p-supplier-page .collection-newsletter, .g2p-auth-page .collection-newsletter, .g2p-static-page .collection-newsletter { background: var(--g2p-pine, #2F4A33) !important; color: var(--g2p-map, #F4F0E6) !important; } .g2p-home .footer, .g2p-listing-page .footer, .g2p-detail-page .footer, .g2p-cart-page .footer, .g2p-booking-page .footer, .g2p-supplier-page .footer, .g2p-auth-page .footer, .g2p-static-page .footer { background: rgba(255, 255, 255, 0.86) !important; color: var(--g2p-ink-2, #3E4438) !important; } .g2p-home .footer a, .g2p-listing-page .footer a, .g2p-detail-page .footer a, .g2p-cart-page .footer a, .g2p-booking-page .footer a, .g2p-supplier-page .footer a, .g2p-auth-page .footer a, .g2p-static-page .footer a { color: var(--g2p-ink-2, #3E4438) !important; } [class*="g2p-"] .bg-brand, [class*="g2p-"] .bg-brand-light, [class*="g2p-"] .btn-theme { --brand-color: var(--g2p-pine, #2F4A33); --brand-color-inverse: var(--g2p-map, #F4F0E6); } } @media (min-width: 768px) and (max-width: 1100px) { .g2p-listing-page .product-listing, .g2p-home .product-listing { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { .g2p-claude-shell { width: min(100% - 64px, 1216px); margin: 0 auto; } .g2p-claude-hero { padding: 74px 0 40px; } .g2p-claude-hero-row, .g2p-claude-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; } .g2p-claude-hero-row h1, .g2p-claude-section-head h2, .g2p-lender-copy h1, .g2p-lender-earnings h2, .g2p-lender-protection h2, .g2p-lender-form-card h2 { margin: 0; color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-serif, Georgia, serif); font-weight: 600; letter-spacing: 0; line-height: 0.95; } .g2p-claude-hero-row h1 { max-width: 760px; font-size: clamp(64px, 8vw, 112px); } .g2p-claude-section-head h2, .g2p-lender-earnings h2, .g2p-lender-protection h2 { max-width: 760px; font-size: clamp(42px, 5.8vw, 76px); } .g2p-claude-hero-row h1 em, .g2p-claude-section-head h2 em, .g2p-lender-copy h1 em, .g2p-lender-earnings h2 em, .g2p-lender-protection h2 em { color: var(--g2p-clay, #C45A2C); font-style: italic; font-weight: 500; } .g2p-claude-hero-row p, .g2p-lender-copy p, .g2p-lender-earnings p, .g2p-lender-protection p { max-width: 46ch; margin: 0; color: var(--g2p-muted, #6E7163); font-size: 16px; font-weight: 600; line-height: 1.6; } .g2p-claude-eyebrow { margin: 0 0 12px; color: var(--g2p-muted, #6E7163); font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; line-height: 1.2; text-transform: uppercase; } .g2p-claude-section { padding: 42px 0; } .g2p-claude-primary, .g2p-claude-light, .g2p-claude-ghost, .g2p-claude-ghost-dark { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 800; line-height: 1; text-decoration: none; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .g2p-claude-primary { border: 1px solid transparent; background: var(--g2p-pine, #2F4A33); color: var(--g2p-map, #F4F0E6); } .g2p-claude-light { border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.92); color: var(--g2p-ink, #1C1F1A); } .g2p-claude-ghost, .g2p-claude-ghost-dark { border: 1px solid rgba(255, 255, 255, 0.26); background: rgba(255, 255, 255, 0.08); color: rgba(244, 240, 230, 0.92); } .g2p-claude-primary:hover, .g2p-claude-primary:focus, .g2p-claude-light:hover, .g2p-claude-light:focus, .g2p-claude-ghost:hover, .g2p-claude-ghost:focus, .g2p-claude-ghost-dark:hover, .g2p-claude-ghost-dark:focus { background: var(--g2p-clay, #C45A2C); color: #fff !important; text-decoration: none; transform: translateY(-1px); } .g2p-claude-callout { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; padding: 26px 28px; border: 1px solid var(--g2p-line, rgba(28, 31, 26, 0.12)); border-radius: 24px; background: rgba(255, 255, 255, 0.82); box-shadow: var(--g2p-shadow, 0 18px 44px rgba(28, 31, 26, 0.12)); } .g2p-claude-callout strong { display: block; color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-serif, Georgia, serif); font-size: 26px; line-height: 1.05; } .g2p-claude-callout p { max-width: 56ch; margin: 8px 0 0; color: var(--g2p-muted, #6E7163); font-weight: 600; } .g2p-area-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .g2p-area-card { position: relative; display: flex; min-height: 420px; overflow: hidden; align-items: flex-end; border-radius: 24px; background-color: #111; background-position: center; background-size: cover; color: #fff; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } .g2p-area-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16, 17, 15, 0.10), rgba(16, 17, 15, 0.86)), linear-gradient(90deg, rgba(16, 17, 15, 0.42), transparent 62%); transition: background 180ms ease; } .g2p-area-card:hover, .g2p-area-card:focus { color: #fff; text-decoration: none; transform: translateY(-2px); } .g2p-area-card:hover::before, .g2p-area-card:focus::before { background: linear-gradient(180deg, rgba(16, 17, 15, 0.14), rgba(16, 17, 15, 0.9)), linear-gradient(90deg, rgba(16, 17, 15, 0.52), rgba(16, 17, 15, 0.06) 62%); } .g2p-area-coord, .g2p-area-count, .g2p-area-body { position: relative; z-index: 1; } .g2p-area-coord, .g2p-area-count { position: absolute; top: 16px; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.78); font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .g2p-area-coord { left: 16px; } .g2p-area-count { right: 16px; } .g2p-area-body { display: grid; gap: 10px; padding: 28px; } .g2p-area-region, .g2p-area-link, .g2p-guide-kicker { color: var(--g2p-sun, #E6B547); font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 11px; font-weight: 800; letter-spacing: 0.16em; line-height: 1.2; text-transform: uppercase; } .g2p-area-body strong { color: #fff; font-family: var(--g2p-serif, Georgia, serif); font-size: clamp(30px, 3.6vw, 46px); font-weight: 600; letter-spacing: 0; line-height: 0.98; text-shadow: 0 1px 16px rgba(0, 0, 0, 0.42); transition: color 160ms ease, text-shadow 160ms ease; } .g2p-area-card:hover .g2p-area-body strong, .g2p-area-card:focus .g2p-area-body strong { color: var(--g2p-sun, #E6B547); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.52), 0 12px 28px rgba(0, 0, 0, 0.6); } .g2p-area-copy { color: rgba(255, 255, 255, 0.78); font-size: 15px; line-height: 1.55; } .g2p-area-tags { display: flex; flex-wrap: wrap; gap: 8px; } .g2p-area-tags span { padding: 7px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.13); color: rgba(255, 255, 255, 0.78); font-size: 12px; font-weight: 700; } .g2p-guide-panels { display: grid; gap: 14px; } .g2p-guide-panel { overflow: hidden; border: 1px solid var(--g2p-line, rgba(28, 31, 26, 0.12)); border-radius: 24px; background: rgba(255, 255, 255, 0.88); box-shadow: var(--g2p-shadow, 0 18px 44px rgba(28, 31, 26, 0.12)); } .g2p-guide-panel summary { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; min-height: 86px; align-items: center; gap: 18px; padding: 20px 24px; background-color: #1C1F1A; background-position: center; background-size: cover; color: #fff; cursor: pointer; list-style: none; } .g2p-guide-panel summary::-webkit-details-marker { display: none; } .g2p-guide-panel summary::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28, 31, 26, 0.84), rgba(28, 31, 26, 0.34)); } .g2p-guide-panel summary > * { position: relative; z-index: 1; } .g2p-guide-panel summary span { color: var(--g2p-sun, #E6B547); font-family: var(--g2p-mono, ui-monospace, monospace); font-weight: 800; letter-spacing: 0.16em; } .g2p-guide-panel summary strong { color: #fff; font-family: var(--g2p-serif, Georgia, serif); font-size: 30px; line-height: 1; } .g2p-guide-panel summary small { justify-self: end; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.82); font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .g2p-guide-content { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; overflow: hidden; padding: 32px; background-color: #1C1F1A; background-position: center; background-size: cover; color: #fff; } .g2p-guide-content::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28, 31, 26, 0.9), rgba(28, 31, 26, 0.68)), linear-gradient(180deg, rgba(28, 31, 26, 0.28), rgba(28, 31, 26, 0.76)); } .g2p-guide-content > * { position: relative; z-index: 1; } .g2p-guide-content h2 { max-width: 11ch; margin: 10px 0 14px; color: #fff; font-family: var(--g2p-serif, Georgia, serif); font-size: clamp(42px, 6vw, 76px); font-weight: 600; line-height: 0.94; } .g2p-guide-content p { max-width: 58ch; color: rgba(255, 255, 255, 0.78); font-size: 16px; font-weight: 600; line-height: 1.6; } .g2p-guide-meta, .g2p-guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .g2p-guide-meta span { padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.82); font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; } .g2p-guide-list { align-self: start; padding: 22px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 22px; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .g2p-guide-list h3 { margin: 0 0 12px; color: #fff; font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .g2p-guide-list span { display: block; margin-bottom: 8px; color: rgba(255, 255, 255, 0.86); font-weight: 700; } .g2p-guide-list span.muted { color: rgba(255, 255, 255, 0.6); } .g2p-guide-list blockquote { margin: 18px 0 0; padding: 16px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.78); font-size: 14px; font-style: normal; line-height: 1.5; } .g2p-lender-hero { position: relative; overflow: hidden; padding: 86px 0 74px; background-color: var(--g2p-ink, #1C1F1A); background-position: center; background-size: cover; color: var(--g2p-map, #F4F0E6); } .g2p-lender-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28, 31, 26, 0.9), rgba(28, 31, 26, 0.56)), radial-gradient(circle at 80% 20%, rgba(196, 90, 44, 0.22), transparent 28%); } .g2p-lender-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 440px); gap: 46px; align-items: start; } .g2p-lender-copy h1 { max-width: 720px; color: var(--g2p-map, #F4F0E6); font-size: clamp(58px, 7.5vw, 96px); } .g2p-lender-copy .g2p-claude-eyebrow { color: var(--g2p-sun, #E6B547); } .g2p-lender-copy p { max-width: 54ch; margin-top: 20px; color: rgba(244, 240, 230, 0.76); font-size: 17px; } .g2p-lender-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .g2p-lender-stats { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: 28px; margin-top: 46px; padding-top: 32px; border-top: 1px solid rgba(244, 240, 230, 0.16); } .g2p-lender-stats span { display: grid; gap: 6px; } .g2p-lender-stats strong { color: var(--g2p-map, #F4F0E6); font-family: var(--g2p-serif, Georgia, serif); font-size: 34px; line-height: 1; } .g2p-lender-stats small { color: rgba(244, 240, 230, 0.5); font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; line-height: 1.35; text-transform: uppercase; } .g2p-lender-form-card { padding: 28px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 26px; background: rgba(255, 253, 247, 0.96); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28); color: var(--g2p-ink, #1C1F1A); } .g2p-lender-form-card h2 { margin-bottom: 18px; font-size: 38px; } .g2p-lender-form-card .row { row-gap: 12px; } .g2p-supplier-page .invalid, .g2p-supplier-page .form.invalid, .g2p-lender-form-card .invalid { animation: none !important; transform: none !important; } .g2p-lender-form-card label { color: var(--g2p-muted, #6E7163); font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .g2p-lender-form-note { margin-top: 18px; color: var(--g2p-muted, #6E7163); font-size: 14px; line-height: 1.55; } .g2p-lender-step-grid, .g2p-lender-protection-grid, .g2p-lender-story-grid { display: grid; gap: 16px; } .g2p-lender-step-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g2p-supplier-page .g2p-lender-step-grid { width: min(100%, 1160px); margin: clamp(48px, 5vw, 72px) auto 0; justify-content: center; } .g2p-lender-step-grid article, .g2p-lender-protection-grid article, .g2p-lender-story-grid article { border: 1px solid var(--g2p-line, rgba(28, 31, 26, 0.12)); border-radius: 22px; background: rgba(255, 255, 255, 0.84); box-shadow: var(--g2p-shadow, 0 18px 44px rgba(28, 31, 26, 0.12)); } .g2p-lender-step-grid article { min-height: 240px; padding: 22px; } .g2p-lender-step-grid span { color: var(--g2p-clay, #C45A2C); font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; } .g2p-lender-step-grid h3, .g2p-lender-protection-grid h3 { margin: 32px 0 10px; color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-serif, Georgia, serif); font-size: 26px; line-height: 1.05; } .g2p-lender-step-grid p, .g2p-lender-protection-grid p, .g2p-lender-story-grid p { margin: 0; color: var(--g2p-muted, #6E7163); font-size: 15px; font-weight: 600; line-height: 1.55; } .g2p-lender-earnings { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 36px; align-items: center; padding: 42px; border-radius: 28px; background: var(--g2p-paper-2, #ECE6D7); } .g2p-lender-earnings p { margin: 16px 0 24px; } .g2p-lender-earnings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .g2p-lender-earnings-grid article { display: grid; min-height: 138px; align-content: space-between; padding: 18px; border: 1px solid rgba(28, 31, 26, 0.12); border-radius: 18px; background: rgba(255, 255, 255, 0.66); } .g2p-lender-earnings-grid span, .g2p-lender-earnings-grid small { color: var(--g2p-muted, #6E7163); font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .g2p-lender-earnings-grid strong { color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-serif, Georgia, serif); font-size: 36px; line-height: 1; } .g2p-lender-protection { display: grid; grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 4vw, 56px); align-items: start; padding: clamp(46px, 4.5vw, 62px); border-radius: 28px; background: var(--g2p-ink, #1C1F1A); color: var(--g2p-map, #F4F0E6); } .g2p-lender-protection > div:first-child { display: flex; flex-direction: column; gap: 16px; padding-top: 2px; } .g2p-lender-protection .g2p-claude-eyebrow { margin: 0; color: rgba(244, 240, 230, 0.55); line-height: 1.45; } .g2p-lender-protection h2 { max-width: 11ch; color: var(--g2p-map, #F4F0E6); font-size: clamp(42px, 4.8vw, 64px); line-height: 1.04; text-wrap: balance; } .g2p-lender-protection p { color: rgba(244, 240, 230, 0.68); } .g2p-lender-protection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g2p-lender-protection-grid article { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); box-shadow: none; padding: 22px; } .g2p-lender-protection-grid h3 { margin-top: 0; color: var(--g2p-map, #F4F0E6); } .g2p-lender-story-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g2p-supplier-page .g2p-lender-story-grid { width: min(100%, 1160px); margin: clamp(48px, 5vw, 72px) auto 0; justify-content: center; } .g2p-lender-story-grid article { padding: 24px; } .g2p-lender-story-grid article > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; margin-bottom: 18px; } .g2p-lender-story-grid strong { color: var(--g2p-ink, #1C1F1A); font-size: 16px; } .g2p-lender-story-grid span { grid-column: 1; color: var(--g2p-muted, #6E7163); font-size: 13px; } .g2p-lender-story-grid em { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 6px 10px; border-radius: 999px; background: var(--g2p-surface-2, #FAF7EE); color: var(--g2p-pine, #2F4A33); font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 11px; font-style: normal; font-weight: 800; white-space: nowrap; } .g2p-lender-faq { max-width: 940px; } .g2p-lender-faq .g2p-claude-section-head { align-items: center; } .g2p-lender-faq .faqsearch { flex: 0 0 min(360px, 40%); margin: 0; } .g2p-lender-faq .faqlist { margin: 0; padding: 0; list-style: none; } } @media (min-width: 768px) and (max-width: 1120px) { .g2p-area-grid, .g2p-lender-story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g2p-guide-content, .g2p-lender-hero-grid, .g2p-lender-earnings, .g2p-lender-protection { grid-template-columns: 1fr; } .g2p-lender-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Gear2Peer newsletter: match the marketplace footer to the app-like system. */ .g2p-home .collection-newsletter, .g2p-listing-page .collection-newsletter, .g2p-detail-page .collection-newsletter, .g2p-cart-page .collection-newsletter, .g2p-booking-page .collection-newsletter, .g2p-supplier-page .collection-newsletter, .g2p-auth-page .collection-newsletter, .g2p-how-page .collection-newsletter, .g2p-areas-page .collection-newsletter, .g2p-guides-page .collection-newsletter, .g2p-static-page .collection-newsletter { padding: 72px 0 !important; border-top: 1px solid var(--g2p-line, rgba(28, 31, 26, 0.12)); background: var(--g2p-map, #F4F0E6) !important; color: var(--g2p-ink, #1C1F1A) !important; } .g2p-home .collection-newsletter > .container, .g2p-listing-page .collection-newsletter > .container, .g2p-detail-page .collection-newsletter > .container, .g2p-cart-page .collection-newsletter > .container, .g2p-booking-page .collection-newsletter > .container, .g2p-supplier-page .collection-newsletter > .container, .g2p-auth-page .collection-newsletter > .container, .g2p-how-page .collection-newsletter > .container, .g2p-areas-page .collection-newsletter > .container, .g2p-guides-page .collection-newsletter > .container, .g2p-static-page .collection-newsletter > .container { position: relative; overflow: hidden; width: min(100% - 64px, 1216px); max-width: 1216px; padding: 44px; border: 1px solid rgba(244, 240, 230, 0.18); border-radius: 32px; background: repeating-linear-gradient(171deg, rgba(244, 240, 230, 0.07) 0 1px, transparent 1px 34px), linear-gradient(135deg, #2F4A33 0%, #1C1F1A 100%); box-shadow: 0 26px 72px rgba(28, 31, 26, 0.18); } .g2p-home .collection-newsletter .row, .g2p-listing-page .collection-newsletter .row, .g2p-detail-page .collection-newsletter .row, .g2p-cart-page .collection-newsletter .row, .g2p-booking-page .collection-newsletter .row, .g2p-supplier-page .collection-newsletter .row, .g2p-auth-page .collection-newsletter .row, .g2p-how-page .collection-newsletter .row, .g2p-areas-page .collection-newsletter .row, .g2p-guides-page .collection-newsletter .row, .g2p-static-page .collection-newsletter .row { margin: 0; } .g2p-home .collection-newsletter .col-lg-8, .g2p-listing-page .collection-newsletter .col-lg-8, .g2p-detail-page .collection-newsletter .col-lg-8, .g2p-cart-page .collection-newsletter .col-lg-8, .g2p-booking-page .collection-newsletter .col-lg-8, .g2p-supplier-page .collection-newsletter .col-lg-8, .g2p-auth-page .collection-newsletter .col-lg-8, .g2p-how-page .collection-newsletter .col-lg-8, .g2p-areas-page .collection-newsletter .col-lg-8, .g2p-guides-page .collection-newsletter .col-lg-8, .g2p-static-page .collection-newsletter .col-lg-8 { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(320px, 480px); gap: 32px; align-items: center; width: 100%; max-width: none; flex: 0 0 100%; padding: 0; } .g2p-home .collection-newsletter .section-head, .g2p-listing-page .collection-newsletter .section-head, .g2p-detail-page .collection-newsletter .section-head, .g2p-cart-page .collection-newsletter .section-head, .g2p-booking-page .collection-newsletter .section-head, .g2p-supplier-page .collection-newsletter .section-head, .g2p-auth-page .collection-newsletter .section-head, .g2p-how-page .collection-newsletter .section-head, .g2p-areas-page .collection-newsletter .section-head, .g2p-guides-page .collection-newsletter .section-head, .g2p-static-page .collection-newsletter .section-head { margin: 0 !important; } .g2p-home .collection-newsletter .section-heading, .g2p-listing-page .collection-newsletter .section-heading, .g2p-detail-page .collection-newsletter .section-heading, .g2p-cart-page .collection-newsletter .section-heading, .g2p-booking-page .collection-newsletter .section-heading, .g2p-supplier-page .collection-newsletter .section-heading, .g2p-auth-page .collection-newsletter .section-heading, .g2p-how-page .collection-newsletter .section-heading, .g2p-areas-page .collection-newsletter .section-heading, .g2p-guides-page .collection-newsletter .section-heading, .g2p-static-page .collection-newsletter .section-heading { text-align: left !important; } .g2p-home .collection-newsletter h5, .g2p-listing-page .collection-newsletter h5, .g2p-detail-page .collection-newsletter h5, .g2p-cart-page .collection-newsletter h5, .g2p-booking-page .collection-newsletter h5, .g2p-supplier-page .collection-newsletter h5, .g2p-auth-page .collection-newsletter h5, .g2p-how-page .collection-newsletter h5, .g2p-areas-page .collection-newsletter h5, .g2p-guides-page .collection-newsletter h5, .g2p-static-page .collection-newsletter h5 { margin: 0 0 12px; color: var(--g2p-clay, #C45A2C) !important; font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; } .g2p-home .collection-newsletter h2, .g2p-listing-page .collection-newsletter h2, .g2p-detail-page .collection-newsletter h2, .g2p-cart-page .collection-newsletter h2, .g2p-booking-page .collection-newsletter h2, .g2p-supplier-page .collection-newsletter h2, .g2p-auth-page .collection-newsletter h2, .g2p-how-page .collection-newsletter h2, .g2p-areas-page .collection-newsletter h2, .g2p-guides-page .collection-newsletter h2, .g2p-static-page .collection-newsletter h2 { max-width: 560px; margin: 0; color: var(--g2p-map, #F4F0E6) !important; font-family: var(--g2p-serif, Georgia, serif); font-size: 52px; font-weight: 600; letter-spacing: 0; line-height: 1; } .g2p-home .collection-newsletter .subscribers, .g2p-listing-page .collection-newsletter .subscribers, .g2p-detail-page .collection-newsletter .subscribers, .g2p-cart-page .collection-newsletter .subscribers, .g2p-booking-page .collection-newsletter .subscribers, .g2p-supplier-page .collection-newsletter .subscribers, .g2p-auth-page .collection-newsletter .subscribers, .g2p-how-page .collection-newsletter .subscribers, .g2p-areas-page .collection-newsletter .subscribers, .g2p-guides-page .collection-newsletter .subscribers, .g2p-static-page .collection-newsletter .subscribers { align-self: center; } .g2p-home .collection-newsletter .form-subscribers, .g2p-listing-page .collection-newsletter .form-subscribers, .g2p-detail-page .collection-newsletter .form-subscribers, .g2p-cart-page .collection-newsletter .form-subscribers, .g2p-booking-page .collection-newsletter .form-subscribers, .g2p-supplier-page .collection-newsletter .form-subscribers, .g2p-auth-page .collection-newsletter .form-subscribers, .g2p-how-page .collection-newsletter .form-subscribers, .g2p-areas-page .collection-newsletter .form-subscribers, .g2p-guides-page .collection-newsletter .form-subscribers, .g2p-static-page .collection-newsletter .form-subscribers { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 68px; margin: 0; padding: 8px; border: 1px solid rgba(244, 240, 230, 0.36); border-radius: 999px; background: rgba(250, 247, 238, 0.96); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16); } .g2p-home .collection-newsletter .form-subscribers input[type="text"], .g2p-listing-page .collection-newsletter .form-subscribers input[type="text"], .g2p-detail-page .collection-newsletter .form-subscribers input[type="text"], .g2p-cart-page .collection-newsletter .form-subscribers input[type="text"], .g2p-booking-page .collection-newsletter .form-subscribers input[type="text"], .g2p-supplier-page .collection-newsletter .form-subscribers input[type="text"], .g2p-auth-page .collection-newsletter .form-subscribers input[type="text"], .g2p-how-page .collection-newsletter .form-subscribers input[type="text"], .g2p-areas-page .collection-newsletter .form-subscribers input[type="text"], .g2p-guides-page .collection-newsletter .form-subscribers input[type="text"], .g2p-static-page .collection-newsletter .form-subscribers input[type="text"] { width: 100%; min-height: 52px; padding: 0 18px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; color: var(--g2p-ink, #1C1F1A) !important; font-family: var(--g2p-sans, sans-serif); font-size: 16px; font-weight: 600; outline: none; } .g2p-home .collection-newsletter .form-subscribers input[type="text"]::placeholder, .g2p-listing-page .collection-newsletter .form-subscribers input[type="text"]::placeholder, .g2p-detail-page .collection-newsletter .form-subscribers input[type="text"]::placeholder, .g2p-cart-page .collection-newsletter .form-subscribers input[type="text"]::placeholder, .g2p-booking-page .collection-newsletter .form-subscribers input[type="text"]::placeholder, .g2p-supplier-page .collection-newsletter .form-subscribers input[type="text"]::placeholder, .g2p-auth-page .collection-newsletter .form-subscribers input[type="text"]::placeholder, .g2p-how-page .collection-newsletter .form-subscribers input[type="text"]::placeholder, .g2p-areas-page .collection-newsletter .form-subscribers input[type="text"]::placeholder, .g2p-guides-page .collection-newsletter .form-subscribers input[type="text"]::placeholder, .g2p-static-page .collection-newsletter .form-subscribers input[type="text"]::placeholder { color: rgba(28, 31, 26, 0.48); } .g2p-home .collection-newsletter .form-subscribers input[type="submit"], .g2p-listing-page .collection-newsletter .form-subscribers input[type="submit"], .g2p-detail-page .collection-newsletter .form-subscribers input[type="submit"], .g2p-cart-page .collection-newsletter .form-subscribers input[type="submit"], .g2p-booking-page .collection-newsletter .form-subscribers input[type="submit"], .g2p-supplier-page .collection-newsletter .form-subscribers input[type="submit"], .g2p-auth-page .collection-newsletter .form-subscribers input[type="submit"], .g2p-how-page .collection-newsletter .form-subscribers input[type="submit"], .g2p-areas-page .collection-newsletter .form-subscribers input[type="submit"], .g2p-guides-page .collection-newsletter .form-subscribers input[type="submit"], .g2p-static-page .collection-newsletter .form-subscribers input[type="submit"] { min-height: 52px; padding: 0 24px !important; border: 0 !important; border-radius: 999px !important; background: var(--g2p-clay, #C45A2C) !important; color: #ffffff !important; font-family: var(--g2p-sans, sans-serif); font-size: 15px; font-weight: 800; cursor: pointer; transition: background 160ms ease, transform 160ms ease; } .g2p-home .collection-newsletter .form-subscribers input[type="submit"]:hover, .g2p-listing-page .collection-newsletter .form-subscribers input[type="submit"]:hover, .g2p-detail-page .collection-newsletter .form-subscribers input[type="submit"]:hover, .g2p-cart-page .collection-newsletter .form-subscribers input[type="submit"]:hover, .g2p-booking-page .collection-newsletter .form-subscribers input[type="submit"]:hover, .g2p-supplier-page .collection-newsletter .form-subscribers input[type="submit"]:hover, .g2p-auth-page .collection-newsletter .form-subscribers input[type="submit"]:hover, .g2p-how-page .collection-newsletter .form-subscribers input[type="submit"]:hover, .g2p-areas-page .collection-newsletter .form-subscribers input[type="submit"]:hover, .g2p-guides-page .collection-newsletter .form-subscribers input[type="submit"]:hover, .g2p-static-page .collection-newsletter .form-subscribers input[type="submit"]:hover { background: #A94A25 !important; transform: translateY(-1px); } @media (max-width: 900px) { .g2p-home .collection-newsletter, .g2p-listing-page .collection-newsletter, .g2p-detail-page .collection-newsletter, .g2p-cart-page .collection-newsletter, .g2p-booking-page .collection-newsletter, .g2p-supplier-page .collection-newsletter, .g2p-auth-page .collection-newsletter, .g2p-how-page .collection-newsletter, .g2p-areas-page .collection-newsletter, .g2p-guides-page .collection-newsletter, .g2p-static-page .collection-newsletter { padding: 48px 0 !important; } .g2p-home .collection-newsletter > .container, .g2p-listing-page .collection-newsletter > .container, .g2p-detail-page .collection-newsletter > .container, .g2p-cart-page .collection-newsletter > .container, .g2p-booking-page .collection-newsletter > .container, .g2p-supplier-page .collection-newsletter > .container, .g2p-auth-page .collection-newsletter > .container, .g2p-how-page .collection-newsletter > .container, .g2p-areas-page .collection-newsletter > .container, .g2p-guides-page .collection-newsletter > .container, .g2p-static-page .collection-newsletter > .container { width: min(100% - 28px, 680px); padding: 28px; border-radius: 26px; } .g2p-home .collection-newsletter .col-lg-8, .g2p-listing-page .collection-newsletter .col-lg-8, .g2p-detail-page .collection-newsletter .col-lg-8, .g2p-cart-page .collection-newsletter .col-lg-8, .g2p-booking-page .collection-newsletter .col-lg-8, .g2p-supplier-page .collection-newsletter .col-lg-8, .g2p-auth-page .collection-newsletter .col-lg-8, .g2p-how-page .collection-newsletter .col-lg-8, .g2p-areas-page .collection-newsletter .col-lg-8, .g2p-guides-page .collection-newsletter .col-lg-8, .g2p-static-page .collection-newsletter .col-lg-8 { grid-template-columns: 1fr; gap: 22px; text-align: center; } .g2p-home .collection-newsletter .section-heading, .g2p-listing-page .collection-newsletter .section-heading, .g2p-detail-page .collection-newsletter .section-heading, .g2p-cart-page .collection-newsletter .section-heading, .g2p-booking-page .collection-newsletter .section-heading, .g2p-supplier-page .collection-newsletter .section-heading, .g2p-auth-page .collection-newsletter .section-heading, .g2p-how-page .collection-newsletter .section-heading, .g2p-areas-page .collection-newsletter .section-heading, .g2p-guides-page .collection-newsletter .section-heading, .g2p-static-page .collection-newsletter .section-heading { text-align: center !important; } .g2p-home .collection-newsletter h2, .g2p-listing-page .collection-newsletter h2, .g2p-detail-page .collection-newsletter h2, .g2p-cart-page .collection-newsletter h2, .g2p-booking-page .collection-newsletter h2, .g2p-supplier-page .collection-newsletter h2, .g2p-auth-page .collection-newsletter h2, .g2p-how-page .collection-newsletter h2, .g2p-areas-page .collection-newsletter h2, .g2p-guides-page .collection-newsletter h2, .g2p-static-page .collection-newsletter h2 { max-width: none; font-size: 42px; } } @media (max-width: 560px) { .g2p-home .collection-newsletter > .container, .g2p-listing-page .collection-newsletter > .container, .g2p-detail-page .collection-newsletter > .container, .g2p-cart-page .collection-newsletter > .container, .g2p-booking-page .collection-newsletter > .container, .g2p-supplier-page .collection-newsletter > .container, .g2p-auth-page .collection-newsletter > .container, .g2p-how-page .collection-newsletter > .container, .g2p-areas-page .collection-newsletter > .container, .g2p-guides-page .collection-newsletter > .container, .g2p-static-page .collection-newsletter > .container { padding: 24px; } .g2p-home .collection-newsletter h2, .g2p-listing-page .collection-newsletter h2, .g2p-detail-page .collection-newsletter h2, .g2p-cart-page .collection-newsletter h2, .g2p-booking-page .collection-newsletter h2, .g2p-supplier-page .collection-newsletter h2, .g2p-auth-page .collection-newsletter h2, .g2p-how-page .collection-newsletter h2, .g2p-areas-page .collection-newsletter h2, .g2p-guides-page .collection-newsletter h2, .g2p-static-page .collection-newsletter h2 { font-size: 34px; } .g2p-home .collection-newsletter .form-subscribers, .g2p-listing-page .collection-newsletter .form-subscribers, .g2p-detail-page .collection-newsletter .form-subscribers, .g2p-cart-page .collection-newsletter .form-subscribers, .g2p-booking-page .collection-newsletter .form-subscribers, .g2p-supplier-page .collection-newsletter .form-subscribers, .g2p-auth-page .collection-newsletter .form-subscribers, .g2p-how-page .collection-newsletter .form-subscribers, .g2p-areas-page .collection-newsletter .form-subscribers, .g2p-guides-page .collection-newsletter .form-subscribers, .g2p-static-page .collection-newsletter .form-subscribers { grid-template-columns: 1fr; border-radius: 24px; } .g2p-home .collection-newsletter .form-subscribers input[type="submit"], .g2p-listing-page .collection-newsletter .form-subscribers input[type="submit"], .g2p-detail-page .collection-newsletter .form-subscribers input[type="submit"], .g2p-cart-page .collection-newsletter .form-subscribers input[type="submit"], .g2p-booking-page .collection-newsletter .form-subscribers input[type="submit"], .g2p-supplier-page .collection-newsletter .form-subscribers input[type="submit"], .g2p-auth-page .collection-newsletter .form-subscribers input[type="submit"], .g2p-how-page .collection-newsletter .form-subscribers input[type="submit"], .g2p-areas-page .collection-newsletter .form-subscribers input[type="submit"], .g2p-guides-page .collection-newsletter .form-subscribers input[type="submit"], .g2p-static-page .collection-newsletter .form-subscribers input[type="submit"] { width: 100%; } } body.g2p-marketplace-ready { --g2p-map: #F4F0E6; --g2p-paper: #FFFFFF; --g2p-surface-2: #FAF7EE; --g2p-ink: #1C1F1A; --g2p-muted: #6E7163; --g2p-pine: #2F4A33; --g2p-clay: #C45A2C; --g2p-line: rgba(28, 31, 26, 0.12); --g2p-sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --g2p-serif: "Fraunces", Georgia, serif; --g2p-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } body.g2p-marketplace-ready .collection-newsletter { padding: 72px 0 !important; border-top: 1px solid var(--g2p-line); background: var(--g2p-map) !important; color: var(--g2p-ink) !important; } body.g2p-marketplace-ready .collection-newsletter > .container { position: relative; overflow: hidden; width: min(100% - 64px, 1216px) !important; max-width: 1216px !important; padding: 44px !important; border: 1px solid rgba(244, 240, 230, 0.18); border-radius: 32px; background: repeating-linear-gradient(171deg, rgba(244, 240, 230, 0.07) 0 1px, transparent 1px 34px), linear-gradient(135deg, #2F4A33 0%, #1C1F1A 100%) !important; box-shadow: 0 26px 72px rgba(28, 31, 26, 0.18); } body.g2p-marketplace-ready .collection-newsletter .row { margin: 0 !important; } body.g2p-marketplace-ready .collection-newsletter .col-lg-8 { display: grid !important; grid-template-columns: minmax(0, 0.95fr) minmax(320px, 480px); gap: 32px; align-items: center; width: 100% !important; max-width: none !important; flex: 0 0 100% !important; padding: 0 !important; } body.g2p-marketplace-ready .collection-newsletter .section-head { margin: 0 !important; } body.g2p-marketplace-ready .collection-newsletter .section-heading { text-align: left !important; } body.g2p-marketplace-ready .collection-newsletter h5 { margin: 0 0 12px !important; color: var(--g2p-clay) !important; font-family: var(--g2p-mono); font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0 !important; text-transform: uppercase; } body.g2p-marketplace-ready .collection-newsletter h2 { max-width: 560px; margin: 0 !important; color: var(--g2p-map) !important; font-family: var(--g2p-serif); font-size: 52px !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1 !important; } body.g2p-marketplace-ready .collection-newsletter .subscribers { align-self: center; width: 100% !important; } body.g2p-marketplace-ready .collection-newsletter .form-subscribers { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 68px; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 8px !important; border: 1px solid rgba(244, 240, 230, 0.36) !important; border-radius: 999px !important; background: rgba(250, 247, 238, 0.96) !important; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16); } body.g2p-marketplace-ready .collection-newsletter .form-subscribers input[type="text"] { width: 100% !important; min-width: 0 !important; min-height: 52px !important; padding: 0 18px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; color: var(--g2p-ink) !important; font-family: var(--g2p-sans); font-size: 16px !important; font-weight: 600 !important; outline: none; } body.g2p-marketplace-ready .collection-newsletter .form-subscribers input[type="text"]::placeholder { color: rgba(28, 31, 26, 0.48) !important; } body.g2p-marketplace-ready .collection-newsletter .form-subscribers input[type="submit"] { width: auto !important; min-height: 52px !important; padding: 0 24px !important; border: 0 !important; border-radius: 999px !important; background: var(--g2p-clay) !important; color: #ffffff !important; font-family: var(--g2p-sans); font-size: 15px !important; font-weight: 800 !important; cursor: pointer; transition: background 160ms ease, transform 160ms ease; } body.g2p-marketplace-ready .collection-newsletter .form-subscribers input[type="submit"]:hover { background: #A94A25 !important; transform: translateY(-1px); } @media (max-width: 900px) { body.g2p-marketplace-ready .collection-newsletter { padding: 48px 0 !important; } body.g2p-marketplace-ready .collection-newsletter > .container { width: min(100% - 28px, 680px) !important; padding: 28px !important; border-radius: 26px; } body.g2p-marketplace-ready .collection-newsletter .col-lg-8 { grid-template-columns: 1fr; gap: 22px; text-align: center; } body.g2p-marketplace-ready .collection-newsletter .section-heading { text-align: center !important; } body.g2p-marketplace-ready .collection-newsletter h2 { max-width: none; font-size: 42px !important; } } @media (max-width: 560px) { body.g2p-marketplace-ready .collection-newsletter > .container { padding: 24px !important; } body.g2p-marketplace-ready .collection-newsletter h2 { font-size: 34px !important; } body.g2p-marketplace-ready .collection-newsletter .form-subscribers { grid-template-columns: 1fr; border-radius: 24px !important; } body.g2p-marketplace-ready .collection-newsletter .form-subscribers input[type="submit"] { width: 100% !important; } } /* Gear2Peer newsletter compact scale: keep the footer CTA balanced with the marketplace pages. */ body.g2p-marketplace-ready .collection-newsletter { padding: 48px 0 !important; } body.g2p-marketplace-ready .collection-newsletter > .container { width: min(100% - 128px, 1080px) !important; max-width: 1080px !important; padding: 26px 32px !important; border-radius: 22px !important; box-shadow: 0 16px 42px rgba(28, 31, 26, 0.13) !important; } body.g2p-marketplace-ready .collection-newsletter .col-lg-8 { grid-template-columns: minmax(0, 0.9fr) minmax(380px, 520px) !important; gap: 24px !important; } body.g2p-marketplace-ready .collection-newsletter h5 { margin-bottom: 8px !important; font-size: 10px !important; font-weight: 760 !important; } body.g2p-marketplace-ready .collection-newsletter h2 { max-width: 430px !important; font-size: clamp(31px, 2.8vw, 35px) !important; line-height: 1.04 !important; } body.g2p-marketplace-ready .collection-newsletter .form-subscribers { justify-self: end; height: 52px !important; min-height: 52px !important; width: min(100%, 520px) !important; max-width: 520px !important; padding: 6px !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12) !important; } body.g2p-marketplace-ready .collection-newsletter .form-subscribers input[type="text"] { height: 40px !important; min-height: 40px !important; padding: 0 16px !important; font-size: 14px !important; } body.g2p-marketplace-ready .collection-newsletter .form-subscribers input[type="submit"] { height: 40px !important; min-height: 40px !important; padding: 0 18px !important; font-size: 14px !important; } @media (max-width: 900px) { body.g2p-marketplace-ready .collection-newsletter { padding: 38px 0 !important; } body.g2p-marketplace-ready .collection-newsletter > .container { width: min(100% - 32px, 680px) !important; padding: 26px !important; } body.g2p-marketplace-ready .collection-newsletter .col-lg-8 { grid-template-columns: 1fr !important; gap: 18px !important; } body.g2p-marketplace-ready .collection-newsletter h2 { max-width: none !important; font-size: clamp(32px, 8vw, 36px) !important; } } @media (max-width: 560px) { body.g2p-marketplace-ready .collection-newsletter > .container { padding: 22px !important; border-radius: 22px !important; } body.g2p-marketplace-ready .collection-newsletter h2 { font-size: 30px !important; } body.g2p-marketplace-ready .collection-newsletter .form-subscribers { height: auto !important; min-height: 0 !important; max-width: 100% !important; gap: 8px !important; padding: 8px !important; } body.g2p-marketplace-ready .collection-newsletter .form-subscribers input[type="text"], body.g2p-marketplace-ready .collection-newsletter .form-subscribers input[type="submit"] { height: 42px !important; min-height: 42px !important; } } /* Gear2Peer footer: Claude-style desktop structure with local coordinates. */ body.g2p-marketplace-ready .footer { padding-top: 0 !important; background: transparent !important; } .footer .g2p-site-footer-top { padding: 54px 0 42px !important; border-top: 1px solid var(--g2p-line, rgba(28, 31, 26, 0.12)); background: transparent !important; color: var(--g2p-ink, #1C1F1A) !important; margin-bottom: 0 !important; } .footer .g2p-site-footer-top .container, .footer .g2p-site-footer-bottom .container { width: min(100% - 64px, 1216px) !important; max-width: 1216px !important; } .footer .g2p-footer-grid { display: grid; grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(150px, 0.78fr)); gap: clamp(34px, 6vw, 96px); align-items: center; } .footer .g2p-footer-brand { max-width: 350px; } .footer .g2p-footer-logo { display: block; width: 315px; max-width: 100%; color: var(--g2p-ink, #1C1F1A) !important; text-decoration: none !important; cursor: pointer; user-select: none; -webkit-user-select: none; } .footer .g2p-footer-lockup-frame { display: block; width: 315px; max-width: 100%; height: auto; overflow: visible; } .footer .g2p-footer-lockup { display: block; width: 124.4%; max-width: none; height: auto; object-fit: contain; transform: translateX(-9.76%); cursor: pointer; } .footer .g2p-footer-mark { position: relative; display: inline-flex; width: 30px; height: 30px; flex: 0 0 30px; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; background: transparent; } .footer .g2p-footer-mark img { display: block; width: 30px; height: 30px; object-fit: contain; } .footer .g2p-footer-wordmark { display: inline-flex; align-items: baseline; color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-serif, Georgia, serif); font-size: 26px; font-weight: 800; letter-spacing: 0; line-height: 1; } .footer .g2p-footer-wordmark span { color: var(--g2p-clay, #C45A2C); font-family: var(--g2p-sans, sans-serif); font-weight: 900; } .footer .g2p-footer-brand p { max-width: 315px; margin: 20px 0 18px; color: var(--g2p-muted, #6E7163); font-family: var(--g2p-sans, sans-serif); font-size: 15px; font-weight: 500; line-height: 1.55; } .footer .g2p-footer-badges { display: flex; flex-wrap: wrap; gap: 8px; } .footer .g2p-footer-badges span { display: inline-flex; box-sizing: border-box; height: 25px; align-items: center; justify-content: center; padding: 2px 11px 0; border: 1px solid rgba(47, 74, 51, 0.14); border-radius: 999px; background: rgba(47, 74, 51, 0.08); color: var(--g2p-pine, #2F4A33); font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 10px; font-weight: 800; letter-spacing: 1.6px; line-height: 1; text-align: center; text-transform: uppercase; } .footer .g2p-footer-nav { display: grid; gap: 12px; align-content: start; } .footer .g2p-footer-nav h3 { margin: 0 0 4px; color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 12px; font-weight: 900; letter-spacing: 0; line-height: 1.1; text-transform: uppercase; } .footer .g2p-footer-nav a { width: fit-content; color: var(--g2p-muted, #6E7163) !important; font-family: var(--g2p-sans, sans-serif); font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none !important; transition: color 160ms ease, transform 160ms ease; } .footer .g2p-footer-nav a:hover, .footer .g2p-footer-nav a:focus-visible { color: var(--g2p-clay, #C45A2C) !important; transform: translateX(2px); } .footer .g2p-site-footer-bottom { padding: 21px 0 26px; border-top: 1px solid var(--g2p-line, rgba(28, 31, 26, 0.12)); background: var(--g2p-map, #F4F0E6); color: var(--g2p-muted, #6E7163); } .footer .g2p-site-footer-bottom .container { display: flex; gap: 20px; align-items: center; justify-content: space-between; } .footer .g2p-site-footer-bottom p { margin: 0; color: inherit; font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 11px; font-weight: 700; letter-spacing: 1.6px; line-height: 1.5; } .footer .g2p-site-footer-bottom p:last-child { color: var(--g2p-muted, #6E7163); text-align: right; white-space: nowrap; } @media (max-width: 900px) { .footer .g2p-site-footer-top { padding: 42px 0 36px !important; } .footer .g2p-site-footer-top .container, .footer .g2p-site-footer-bottom .container { width: min(100% - 32px, 680px) !important; } .footer .g2p-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } .footer .g2p-footer-brand { grid-column: 1 / -1; max-width: 460px; } .footer .g2p-site-footer-bottom .container { align-items: flex-start; flex-direction: column; gap: 8px; } .footer .g2p-site-footer-bottom p:last-child { text-align: left; } } @media (max-width: 560px) { .footer .g2p-footer-grid { grid-template-columns: 1fr; gap: 30px; } .footer .g2p-footer-brand p { max-width: none; } .footer .g2p-site-footer-bottom { padding-bottom: 108px; } } /* Gear2Peer pagination: compact marketplace controls instead of the old white rail. */ body.g2p-marketplace-ready .pagination-wrapper { display: flex; width: 100%; justify-content: center; margin: 46px 0 34px; padding: 0; background: transparent !important; } body.g2p-marketplace-ready .pagination { display: inline-flex !important; width: auto !important; min-height: 52px; align-items: center; justify-content: center; gap: 7px; margin: 0 !important; padding: 7px !important; overflow: visible; border: 1px solid rgba(28, 31, 26, 0.1); border-radius: 999px !important; background: rgba(250, 247, 238, 0.82) !important; box-shadow: 0 18px 48px rgba(28, 31, 26, 0.1); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } body.g2p-marketplace-ready .pagination-item { display: flex; flex: 0 0 auto; } body.g2p-marketplace-ready .pagination-link { display: inline-flex !important; width: 38px !important; height: 38px !important; min-width: 38px; align-items: center; justify-content: center; margin: 0 !important; padding: 0 !important; border: 1px solid transparent !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; color: var(--g2p-pine, #2F4A33) !important; font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 13px !important; font-weight: 900 !important; line-height: 1 !important; text-decoration: none !important; transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; } body.g2p-marketplace-ready .pagination-link .svg { width: 18px; height: 18px; color: currentColor; fill: currentColor; } body.g2p-marketplace-ready .pagination-item.selected .pagination-link { border-color: var(--g2p-pine, #2F4A33) !important; background: var(--g2p-pine, #2F4A33) !important; color: var(--g2p-map, #F4F0E6) !important; box-shadow: 0 10px 24px rgba(47, 74, 51, 0.18) !important; } body.g2p-marketplace-ready .pagination-item:not(.selected) .pagination-link { background: rgba(255, 255, 255, 0.62) !important; border-color: rgba(28, 31, 26, 0.09) !important; } body.g2p-marketplace-ready .pagination-item:not(.selected) .pagination-link:hover, body.g2p-marketplace-ready .pagination-item:not(.selected) .pagination-link:focus-visible { border-color: rgba(196, 90, 44, 0.28) !important; background: rgba(196, 90, 44, 0.14) !important; color: var(--g2p-clay, #C45A2C) !important; transform: translateY(-1px); } body.g2p-marketplace-ready .pagination-item.next .pagination-link, body.g2p-marketplace-ready .pagination-item.prev .pagination-link, body.g2p-marketplace-ready .pagination-item.forward .pagination-link, body.g2p-marketplace-ready .pagination-item.rewind .pagination-link { width: 42px !important; min-width: 42px; } body.g2p-marketplace-ready .pagination-item.disabled { opacity: 0.42; } body.g2p-marketplace-ready .pagination-wrapper .showing { align-self: center; margin-left: 14px; color: var(--g2p-muted, #6E7163); font-family: var(--g2p-sans, sans-serif); font-size: 13px; font-weight: 700; } @media (max-width: 560px) { body.g2p-marketplace-ready .pagination-wrapper { margin: 34px 0 28px; } body.g2p-marketplace-ready .pagination { min-height: 48px; gap: 5px; padding: 6px !important; } body.g2p-marketplace-ready .pagination-link { width: 36px !important; height: 36px !important; min-width: 36px; } body.g2p-marketplace-ready .pagination-item.next .pagination-link, body.g2p-marketplace-ready .pagination-item.prev .pagination-link, body.g2p-marketplace-ready .pagination-item.forward .pagination-link, body.g2p-marketplace-ready .pagination-item.rewind .pagination-link { width: 38px !important; min-width: 38px; } } /* Gear2Peer filters: app-like checkbox controls for browse refinements. */ body.g2p-marketplace-ready .g2p-listing-page .collection-sidebar label.checkbox, body.g2p-marketplace-ready .g2p-listing-page .filters label.checkbox, body.g2p-marketplace-ready .g2p-listing-page .filter-directory label.checkbox { display: flex !important; min-height: 30px; align-items: center; gap: 10px; margin: 0; padding: 4px 0; color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-sans, sans-serif); font-size: 14px; font-weight: 650; line-height: 1.25; cursor: pointer; transition: color 160ms ease; } body.g2p-marketplace-ready .g2p-listing-page .collection-sidebar label.checkbox input[type="checkbox"], body.g2p-marketplace-ready .g2p-listing-page .filters label.checkbox input[type="checkbox"], body.g2p-marketplace-ready .g2p-listing-page .filter-directory label.checkbox input[type="checkbox"] { position: relative; display: inline-block; width: 18px !important; height: 18px !important; min-width: 18px; flex: 0 0 18px; margin: 0 !important; border: 1.25px solid rgba(47, 74, 51, 0.24) !important; border-radius: 6px; background: rgba(250, 247, 238, 0.74) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 1px 2px rgba(28, 31, 26, 0.04); cursor: pointer; appearance: none; -webkit-appearance: none; transform: translateZ(0); transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; } body.g2p-marketplace-ready .g2p-listing-page .collection-sidebar label.checkbox input[type="checkbox"]::after, body.g2p-marketplace-ready .g2p-listing-page .filters label.checkbox input[type="checkbox"]::after, body.g2p-marketplace-ready .g2p-listing-page .filter-directory label.checkbox input[type="checkbox"]::after { content: ""; position: absolute; top: 48%; left: 50%; width: 8px; height: 4px; border-bottom: 2px solid var(--g2p-paper, #FAF7EE); border-left: 2px solid var(--g2p-paper, #FAF7EE); border-radius: 0 0 0 1px; opacity: 0; transform: translate(-50%, -50%) rotate(-45deg) scale(0.82); transform-origin: 50% 50%; transition: opacity 100ms ease, transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1); } body.g2p-marketplace-ready .g2p-listing-page .collection-sidebar label.checkbox input[type="checkbox"]::before, body.g2p-marketplace-ready .g2p-listing-page .filters label.checkbox input[type="checkbox"]::before, body.g2p-marketplace-ready .g2p-listing-page .filter-directory label.checkbox input[type="checkbox"]::before { content: none !important; display: none !important; } body.g2p-marketplace-ready .g2p-listing-page .collection-sidebar label.checkbox input[type="checkbox"]:checked, body.g2p-marketplace-ready .g2p-listing-page .filters label.checkbox input[type="checkbox"]:checked, body.g2p-marketplace-ready .g2p-listing-page .filter-directory label.checkbox input[type="checkbox"]:checked { border-color: rgba(196, 90, 44, 0.82) !important; background: var(--g2p-clay, #C45A2C) !important; box-shadow: 0 6px 16px rgba(196, 90, 44, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.28); } body.g2p-marketplace-ready .g2p-listing-page .collection-sidebar label.checkbox input[type="checkbox"]:checked::after, body.g2p-marketplace-ready .g2p-listing-page .filters label.checkbox input[type="checkbox"]:checked::after, body.g2p-marketplace-ready .g2p-listing-page .filter-directory label.checkbox input[type="checkbox"]:checked::after { width: 8px !important; height: 4px !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 2px solid var(--g2p-paper, #FAF7EE) !important; border-left: 2px solid var(--g2p-paper, #FAF7EE) !important; background: transparent !important; opacity: 1 !important; transform: translate(-50%, -50%) rotate(-45deg) scale(1) !important; } body.g2p-marketplace-ready .g2p-listing-page .collection-sidebar label.checkbox:hover, body.g2p-marketplace-ready .g2p-listing-page .filters label.checkbox:hover, body.g2p-marketplace-ready .g2p-listing-page .filter-directory label.checkbox:hover { color: var(--g2p-clay, #C45A2C); } body.g2p-marketplace-ready .g2p-listing-page .collection-sidebar label.checkbox:hover input[type="checkbox"]:not(:checked), body.g2p-marketplace-ready .g2p-listing-page .filters label.checkbox:hover input[type="checkbox"]:not(:checked), body.g2p-marketplace-ready .g2p-listing-page .filter-directory label.checkbox:hover input[type="checkbox"]:not(:checked) { border-color: rgba(196, 90, 44, 0.42) !important; background: rgba(196, 90, 44, 0.08) !important; transform: translateY(-1px); } body.g2p-marketplace-ready .g2p-listing-page .collection-sidebar label.checkbox input[type="checkbox"]:focus-visible, body.g2p-marketplace-ready .g2p-listing-page .filters label.checkbox input[type="checkbox"]:focus-visible, body.g2p-marketplace-ready .g2p-listing-page .filter-directory label.checkbox input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(196, 90, 44, 0.16), 0 6px 16px rgba(47, 74, 51, 0.16); } body.g2p-marketplace-ready .g2p-listing-page .collection-sidebar label.checkbox .lb-txt, body.g2p-marketplace-ready .g2p-listing-page .filters label.checkbox .lb-txt, body.g2p-marketplace-ready .g2p-listing-page .filter-directory label.checkbox .lb-txt { display: inline-block; min-width: 0; } /* Gear2Peer browse categories: keep labels clear and replace legacy arrow glyphs. */ body.g2p-marketplace-ready .g2p-listing-page .sidebar-widget-head, body.g2p-marketplace-ready .g2p-listing-page .filter-widget-head, body.g2p-marketplace-ready .g2p-listing-page .widget-head { position: relative; display: flex !important; min-height: 24px; align-items: center; padding-right: 30px !important; overflow: visible !important; } body.g2p-marketplace-ready .g2p-listing-page .sidebar-widget-head::before, body.g2p-marketplace-ready .g2p-listing-page .filter-widget-head::before, body.g2p-marketplace-ready .g2p-listing-page .widget-head::before { content: "" !important; position: absolute !important; top: 50% !important; right: 0 !important; width: 22px !important; height: 22px !important; margin: 0 !important; border: 1px solid rgba(47, 74, 51, 0.16) !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.54) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58); opacity: 1 !important; pointer-events: none !important; transform: translateY(-50%) !important; } body.g2p-marketplace-ready .g2p-listing-page .sidebar-widget-head::after, body.g2p-marketplace-ready .g2p-listing-page .filter-widget-head::after, body.g2p-marketplace-ready .g2p-listing-page .widget-head::after { content: "" !important; position: absolute !important; top: 50% !important; right: 7.5px !important; width: 7px !important; height: 7px !important; border: solid var(--g2p-pine, #2F4A33) !important; border-width: 0 1.7px 1.7px 0 !important; opacity: 1 !important; pointer-events: none !important; transform: translateY(-50%) rotate(-135deg) !important; transition: transform 160ms ease, border-color 160ms ease; transform-origin: 50% 50%; } body.g2p-marketplace-ready .g2p-listing-page .sidebar-widget-head[aria-expanded="false"]::after, body.g2p-marketplace-ready .g2p-listing-page .filter-widget-head[aria-expanded="false"]::after, body.g2p-marketplace-ready .g2p-listing-page .widget-head[aria-expanded="false"]::after { transform: translateY(-50%) rotate(45deg) !important; } body.g2p-marketplace-ready .g2p-listing-page #accordian.cat-accordion, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion.toggle-target { overflow: visible !important; max-height: none !important; padding-bottom: 10px !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion > ul { display: grid !important; gap: 2px; margin: 0 !important; padding: 0 !important; overflow: visible !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion li { position: relative; min-height: 34px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li a.filter_categories { display: flex !important; width: 100%; min-height: 34px !important; align-items: center; padding: 5px 34px 5px 0 !important; border-radius: 999px; color: var(--g2p-ink, #1C1F1A) !important; font-family: var(--g2p-sans, sans-serif); font-size: 14px; font-weight: 560 !important; line-height: 1.25 !important; text-decoration: none !important; transition: background 160ms ease, color 160ms ease, padding-left 160ms ease; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li a.filter_categories:hover, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li a.filter_categories:focus { background: rgba(196, 90, 44, 0.08); color: var(--g2p-clay, #C45A2C) !important; padding-left: 10px !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul ul { margin: 2px 0 6px 6px !important; padding-left: 12px !important; border-left: 1px solid rgba(47, 74, 51, 0.12); } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion .acc-trigger { position: absolute !important; top: 17px !important; right: 0 !important; z-index: 2; display: grid !important; width: 22px !important; height: 22px !important; place-items: center; border: 1px solid rgba(47, 74, 51, 0.16); border-radius: 999px; background: rgba(255, 255, 255, 0.64); color: var(--g2p-pine, #2F4A33); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); transform: translateY(-50%) !important; transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion .acc-trigger::before, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion .acc-trigger::after { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; display: block !important; width: 9px !important; height: 1.7px !important; margin: 0 !important; border: 0 !important; border-radius: 999px; background: currentColor !important; opacity: 1 !important; transform: translate(-50%, -50%) !important; transition: opacity 120ms ease, transform 160ms ease; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion .acc-trigger::after { transform: translate(-50%, -50%) rotate(90deg) !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion .acc-trigger:hover, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion .acc-trigger:focus { border-color: rgba(196, 90, 44, 0.28); background: rgba(196, 90, 44, 0.12); color: var(--g2p-clay, #C45A2C); } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion .acc-trigger.is--active { border-color: rgba(47, 74, 51, 0.2); background: rgba(47, 74, 51, 0.1); color: var(--g2p-pine, #2F4A33); } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion .acc-trigger.is--active::after { opacity: 0 !important; } /* Gear2Peer product cards: subtler Claude-style hover and lighter category badges. */ body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card { position: relative; z-index: 0; isolation: isolate; border: 0 !important; border-radius: 20px; outline: 0 !important; background: transparent !important; box-shadow: none !important; transition: transform 180ms ease; } body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card::before, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card::before { content: ""; display: none !important; position: absolute; inset: -8px -8px -10px; z-index: -1; border-radius: 26px; background: linear-gradient(145deg, rgba(255, 253, 248, 0.74), rgba(236, 230, 215, 0.52)), radial-gradient(circle at 12% 0%, rgba(196, 90, 44, 0.12), transparent 46%); box-shadow: 0 20px 48px rgba(28, 31, 26, 0.08), 0 6px 18px rgba(196, 90, 44, 0.06); opacity: 0; pointer-events: none; transform: scale(0.985); transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease; } body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card::after, body.g2p-marketplace-ready .g2p-listing-page .product-tile-1::after, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card::after, body.g2p-marketplace-ready .g2p-home .product-tile-1::after { content: none !important; display: none !important; border: 0 !important; box-shadow: none !important; opacity: 0 !important; } body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card:hover, body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card:focus-within, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card:hover, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card:focus-within { border: 0 !important; outline: 0 !important; box-shadow: none !important; transform: translateY(-4px); } body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card:hover::before, body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card:focus-within::before, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card:hover::before, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card:focus-within::before { opacity: 0; transform: scale(1); box-shadow: 0 16px 38px rgba(28, 31, 26, 0.08), 0 6px 18px rgba(196, 90, 44, 0.06); } body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card .product-body, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card .product-body { overflow: hidden !important; border: 0 !important; border-radius: 18px !important; background: rgba(236, 230, 215, 0.9) !important; box-shadow: 0 14px 34px rgba(28, 31, 26, 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.58) !important; transition: box-shadow 180ms ease, background-color 180ms ease; } body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card:hover .product-body, body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card:focus-within .product-body, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card:hover .product-body, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card:focus-within .product-body { border: 0 !important; background-color: rgba(255, 253, 248, 0.98) !important; box-shadow: 0 22px 58px rgba(28, 31, 26, 0.075), 0 10px 30px rgba(196, 90, 44, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important; } body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card .product-img img, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card .product-img img { transform: scale(1); transition: transform 220ms ease, filter 220ms ease; } body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card:hover .product-img img, body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card:focus-within .product-img img, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card:hover .product-img img, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card:focus-within .product-img img { filter: saturate(1.03) contrast(1.02); transform: scale(1.018); } body.g2p-marketplace-ready .g2p-listing-page #productsList { position: relative; transition: min-height 120ms ease; } body.g2p-marketplace-ready .g2p-listing-page #productsList.g2p-products-refreshing { cursor: progress; } body.g2p-marketplace-ready .g2p-listing-page #productsList.g2p-products-refreshing .product-listing { opacity: 0.62; filter: saturate(0.94); transform: translateZ(0); transition: opacity 120ms ease, filter 120ms ease; } body.g2p-marketplace-ready .g2p-listing-page #productsList.g2p-products-refreshing::before { content: "Updating gear"; position: absolute; top: 8px; right: 8px; z-index: 3; display: inline-flex; width: max-content; align-items: center; gap: 8px; padding: 8px 28px 8px 12px; border: 1px solid rgba(196, 90, 44, 0.2); border-radius: 999px; background: rgba(250, 247, 238, 0.92); color: var(--g2p-clay, #C45A2C); font-family: var(--g2p-sans, sans-serif); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; box-shadow: 0 16px 32px rgba(28, 31, 26, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.68); pointer-events: none; } body.g2p-marketplace-ready .g2p-listing-page #productsList.g2p-products-refreshing::after { content: ""; position: absolute; top: 17px; right: 20px; z-index: 4; display: block; width: 8px; height: 8px; border-radius: 999px; background: var(--g2p-clay, #C45A2C); box-shadow: 0 0 0 0 rgba(196, 90, 44, 0.28), 0 0 0 4px rgba(196, 90, 44, 0.12); animation: g2p-gear-refresh-pulse 840ms ease-in-out infinite; pointer-events: none; } @keyframes g2p-gear-refresh-pulse { 0% { transform: scale(0.82); opacity: 0.58; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.82); opacity: 0.58; } } body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card .product-category, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card .product-category { border: 1px solid rgba(28, 31, 26, 0.07) !important; background: rgba(255, 255, 255, 0.86) !important; box-shadow: 0 8px 20px rgba(28, 31, 26, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease; } body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card .product-category, body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card .product-category a, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card .product-category, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card .product-category a { color: rgba(28, 31, 26, 0.78) !important; font-weight: 580 !important; letter-spacing: 0.13em !important; } body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card:hover .product-category, body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card:focus-within .product-category, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card:hover .product-category, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card:focus-within .product-category { border-color: rgba(196, 90, 44, 0.18) !important; background: rgba(255, 255, 255, 0.94) !important; color: var(--g2p-pine, #2F4A33) !important; transform: translateY(-1px); } /* Product hover performance: keep browse/home cards on compositor-friendly work. */ @media (hover: hover) and (pointer: fine) { body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card { transform: translate3d(0, 0, 0) !important; transition: transform 130ms cubic-bezier(0.2, 0.8, 0.2, 1) !important; backface-visibility: hidden; contain: layout style; will-change: transform; } body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card::before, body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card::after, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card::before, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card::after { content: none !important; display: none !important; box-shadow: none !important; opacity: 0 !important; transition: none !important; } body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card:hover, body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card:focus-within, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card:hover, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card:focus-within { transform: translate3d(0, -3px, 0) !important; } body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card .product-body, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card .product-body, body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card:hover .product-body, body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card:focus-within .product-body, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card:hover .product-body, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card:focus-within .product-body { box-shadow: 0 8px 24px rgba(28, 31, 26, 0.045), inset 0 1px 0 rgba(255, 255, 255, 0.58) !important; transition: background-color 120ms ease !important; } body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card .product-img, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card .product-img { overflow: hidden; transform: translateZ(0); contain: paint; } body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card .product-img img, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card .product-img img { filter: none !important; transform: translateZ(0) scale(1) !important; transition: transform 130ms cubic-bezier(0.2, 0.8, 0.2, 1) !important; backface-visibility: hidden; will-change: transform; } body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card:hover .product-img img, body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card:focus-within .product-img img, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card:hover .product-img img, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card:focus-within .product-img img { filter: none !important; transform: translateZ(0) scale(1.01) !important; } body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card .product-category, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card .product-category, body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card:hover .product-category, body.g2p-marketplace-ready .g2p-listing-page .product.g2p-product-card:focus-within .product-category, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card:hover .product-category, body.g2p-marketplace-ready .g2p-home .product.g2p-product-card:focus-within .product-category { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 4px 10px rgba(28, 31, 26, 0.07) !important; transform: none !important; transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease !important; } } /* Gear2Peer empty states: replace generic system art with the marketplace language. */ body.g2p-marketplace-ready .block-empty { width: min(100%, 460px); margin: 34px auto; padding: 26px 0 30px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--g2p-ink, #1C1F1A); } body.g2p-marketplace-ready .block-empty::before { content: ""; display: block; width: 74px; height: 74px; margin: 0 auto 16px; border: 1px solid rgba(47, 74, 51, 0.18); border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--g2p-clay, #C45A2C) 0 6px, transparent 7px), linear-gradient(135deg, transparent calc(50% - 1px), rgba(47, 74, 51, 0.65) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)), radial-gradient(circle at 50% 50%, rgba(47, 74, 51, 0.08) 0 30px, transparent 31px); } body.g2p-marketplace-ready .block-empty .block__img { display: none !important; } body.g2p-marketplace-ready .block-empty h5, body.g2p-marketplace-ready .block-empty .h5 { max-width: 340px; margin: 0 auto; color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-serif, Georgia, serif); font-size: clamp(1.55rem, 2.7vw, 2.05rem); font-weight: 620; letter-spacing: 0; line-height: 1.04; } body.g2p-marketplace-ready .block-empty .g2p-empty-copy { max-width: 330px; margin: 10px auto 0; color: var(--g2p-muted, #6E7163); font-size: 0.95rem; font-weight: 600; line-height: 1.45; } body.g2p-marketplace-ready .block-empty .btn-brand { margin-top: 18px; border-radius: 999px !important; border: 0 !important; background: var(--g2p-clay, #C45A2C) !important; color: var(--g2p-map, #F4F0E6) !important; font-weight: 850; text-decoration: none; } @media (max-width: 560px) { body.g2p-marketplace-ready .block-empty { margin: 26px auto; padding: 18px 12px 24px; } body.g2p-marketplace-ready .g2p-listing-page .g2p-browse-context { align-items: flex-start; flex-direction: column; } } /* Gear2Peer FAQ page: Claude-style support surface with stable AJAX panels. */ body.g2p-marketplace-ready .g2p-faq-page { background-color: transparent !important; background-image: none !important; background-size: auto; color: var(--g2p-ink, #1C1F1A); } body.g2p-marketplace-ready .g2p-faq-page .container { width: min(100% - 48px, 1180px); max-width: none; } body.g2p-marketplace-ready .g2p-faq-hero { padding: clamp(34px, 5vw, 62px) 0 24px; } body.g2p-marketplace-ready .g2p-faq-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 430px); gap: clamp(28px, 5vw, 72px); align-items: center; } body.g2p-marketplace-ready .g2p-faq-hero-copy h1 { max-width: 760px; margin: 8px 0 14px; color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-serif, Georgia, serif); font-size: clamp(3rem, 6.8vw, 5rem); font-weight: 600; letter-spacing: 0; line-height: 0.96; } body.g2p-marketplace-ready .g2p-faq-hero-copy h1 em { color: var(--g2p-clay, #C45A2C); font-style: italic; } body.g2p-marketplace-ready .g2p-faq-hero-copy > p:not(.g2p-marketplace-kicker) { max-width: 560px; margin: 0; color: var(--g2p-muted, #6E7163); font-size: 1.08rem; font-weight: 560; line-height: 1.55; } body.g2p-marketplace-ready .g2p-faq-hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; } body.g2p-marketplace-ready .g2p-faq-hero-chips span, body.g2p-marketplace-ready .g2p-faq-panel-label { font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } body.g2p-marketplace-ready .g2p-faq-hero-chips span { display: inline-flex; align-items: center; min-height: 34px; padding: 8px 13px; border: 1px solid rgba(28, 31, 26, 0.08); border-radius: 999px; background: rgba(255, 255, 255, 0.58); color: var(--g2p-pine, #2F4A33); box-shadow: 0 10px 26px rgba(28, 31, 26, 0.05); } body.g2p-marketplace-ready .g2p-faq-search-card { padding: 18px; border: 1px solid rgba(28, 31, 26, 0.09); border-radius: 22px; background: rgba(255, 255, 255, 0.82); box-shadow: 0 18px 44px rgba(28, 31, 26, 0.1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } body.g2p-marketplace-ready .g2p-faq-search-card > span { display: block; margin-bottom: 10px; color: var(--g2p-pine, #2F4A33); font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.16em; line-height: 1.2; text-transform: uppercase; } body.g2p-marketplace-ready .g2p-faq-search-card .faqsearch, body.g2p-marketplace-ready .g2p-faq-search-card .form { position: relative; margin: 0; border-radius: 999px; background: rgba(244, 240, 230, 0.92) !important; box-shadow: inset 0 0 0 1px rgba(28, 31, 26, 0.11), 0 10px 24px rgba(28, 31, 26, 0.05); } body.g2p-marketplace-ready .g2p-faq-search-card .form::before { content: ""; position: absolute; top: 50%; left: 18px; width: 16px; height: 16px; border: 2px solid var(--g2p-pine, #2F4A33); border-radius: 50%; opacity: 0.86; transform: translateY(-50%); } body.g2p-marketplace-ready .g2p-faq-search-card .form::after { content: ""; position: absolute; top: calc(50% + 7px); left: 31px; width: 8px; height: 2px; border-radius: 999px; background: var(--g2p-pine, #2F4A33); opacity: 0.86; transform: rotate(45deg); } body.g2p-marketplace-ready .g2p-faq-search-card input[type="search"], body.g2p-marketplace-ready .g2p-faq-search-card input[type="text"] { width: 100%; min-height: 52px; padding: 0 62px 0 48px; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: var(--g2p-ink, #1C1F1A) !important; font-size: 0.98rem; font-weight: 650; outline: 0; } body.g2p-marketplace-ready .g2p-faq-search-card input::placeholder { color: rgba(62, 68, 56, 0.56); font-weight: 620; } body.g2p-marketplace-ready .g2p-faq-search-submit { position: absolute; top: 6px; right: 6px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--g2p-clay, #C45A2C); color: #fff; box-shadow: 0 10px 20px rgba(196, 90, 44, 0.22); transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease; } body.g2p-marketplace-ready .g2p-faq-search-submit:hover, body.g2p-marketplace-ready .g2p-faq-search-submit:focus-visible { background: #A94723; box-shadow: 0 12px 24px rgba(196, 90, 44, 0.28); transform: translateY(-1px); outline: 0; } body.g2p-marketplace-ready .g2p-faq-search-card > p { margin: 12px 2px 0; color: var(--g2p-muted, #6E7163); font-size: 0.84rem; font-weight: 560; line-height: 1.4; } body.g2p-marketplace-ready .g2p-faq-content { padding: 10px 0 clamp(64px, 8vw, 106px); } body.g2p-marketplace-ready .g2p-faq-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 26px; align-items: start; } body.g2p-marketplace-ready .g2p-faq-topic-panel, body.g2p-marketplace-ready .g2p-faq-list-panel { border: 1px solid rgba(28, 31, 26, 0.1); border-radius: 28px; background: rgba(255, 255, 255, 0.82); box-shadow: 0 18px 46px rgba(28, 31, 26, 0.1); } body.g2p-marketplace-ready .g2p-faq-topic-panel { position: sticky; top: 96px; padding: 18px; } body.g2p-marketplace-ready .g2p-faq-panel-label { margin: 0 0 14px; color: var(--g2p-muted, #6E7163); } body.g2p-marketplace-ready .g2p-faq-page .faq-filters { display: grid; gap: 9px; margin: 0 !important; } body.g2p-marketplace-ready .g2p-faq-page .faq-filters button, body.g2p-marketplace-ready .g2p-faq-page .faq-filters a { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 12px 14px; border: 1px solid rgba(28, 31, 26, 0.08) !important; border-radius: 16px !important; background: rgba(250, 247, 238, 0.8) !important; color: var(--g2p-ink-2, #3E4438) !important; font-family: var(--g2p-sans, sans-serif) !important; font-size: 0.95rem; font-weight: 760; letter-spacing: 0 !important; line-height: 1.2; text-align: left; transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease; } body.g2p-marketplace-ready .g2p-faq-page .faq-filters button::after, body.g2p-marketplace-ready .g2p-faq-page .faq-filters a::after { content: ">"; color: currentColor; font-family: var(--g2p-mono, ui-monospace, monospace); opacity: 0.6; } body.g2p-marketplace-ready .g2p-faq-page .faq-filters button:hover, body.g2p-marketplace-ready .g2p-faq-page .faq-filters a:hover, body.g2p-marketplace-ready .g2p-faq-page .faq-filters button.is--active, body.g2p-marketplace-ready .g2p-faq-page .faq-filters button.is-active, body.g2p-marketplace-ready .g2p-faq-page .faq-filters a.is--active, body.g2p-marketplace-ready .g2p-faq-page .faq-filters a.is-active { border-color: rgba(47, 74, 51, 0.22) !important; background: var(--g2p-pine, #2F4A33) !important; color: var(--g2p-map, #F4F0E6) !important; transform: translateY(-1px); } body.g2p-marketplace-ready .g2p-faq-help-card { margin-top: 18px; padding: 16px; border-radius: 20px; background: var(--g2p-ink, #1C1F1A); color: var(--g2p-map, #F4F0E6); } body.g2p-marketplace-ready .g2p-faq-help-card span { display: block; margin-bottom: 8px; font-size: 1rem; font-weight: 840; } body.g2p-marketplace-ready .g2p-faq-help-card p { margin: 0 0 14px; color: rgba(244, 240, 230, 0.76); font-size: 0.9rem; font-weight: 560; line-height: 1.45; } body.g2p-marketplace-ready .g2p-faq-help-card a { display: inline-flex; align-items: center; min-height: 34px; padding: 8px 13px; border-radius: 999px; background: var(--g2p-clay, #C45A2C); color: #FFFFFF !important; font-size: 0.86rem; font-weight: 820; text-decoration: none; } body.g2p-marketplace-ready .g2p-faq-list-panel { padding: clamp(20px, 3vw, 32px); } body.g2p-marketplace-ready .g2p-faq-list-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(28, 31, 26, 0.1); } body.g2p-marketplace-ready .g2p-faq-list-head h2 { margin: 0; color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-serif, Georgia, serif); font-size: clamp(2rem, 4vw, 3.35rem); font-weight: 600; letter-spacing: 0; line-height: 1; } body.g2p-marketplace-ready .g2p-faq-page .faqlist { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } body.g2p-marketplace-ready .g2p-faq-page .faqlist > li, body.g2p-marketplace-ready .g2p-faq-item { overflow: hidden; border: 1px solid rgba(28, 31, 26, 0.09) !important; border-radius: 20px !important; background: rgba(250, 247, 238, 0.82) !important; box-shadow: none !important; } body.g2p-marketplace-ready .g2p-faq-page .faqHeading { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0; padding: 18px 58px 18px 20px; color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-sans, sans-serif); font-size: clamp(1.02rem, 1.4vw, 1.25rem); font-weight: 820; letter-spacing: 0; line-height: 1.25; cursor: pointer; } body.g2p-marketplace-ready .g2p-faq-page .faqHeading::before { content: ""; position: absolute; top: 50%; right: 32px; z-index: 1; width: 2px; height: 10px; margin: 0 !important; border: 0 !important; border-radius: 999px; background: var(--g2p-pine, #2F4A33); transform: translateY(-50%); transform-origin: 50% 50%; transition: opacity 140ms ease, transform 160ms ease; } body.g2p-marketplace-ready .g2p-faq-page .faqHeading::after { content: ""; position: absolute; top: 50%; right: 18px; width: 30px; height: 30px; margin: 0 !important; border: 0 !important; border-radius: 50%; background-color: rgba(47, 74, 51, 0.1); background-image: linear-gradient(currentColor, currentColor); background-position: 50% 50%; background-repeat: no-repeat; background-size: 10px 2px; color: var(--g2p-pine, #2F4A33); transform: translateY(-50%); transition: background-color 160ms ease, color 160ms ease, transform 160ms ease; } body.g2p-marketplace-ready .g2p-faq-page .faqHeading:hover::after, body.g2p-marketplace-ready .g2p-faq-page .faqHeading:focus-visible::after { background-color: rgba(47, 74, 51, 0.16); } body.g2p-marketplace-ready .g2p-faq-page .faqHeading.faqclose::before { opacity: 0; transform: translateY(-50%) scaleY(0.2); } body.g2p-marketplace-ready .g2p-faq-page .faqHeading.faqclose::after { background-color: var(--g2p-pine, #2F4A33); background-image: linear-gradient(currentColor, currentColor); background-position: 50% 50%; background-repeat: no-repeat; background-size: 10px 2px; color: var(--g2p-map, #F4F0E6); } body.g2p-marketplace-ready .g2p-faq-page .faqanswer { padding: 0 20px 20px; color: var(--g2p-muted, #6E7163); font-size: 1rem; font-weight: 560; line-height: 1.62; } body.g2p-marketplace-ready .g2p-faq-page .faqanswer p { margin: 0; } body.g2p-marketplace-ready .g2p-faq-page mark, body.g2p-marketplace-ready .g2p-faq-page .js--highlightText { border-radius: 6px; background: rgba(196, 90, 44, 0.18); color: var(--g2p-ink, #1C1F1A); } @media (max-width: 860px) { body.g2p-marketplace-ready .g2p-faq-page .container { width: min(100% - 32px, 1180px); } body.g2p-marketplace-ready .g2p-faq-hero { padding: 42px 0 24px; } body.g2p-marketplace-ready .g2p-faq-hero-grid, body.g2p-marketplace-ready .g2p-faq-grid { grid-template-columns: 1fr; } body.g2p-marketplace-ready .g2p-faq-hero-copy h1 { font-size: clamp(3rem, 15vw, 4.7rem); } body.g2p-marketplace-ready .g2p-faq-topic-panel { position: static; order: 1; } body.g2p-marketplace-ready .g2p-faq-list-panel { order: 2; } body.g2p-marketplace-ready .g2p-faq-page .faq-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.g2p-marketplace-ready .g2p-faq-content { padding-bottom: calc(130px + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 560px) { body.g2p-marketplace-ready .g2p-faq-page .container { width: min(100% - 24px, 1180px); } body.g2p-marketplace-ready .g2p-faq-hero-copy h1 { font-size: clamp(2.55rem, 13.5vw, 3.4rem); } body.g2p-marketplace-ready .g2p-faq-hero { padding: 30px 0 14px; } body.g2p-marketplace-ready .g2p-faq-hero-grid { gap: 20px; } body.g2p-marketplace-ready .g2p-faq-search-card { padding: 18px; } body.g2p-marketplace-ready .g2p-faq-search-card input[type="search"], body.g2p-marketplace-ready .g2p-faq-search-card input[type="text"] { min-height: 52px; } body.g2p-marketplace-ready .g2p-faq-hero-chips { gap: 8px; } body.g2p-marketplace-ready .g2p-faq-hero-chips span { min-height: 30px; padding: 7px 11px; font-size: 0.64rem; } body.g2p-marketplace-ready .g2p-faq-search-card, body.g2p-marketplace-ready .g2p-faq-topic-panel, body.g2p-marketplace-ready .g2p-faq-list-panel { border-radius: 22px; } body.g2p-marketplace-ready .g2p-faq-page .faq-filters { grid-template-columns: 1fr; } body.g2p-marketplace-ready .g2p-faq-list-head { display: block; } } /* FAQ search card polish: keep the help search pill aligned and app-like. */ body.g2p-marketplace-ready .g2p-faq-search-card { padding: 20px; border-radius: 24px; background: rgba(255, 253, 248, 0.78); box-shadow: 0 18px 46px rgba(28, 31, 26, 0.08); } body.g2p-marketplace-ready .g2p-faq-search-card > span { margin-bottom: 12px; color: var(--g2p-pine, #2F4A33); letter-spacing: 0.19em; } body.g2p-marketplace-ready .g2p-faq-search-card .faqsearch, body.g2p-marketplace-ready .g2p-faq-search-card .form { height: 64px; overflow: hidden; border: 1px solid rgba(28, 31, 26, 0.11); border-radius: 999px; background: rgba(237, 231, 216, 0.82) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54), 0 12px 28px rgba(28, 31, 26, 0.055); } body.g2p-marketplace-ready .g2p-faq-search-card .form::before { left: 21px; width: 18px; height: 18px; border-width: 2px; } body.g2p-marketplace-ready .g2p-faq-search-card .form::after { top: calc(50% + 8px); left: 36px; width: 8px; } body.g2p-marketplace-ready .g2p-faq-search-card input[type="search"], body.g2p-marketplace-ready .g2p-faq-search-card input[type="text"] { display: block !important; height: 64px !important; min-height: 64px !important; margin: 0 !important; padding: 0 76px 0 56px !important; border-radius: 999px !important; font-size: 1rem; font-weight: 720; line-height: normal !important; } body.g2p-marketplace-ready .g2p-faq-search-card input::placeholder { color: rgba(62, 68, 56, 0.6); font-weight: 720; } body.g2p-marketplace-ready .g2p-faq-search-submit { top: 50%; right: 8px; width: 48px; height: 48px; padding: 0; background: var(--g2p-clay, #C45A2C); box-shadow: 0 10px 22px rgba(196, 90, 44, 0.22); transform: translateY(-50%); } body.g2p-marketplace-ready .g2p-faq-search-submit:hover, body.g2p-marketplace-ready .g2p-faq-search-submit:focus-visible { background: #A94723; box-shadow: 0 12px 25px rgba(196, 90, 44, 0.28); transform: translateY(-50%) scale(0.98); } body.g2p-marketplace-ready .g2p-faq-search-card > p { margin: 13px 0 0; max-width: 360px; color: var(--g2p-muted, #6E7163); font-size: 0.86rem; font-weight: 650; } /* FAQ load cleanup: tighter first viewport and steadier pre-rendered panels. */ @media (min-width: 861px) { body.g2p-marketplace-ready .g2p-faq-hero { padding: clamp(28px, 4vw, 48px) 0 18px; } body.g2p-marketplace-ready .g2p-faq-hero-grid { grid-template-columns: minmax(0, 660px) minmax(360px, 430px); gap: clamp(34px, 5vw, 76px); align-items: center; } body.g2p-marketplace-ready .g2p-faq-hero-copy h1 { max-width: 640px; font-size: clamp(3.2rem, 5.7vw, 4.55rem); } body.g2p-marketplace-ready .g2p-faq-hero-copy > p:not(.g2p-marketplace-kicker) { max-width: 540px; } body.g2p-marketplace-ready .g2p-faq-content { padding: 4px 0 clamp(64px, 7vw, 88px); } body.g2p-marketplace-ready .g2p-faq-grid { grid-template-columns: minmax(260px, 286px) minmax(0, 1fr); gap: 28px; } body.g2p-marketplace-ready .g2p-faq-topic-panel { padding: 18px; } body.g2p-marketplace-ready .g2p-faq-list-panel { padding: 28px 32px 34px; } body.g2p-marketplace-ready .g2p-faq-list-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: end; justify-content: start; margin-bottom: 16px; padding-bottom: 18px; } body.g2p-marketplace-ready .g2p-faq-list-head h2 { max-width: 560px; font-size: clamp(2.35rem, 3.7vw, 3.05rem); } body.g2p-marketplace-ready .g2p-faq-page .faqlist { gap: 10px; } body.g2p-marketplace-ready .g2p-faq-page .faqHeading { min-height: 58px; padding-top: 14px; padding-bottom: 14px; } } @media (max-width: 560px) { body.g2p-marketplace-ready .g2p-faq-search-card { padding: 16px; border-radius: 22px; } body.g2p-marketplace-ready .g2p-faq-search-card .faqsearch, body.g2p-marketplace-ready .g2p-faq-search-card .form { height: 58px; } body.g2p-marketplace-ready .g2p-faq-search-card input[type="search"], body.g2p-marketplace-ready .g2p-faq-search-card input[type="text"] { height: 58px !important; min-height: 58px !important; padding-right: 66px !important; font-size: 0.95rem; } body.g2p-marketplace-ready .g2p-faq-search-submit { right: 7px; width: 44px; height: 44px; } } /* Gear2Peer browse filters: keep category names from clipping at tighter widths/zoom. */ body.g2p-marketplace-ready .g2p-listing-page .sidebar-widget, body.g2p-marketplace-ready .g2p-listing-page .filter-widget, body.g2p-marketplace-ready .g2p-listing-page .widget { padding-right: 18px !important; padding-left: 18px !important; } @media (min-width: 1121px) { body.g2p-marketplace-ready .g2p-listing-page .collection-listing.filter-left { grid-template-columns: minmax(248px, 270px) minmax(0, 1fr) !important; gap: 30px !important; } body.g2p-marketplace-ready .g2p-listing-page .filter-left .collection-sidebar { display: block !important; visibility: visible !important; width: 100% !important; min-width: 248px !important; overflow: visible !important; } } body.g2p-marketplace-ready .g2p-listing-page #accordian.cat-accordion, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion.toggle-target, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion > ul, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul ul, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion li { min-width: 0 !important; overflow: visible !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li { display: grid !important; grid-template-columns: minmax(0, 1fr) 22px; column-gap: 8px; align-items: center; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > a.filter_categories { grid-column: 1 / 2; grid-row: 1; width: auto !important; min-width: 0 !important; max-width: none !important; padding: 5px 0 !important; overflow: visible !important; white-space: normal !important; word-break: normal !important; line-height: 1.32 !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger { position: relative !important; top: auto !important; right: auto !important; grid-column: 2 / 3; grid-row: 1; align-self: center; justify-self: end; transform: none !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > ul { grid-column: 1 / -1; grid-row: 2; width: 100%; transform-origin: top center; backface-visibility: hidden; will-change: opacity, transform; } /* Browse category interaction: animate a composited pill, not text layout. */ body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > a.filter_categories { position: relative !important; z-index: 0; isolation: isolate; box-sizing: border-box; max-width: 100%; margin-left: 0 !important; padding: 6px 12px !important; border-radius: 999px; background: transparent !important; transform: translateZ(0); transition: color 140ms ease !important; will-change: color; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > a.filter_categories::before { content: "" !important; position: absolute; inset: 0; z-index: -1; display: block; border-radius: inherit; background: rgba(196, 90, 44, 0.1); opacity: 0; pointer-events: none; transform: scaleX(0.96) translateZ(0); transform-origin: left center; transition: opacity 140ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1); will-change: opacity, transform; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > a.filter_categories:hover, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > a.filter_categories:focus, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li.is-active > a.filter_categories, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > a.filter_categories.is-active { background: transparent !important; color: var(--g2p-clay, #C45A2C) !important; padding-left: 12px !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > a.filter_categories:hover::before, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > a.filter_categories:focus::before, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li.is-active > a.filter_categories::before, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > a.filter_categories.is-active::before { opacity: 1; transform: scaleX(1) translateZ(0); } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger { appearance: none; -webkit-appearance: none; --g2p-acc-trigger-bg: rgba(255, 255, 255, 0.78); --g2p-acc-trigger-ink: var(--g2p-pine, #2F4A33); contain: paint; box-sizing: border-box; position: relative !important; top: auto !important; right: auto !important; grid-column: 2 / 3; grid-row: 1; align-self: center; justify-self: end; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; min-width: 22px !important; height: 22px !important; min-height: 22px !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background-color: var(--g2p-acc-trigger-bg) !important; background-image: none !important; color: transparent !important; cursor: pointer !important; overflow: hidden !important; font-size: 0 !important; line-height: 0 !important; text-indent: 0 !important; transform: none !important; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease !important; box-shadow: inset 0 0 0 1px rgba(47, 74, 51, 0.16) !important; will-change: background-color, border-color, color; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger:hover, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger:focus { --g2p-acc-trigger-bg: rgba(196, 90, 44, 0.12); --g2p-acc-trigger-ink: var(--g2p-clay, #C45A2C); box-shadow: inset 0 0 0 1px rgba(196, 90, 44, 0.24) !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger.is--active { --g2p-acc-trigger-bg: rgba(47, 74, 51, 0.1); --g2p-acc-trigger-ink: var(--g2p-pine, #2F4A33); background-color: var(--g2p-acc-trigger-bg) !important; background-image: none !important; box-shadow: inset 0 0 0 1px rgba(47, 74, 51, 0.18) !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger > * { display: none !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger::before, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger::after { content: "" !important; position: absolute !important; inset: 0 !important; display: block !important; width: 10px !important; height: 2px !important; margin: auto !important; border: 0 !important; border-radius: 999px; background: var(--g2p-acc-trigger-ink) !important; transform: none !important; transform-origin: center !important; opacity: 1 !important; pointer-events: none; transition: opacity 120ms ease, background-color 140ms ease !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger::after { width: 2px !important; height: 10px !important; transform: none !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger.is--active::after, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger[aria-expanded="true"]::after { opacity: 0 !important; } @media (prefers-reduced-motion: reduce) { body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > a.filter_categories, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > a.filter_categories::before, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger::before, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger::after { transition: none !important; } } /* Browse mobile/tablet guard: keep the desktop filter rail from flashing during PJAX/style loading. */ @media (max-width: 1120px) { body .g2p-listing-page .collection-listing, body .g2p-listing-page .collection-listing.filter-left, body .g2p-listing-page .collection-listing.filter-top { display: block !important; grid-template-columns: 1fr !important; width: 100% !important; max-width: 100% !important; } body .g2p-listing-page .collection-content { display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } body .g2p-listing-page .collection-sidebar, body .g2p-listing-page .filter-sidebar, body .g2p-listing-page .filter-left > .collection-sidebar, body .g2p-listing-page #collection-sidebar[data-g2p-filter-rail] { display: none !important; visibility: hidden !important; width: 0 !important; min-width: 0 !important; max-width: 0 !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; box-shadow: none !important; } body .g2p-listing-page .btn--filters-control { display: inline-flex !important; align-items: center !important; justify-content: center !important; } } /* Browse results guard: prevent legacy data-view grids from collapsing cards on narrow/PJAX loads. */ @media (max-width: 1120px) { body .g2p-listing-page #productsList, body .g2p-listing-page #productsList .product-listing, body .g2p-listing-page .collection-content #productsList { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } body .g2p-listing-page #productsList .product-listing, body .g2p-listing-page #productsList .product-listing[data-view] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 14px !important; align-items: start !important; } body .g2p-listing-page #productsList .product, body .g2p-listing-page #productsList .product-tile-1, body .g2p-listing-page #productsList .g2p-product-card { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; flex: none !important; } body .g2p-listing-page #productsList .product-body, body .g2p-listing-page #productsList .product-img, body .g2p-listing-page #productsList .product-img picture, body .g2p-listing-page #productsList .product-img img { width: 100% !important; min-width: 0 !important; max-width: none !important; } body .g2p-listing-page #productsList .product-body { min-height: 0 !important; aspect-ratio: 4 / 3 !important; } body .g2p-listing-page #productsList .product-img, body .g2p-listing-page #productsList .product-img picture, body .g2p-listing-page #productsList .product-img img { display: block !important; height: 100% !important; } body .g2p-listing-page #productsList .product-img img { object-fit: cover !important; } } /* Browse desktop rail must stay integrated with the topo page, even after PJAX/filter AJAX refreshes. */ @media (min-width: 1121px) { body.g2p-marketplace-ready .g2p-listing-page #collection-sidebar.collection-sidebar[data-g2p-filter-rail], body.g2p-marketplace-ready .g2p-listing-page #collection-sidebar.collection-sidebar[data-g2p-filter-rail] .filters, body.g2p-marketplace-ready .g2p-listing-page #collection-sidebar.collection-sidebar[data-g2p-filter-rail] .productFilters-js, body.g2p-marketplace-ready .g2p-listing-page #collection-sidebar.collection-sidebar[data-g2p-filter-rail] .filters-body, body.g2p-marketplace-ready .g2p-listing-page #collection-sidebar.collection-sidebar[data-g2p-filter-rail] .g2p-filter-header { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.g2p-marketplace-ready .g2p-listing-page #collection-sidebar.collection-sidebar[data-g2p-filter-rail] .g2p-filter-header { border-bottom: 1px solid var(--g2p-line, rgba(28, 31, 26, 0.12)) !important; } body.g2p-marketplace-ready .g2p-listing-page #collection-sidebar.collection-sidebar[data-g2p-filter-rail] .filters { overflow: hidden !important; } } /* Adaptive brand facets: keep the core list short while preserving future long-tail brands. */ body.g2p-marketplace-ready .g2p-brand-filter-list .g2p-filter-overflow-item { margin-top: 2px; } body.g2p-marketplace-ready .g2p-filter-overflow { border-top: 1px solid rgba(28, 31, 26, 0.1); padding-top: 10px; } body.g2p-marketplace-ready .g2p-filter-overflow summary { align-items: center; color: var(--g2p-green, #2f5638); cursor: pointer; display: flex; font-family: "Courier New", monospace; font-size: 12px; font-weight: 700; justify-content: space-between; letter-spacing: 0.08em; list-style: none; min-height: 32px; padding: 4px 0; text-transform: uppercase; } body.g2p-marketplace-ready .g2p-filter-overflow summary::-webkit-details-marker { display: none; } body.g2p-marketplace-ready .g2p-filter-overflow-count { align-items: center; background: rgba(47, 86, 56, 0.1); border: 1px solid rgba(47, 86, 56, 0.16); border-radius: 999px; color: var(--g2p-green, #2f5638); display: inline-flex; font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-size: 11px; font-weight: 800; height: 22px; justify-content: center; letter-spacing: 0; min-width: 28px; padding: 0 8px; } body.g2p-marketplace-ready .g2p-filter-overflow-list { display: grid; gap: 11px; margin-top: 8px; padding: 2px 0 4px !important; } /* Canonical Gear2Peer cartography background. Keep the map texture on the real document background so PJAX swaps, rounded panels, and transition pseudo-elements cannot hide or clip the contour lines. */ html:has(body.g2p-marketplace-ready) { min-height: 100%; background-color: #F4F0E6; } body.g2p-marketplace-ready, body.g2p-marketplace-ready:has(.g2p-web-hero) { position: relative; isolation: auto; min-height: 100vh; background-color: var(--g2p-map, #F4F0E6) !important; background-image: linear-gradient(180deg, rgba(255, 253, 248, 0.62), rgba(255, 253, 248, 0) 520px), var(--g2p-cartography-field), radial-gradient(circle at 16% 8%, rgba(47, 74, 51, 0.055), transparent 28%), radial-gradient(circle at 90% 12%, rgba(196, 90, 44, 0.045), transparent 26%) !important; background-repeat: no-repeat !important; background-position: center top, center top, left top, right top !important; background-size: auto, max(1800px, 132vw) auto, auto, auto !important; background-attachment: scroll, fixed, scroll, scroll !important; } body.g2p-marketplace-ready .g2p-home, body.g2p-marketplace-ready .g2p-listing-page, body.g2p-marketplace-ready .g2p-detail-page, body.g2p-marketplace-ready .g2p-cart-page, body.g2p-marketplace-ready .g2p-booking-page, body.g2p-marketplace-ready .g2p-supplier-page, body.g2p-marketplace-ready .g2p-auth-page, body.g2p-marketplace-ready .g2p-how-page, body.g2p-marketplace-ready .g2p-areas-page, body.g2p-marketplace-ready .g2p-guides-page, body.g2p-marketplace-ready .g2p-faq-page, body.g2p-marketplace-ready .g2p-static-page { background-color: transparent !important; background-image: none !important; background-size: auto !important; } body.g2p-marketplace-ready .footer, body.g2p-marketplace-ready .footer .g2p-site-footer-top { background-color: transparent !important; background-image: none !important; } /* Browse category disclosure: use a single centered chevron, not a plus glyph. */ body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger { appearance: none !important; -webkit-appearance: none !important; --g2p-acc-trigger-bg: rgba(255, 253, 248, 0.78); --g2p-acc-trigger-ink: var(--g2p-pine, #2F4A33); position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; min-width: 24px !important; height: 24px !important; min-height: 24px !important; padding: 0 !important; border: 1px solid rgba(47, 74, 51, 0.16) !important; border-radius: 999px !important; background: var(--g2p-acc-trigger-bg) !important; color: var(--g2p-acc-trigger-ink) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.78), 0 6px 14px rgba(28, 31, 26, 0.045) !important; cursor: pointer !important; overflow: hidden !important; font-size: 0 !important; line-height: 0 !important; text-indent: 0 !important; transform: none !important; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger > * { display: none !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger::before { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; display: block !important; width: 11px !important; height: 11px !important; margin: 0 !important; border: 0 !important; background: currentColor !important; opacity: 1 !important; pointer-events: none; transform: translate(-50%, -50%) rotate(0deg) !important; transform-origin: center !important; transition: transform 140ms ease, background-color 140ms ease !important; -webkit-mask: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger::after { content: none !important; display: none !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger:hover, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger:focus-visible { --g2p-acc-trigger-bg: rgba(196, 90, 44, 0.12); --g2p-acc-trigger-ink: var(--g2p-clay, #C45A2C); border-color: rgba(196, 90, 44, 0.28) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.78), 0 8px 18px rgba(196, 90, 44, 0.12) !important; outline: none !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger.is--active, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger[aria-expanded="true"] { --g2p-acc-trigger-bg: rgba(47, 74, 51, 0.1); --g2p-acc-trigger-ink: var(--g2p-pine, #2F4A33); border-color: rgba(47, 74, 51, 0.2) !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger.is--active::before, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger[aria-expanded="true"]::before { transform: translate(-50%, -50%) rotate(180deg) !important; } /* Higher-specificity guard because product page CSS is bundled after this file. */ html body.g2p-marketplace-ready .g2p-listing-page #collection-sidebar.collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger { appearance: none !important; -webkit-appearance: none !important; --g2p-acc-trigger-bg: rgba(255, 253, 248, 0.78); --g2p-acc-trigger-ink: var(--g2p-pine, #2F4A33); position: relative !important; top: auto !important; right: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; min-width: 24px !important; height: 24px !important; min-height: 24px !important; padding: 0 !important; border: 1px solid rgba(47, 74, 51, 0.16) !important; border-radius: 999px !important; background: var(--g2p-acc-trigger-bg) !important; color: var(--g2p-acc-trigger-ink) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.78), 0 6px 14px rgba(28, 31, 26, 0.045) !important; cursor: pointer !important; overflow: hidden !important; font-size: 0 !important; line-height: 0 !important; text-indent: 0 !important; transform: none !important; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease !important; } html body.g2p-marketplace-ready .g2p-listing-page #collection-sidebar.collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger::before { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; display: block !important; width: 11px !important; height: 11px !important; margin: 0 !important; border: 0 !important; background: currentColor !important; opacity: 1 !important; pointer-events: none; transform: translate(-50%, -50%) rotate(0deg) !important; transform-origin: center !important; transition: transform 140ms ease, background-color 140ms ease !important; -webkit-mask: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat; mask: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat; } html body.g2p-marketplace-ready .g2p-listing-page #collection-sidebar.collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger::after { content: none !important; display: none !important; } html body.g2p-marketplace-ready .g2p-listing-page #collection-sidebar.collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger:hover, html body.g2p-marketplace-ready .g2p-listing-page #collection-sidebar.collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger:focus-visible { --g2p-acc-trigger-bg: rgba(196, 90, 44, 0.12); --g2p-acc-trigger-ink: var(--g2p-clay, #C45A2C); border-color: rgba(196, 90, 44, 0.28) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.78), 0 8px 18px rgba(196, 90, 44, 0.12) !important; outline: none !important; } html body.g2p-marketplace-ready .g2p-listing-page #collection-sidebar.collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger.is--active, html body.g2p-marketplace-ready .g2p-listing-page #collection-sidebar.collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger[aria-expanded="true"] { --g2p-acc-trigger-bg: rgba(47, 74, 51, 0.1); --g2p-acc-trigger-ink: var(--g2p-pine, #2F4A33); border-color: rgba(47, 74, 51, 0.2) !important; } html body.g2p-marketplace-ready .g2p-listing-page #collection-sidebar.collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger.is--active::before, html body.g2p-marketplace-ready .g2p-listing-page #collection-sidebar.collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger[aria-expanded="true"]::before { transform: translate(-50%, -50%) rotate(180deg) !important; } /* Final browse disclosure icon: use a compact chevron image, never a plus/cross. */ body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger, html body.g2p-marketplace-ready .g2p-listing-page #collection-sidebar.collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger { --g2p-disclosure-icon: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5.4 7 8.4l3-3' fill='none' stroke='%232F4A33' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); width: 24px !important; min-width: 24px !important; height: 24px !important; min-height: 24px !important; border: 1px solid rgba(47, 74, 51, 0.18) !important; border-radius: 999px !important; background-color: rgba(255, 253, 248, 0.9) !important; background-image: var(--g2p-disclosure-icon) !important; background-position: center !important; background-repeat: no-repeat !important; background-size: 14px 14px !important; color: transparent !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.88), 0 6px 14px rgba(28, 31, 26, 0.045) !important; transform: none !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger::before, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger::after, html body.g2p-marketplace-ready .g2p-listing-page #collection-sidebar.collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger::before, html body.g2p-marketplace-ready .g2p-listing-page #collection-sidebar.collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger::after { content: none !important; display: none !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger:hover, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger:focus-visible, html body.g2p-marketplace-ready .g2p-listing-page #collection-sidebar.collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger:hover, html body.g2p-marketplace-ready .g2p-listing-page #collection-sidebar.collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger:focus-visible { --g2p-disclosure-icon: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5.4 7 8.4l3-3' fill='none' stroke='%23C45A2C' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-color: rgba(196, 90, 44, 0.12) !important; border-color: rgba(196, 90, 44, 0.3) !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger.is--active, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger[aria-expanded="true"], html body.g2p-marketplace-ready .g2p-listing-page #collection-sidebar.collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger.is--active, html body.g2p-marketplace-ready .g2p-listing-page #collection-sidebar.collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger[aria-expanded="true"] { background-color: rgba(47, 74, 51, 0.1) !important; border-color: rgba(47, 74, 51, 0.2) !important; transform: rotate(180deg) !important; } /* Gear2Peer notification and auth modal skin. */ body.g2p-marketplace-ready .system_message.alert { top: 86px !important; left: 50% !important; right: auto !important; width: min(460px, calc(100vw - 32px)) !important; min-height: 0 !important; padding: 14px 46px 14px 18px !important; border: 1px solid rgba(47, 74, 51, 0.12) !important; border-radius: 18px !important; background: rgba(255, 253, 248, 0.96) !important; color: var(--g2p-ink, #1C211B) !important; box-shadow: 0 20px 50px rgba(28, 31, 26, 0.16) !important; transform: translateX(-50%) !important; text-align: left !important; } body.g2p-marketplace-ready .system_message.alert::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 999px; background: var(--g2p-pine, #2F4A33); vertical-align: 1px; } body.g2p-marketplace-ready .system_message.alert.alert--danger::before { background: var(--g2p-clay, #C45A2C); } body.g2p-marketplace-ready .system_message.alert .content { display: inline; font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-weight: 800; line-height: 1.35; } body.g2p-marketplace-ready .system_message.alert .close { position: absolute; top: 50%; right: 14px; width: 24px; height: 24px; border-radius: 999px; background: rgba(47, 74, 51, 0.08); transform: translateY(-50%); opacity: 1; } body.g2p-marketplace-ready .system_message.alert .close::before, body.g2p-marketplace-ready .system_message.alert .close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 2px; border-radius: 999px; background: var(--g2p-pine, #2F4A33); } body.g2p-marketplace-ready .system_message.alert .close::before { transform: translate(-50%, -50%) rotate(45deg); } body.g2p-marketplace-ready .system_message.alert .close::after { transform: translate(-50%, -50%) rotate(-45deg); } body.g2p-marketplace-ready #exampleModal .modal-dialog#sign-in { width: min(520px, calc(100vw - 28px)); max-width: 520px; } body.g2p-marketplace-ready #exampleModal #sign-in .modal-content { overflow: visible; border: 1px solid rgba(47, 74, 51, 0.12); border-radius: 26px; background: linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(248, 244, 234, 0.96)), var(--g2p-cartography-field); box-shadow: 0 30px 80px rgba(28, 31, 26, 0.24); } body.g2p-marketplace-ready #exampleModal #sign-in .modal-header { align-items: center; min-height: 74px; padding: 22px 28px 16px; border-bottom: 1px solid rgba(47, 74, 51, 0.1); } body.g2p-marketplace-ready #exampleModal #sign-in .modal-title { font-family: Georgia, "Times New Roman", serif; font-size: 30px; font-weight: 800; line-height: 1; color: var(--g2p-ink, #1C211B); } body.g2p-marketplace-ready #exampleModal #sign-in .btn-close { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 999px; background-color: rgba(47, 74, 51, 0.08); opacity: 1; } body.g2p-marketplace-ready #exampleModal #sign-in .modal-body { padding: 26px 44px 34px; overflow: visible; } body.g2p-marketplace-ready #exampleModal #sign-in .field-set { margin-bottom: 14px; } body.g2p-marketplace-ready #exampleModal #sign-in input[type="text"], body.g2p-marketplace-ready #exampleModal #sign-in input[type="email"], body.g2p-marketplace-ready #exampleModal #sign-in input[type="password"] { width: 100%; height: 52px; border: 1px solid rgba(47, 74, 51, 0.16); border-radius: 16px; background: rgba(255, 253, 248, 0.88); color: var(--g2p-ink, #1C211B); font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-size: 15px; font-weight: 700; padding: 0 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82); } body.g2p-marketplace-ready #exampleModal #sign-in input:focus { border-color: rgba(196, 90, 44, 0.44); box-shadow: 0 0 0 4px rgba(196, 90, 44, 0.1); outline: none; } body.g2p-marketplace-ready #exampleModal #sign-in .btn-brand { height: 54px; border: 0; border-radius: 18px; background: var(--g2p-pine, #2F4A33); color: #fff; font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-weight: 900; box-shadow: 0 16px 30px rgba(47, 74, 51, 0.18); } body.g2p-marketplace-ready #exampleModal #sign-in .btn-brand:hover, body.g2p-marketplace-ready #exampleModal #sign-in .btn-brand:focus-visible { background: var(--g2p-clay, #C45A2C); color: #fff; } body.g2p-marketplace-ready #exampleModal #sign-in .forgot, body.g2p-marketplace-ready #exampleModal #sign-in .rememberme-text, body.g2p-marketplace-ready #exampleModal #sign-in .text-center, body.g2p-marketplace-ready #exampleModal #sign-in .others { font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-weight: 700; color: var(--g2p-muted, #687062); } body.g2p-marketplace-ready #exampleModal #sign-in .link-brand, body.g2p-marketplace-ready #exampleModal #sign-in a { color: var(--g2p-pine, #2F4A33); font-weight: 900; } body.g2p-marketplace-ready #exampleModal #sign-in .link-brand:hover, body.g2p-marketplace-ready #exampleModal #sign-in a:hover { color: var(--g2p-clay, #C45A2C); } body.g2p-marketplace-ready #exampleModal #sign-in .or { margin: 24px 0 18px; color: rgba(28, 31, 26, 0.58); } body.g2p-marketplace-ready #exampleModal #sign-in .buttons-list { display: grid; gap: 10px; } body.g2p-marketplace-ready #exampleModal #sign-in .buttons-list-link { display: flex; align-items: center; justify-content: center; min-height: 52px; border: 1px solid rgba(47, 74, 51, 0.18); border-radius: 18px; background: rgba(255, 253, 248, 0.72); color: var(--g2p-ink, #1C211B); font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-weight: 900; text-decoration: none; } body.g2p-marketplace-ready #exampleModal #sign-in .buttons-list-link:hover { border-color: rgba(196, 90, 44, 0.32); background: rgba(196, 90, 44, 0.08); } @media (max-width: 767px) { body.g2p-marketplace-ready .system_message.alert { top: max(18px, env(safe-area-inset-top)) !important; } body.g2p-marketplace-ready #exampleModal .modal-dialog#sign-in { align-items: flex-end; width: 100%; max-width: none; min-height: 100%; margin: 0; } body.g2p-marketplace-ready #exampleModal #sign-in .modal-content { border-radius: 28px 28px 0 0; } body.g2p-marketplace-ready #exampleModal #sign-in .modal-body { padding: 22px 24px calc(28px + env(safe-area-inset-bottom)); } } /* Register page and terms modal. Keep this late so it wins over legacy auth CSS. */ .g2p-cart-page .disabled-input, body.g2p-marketplace-ready .g2p-cart-page .disabled-input { pointer-events: none; opacity: 0.55; } .g2p-auth-page .g2p-register-sign, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-sign { display: grid; min-height: calc(100vh - 96px); padding: 64px 24px; place-items: center; } .g2p-auth-page .g2p-auth-shell, body.g2p-marketplace-ready .g2p-auth-page .g2p-auth-shell { width: min(100%, 620px); } .g2p-auth-page .g2p-auth-logo, body.g2p-marketplace-ready .g2p-auth-page .g2p-auth-logo, body.g2p-marketplace-ready #exampleModal .g2p-auth-logo { display: flex; justify-content: center; margin: 0 0 24px; } .g2p-auth-page .g2p-auth-logo img, body.g2p-marketplace-ready .g2p-auth-page .g2p-auth-logo img, body.g2p-marketplace-ready #exampleModal .g2p-auth-logo img { display: block; height: auto; } .g2p-auth-page .g2p-auth-brand, body.g2p-marketplace-ready .g2p-auth-page .g2p-auth-brand, body.g2p-marketplace-ready #exampleModal .g2p-auth-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--g2p-ink, #1C211B); text-decoration: none; cursor: pointer; } .g2p-auth-page .g2p-auth-brand *, body.g2p-marketplace-ready .g2p-auth-page .g2p-auth-brand *, body.g2p-marketplace-ready #exampleModal .g2p-auth-brand * { cursor: pointer; } .g2p-auth-page .g2p-auth-brand-lockup, body.g2p-marketplace-ready .g2p-auth-page .g2p-auth-brand-lockup, body.g2p-marketplace-ready #exampleModal .g2p-auth-brand-lockup { display: block; flex: 0 0 128px; width: 128px; height: 36px; overflow: visible; } .g2p-auth-page .g2p-auth-brand-landscape, body.g2p-marketplace-ready .g2p-auth-page .g2p-auth-brand-landscape, body.g2p-marketplace-ready #exampleModal .g2p-auth-brand-landscape { width: 128px; max-width: 100%; object-fit: contain; } .g2p-auth-page .g2p-auth-brand-wordmark, body.g2p-marketplace-ready .g2p-auth-page .g2p-auth-brand-wordmark, body.g2p-marketplace-ready #exampleModal .g2p-auth-brand-wordmark { flex: 0 0 116px; width: 116px; object-fit: contain; } body.g2p-marketplace-ready #exampleModal .g2p-auth-logo { margin-bottom: 18px; } body.g2p-marketplace-ready #exampleModal .g2p-auth-brand-lockup { flex-basis: 112px; width: 112px; height: 32px; } body.g2p-marketplace-ready #exampleModal .g2p-auth-brand-landscape { width: 112px; } body.g2p-marketplace-ready #exampleModal .g2p-auth-brand-wordmark { flex-basis: 102px; width: 102px; } .g2p-auth-page .card-sign .section-heading, body.g2p-marketplace-ready .g2p-auth-page .card-sign .section-heading { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 16px; text-align: left; } .g2p-auth-page .card-sign, body.g2p-marketplace-ready .g2p-auth-page .card-sign { overflow: visible; border: 1px solid rgba(47, 74, 51, 0.13) !important; border-radius: 30px !important; background: linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(247, 243, 233, 0.96)), var(--g2p-cartography-field) !important; box-shadow: 0 28px 80px rgba(28, 31, 26, 0.16) !important; } .g2p-auth-page .card-sign_head, .g2p-auth-page .card-sign_body, .g2p-auth-page .card-sign_foot, body.g2p-marketplace-ready .g2p-auth-page .card-sign_head, body.g2p-marketplace-ready .g2p-auth-page .card-sign_body, body.g2p-marketplace-ready .g2p-auth-page .card-sign_foot { padding-right: 34px; padding-left: 34px; } .g2p-auth-page .card-sign_head, body.g2p-marketplace-ready .g2p-auth-page .card-sign_head { padding-top: 34px; padding-bottom: 14px; } .g2p-auth-page .card-sign_body, body.g2p-marketplace-ready .g2p-auth-page .card-sign_body { padding-top: 10px; padding-bottom: 20px; } .g2p-auth-page .card-sign_foot, body.g2p-marketplace-ready .g2p-auth-page .card-sign_foot { padding-top: 4px; padding-bottom: 32px; } .g2p-auth-page .g2p-auth-title-block, body.g2p-marketplace-ready .g2p-auth-page .g2p-auth-title-block { min-width: 0; width: 100%; max-width: 460px; } .g2p-auth-page .g2p-auth-kicker, body.g2p-marketplace-ready .g2p-auth-page .g2p-auth-kicker { margin: 0 0 10px; color: var(--g2p-clay, #C45A2C); font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 11px; font-weight: 900; letter-spacing: 0.2em; line-height: 1; text-transform: uppercase; } .g2p-auth-page .g2p-auth-title-block h1, body.g2p-marketplace-ready .g2p-auth-page .g2p-auth-title-block h1 { margin: 0; color: var(--g2p-ink, #1C211B); font-family: var(--g2p-serif, Georgia, serif); font-size: clamp(42px, 6vw, 64px); font-weight: 650; letter-spacing: 0; line-height: 0.95; max-width: 12ch; overflow-wrap: normal; word-break: normal; hyphens: manual; } .g2p-auth-page .g2p-auth-subtitle, body.g2p-marketplace-ready .g2p-auth-page .g2p-auth-subtitle { max-width: 430px; margin: 14px 0 0; color: var(--g2p-muted, #687062); font-family: var(--g2p-sans, "Inter", Arial, sans-serif); font-size: 15px; font-weight: 750; line-height: 1.45; } .g2p-auth-page .otp-link, body.g2p-marketplace-ready .g2p-auth-page .otp-link { flex: 0 0 auto; max-width: 180px; margin-top: 16px; color: var(--g2p-pine, #2F4A33); font-family: var(--g2p-sans, "Inter", Arial, sans-serif); font-weight: 900; line-height: 1.18; text-align: right; text-decoration-color: rgba(196, 90, 44, 0.45); } .g2p-auth-page .g2p-register-form .iti, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .iti, #exampleModal #sign-in .iti, body.g2p-marketplace-ready #exampleModal #sign-in .iti, #checkout-tabs.g2p-checkout-auth .iti, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .iti { position: relative; display: block; width: 100%; min-height: 56px; overflow: visible; border: 1px solid rgba(47, 74, 51, 0.14) !important; border-radius: 18px !important; background: rgba(255, 253, 248, 0.88) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86); z-index: 1; } .g2p-auth-page .g2p-register-form .iti input, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .iti input, #exampleModal #sign-in .iti input, body.g2p-marketplace-ready #exampleModal #sign-in .iti input, #checkout-tabs.g2p-checkout-auth .iti input, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .iti input { min-height: 54px !important; height: 54px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .g2p-auth-page .g2p-register-form .iti--separate-dial-code input, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .iti--separate-dial-code input, #exampleModal #sign-in .iti--separate-dial-code input, body.g2p-marketplace-ready #exampleModal #sign-in .iti--separate-dial-code input, #checkout-tabs.g2p-checkout-auth .iti--separate-dial-code input, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .iti--separate-dial-code input { padding-right: 18px !important; padding-left: 104px !important; } .g2p-auth-page .g2p-register-form .iti__flag-container, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .iti__flag-container, #exampleModal #sign-in .iti__flag-container, body.g2p-marketplace-ready #exampleModal #sign-in .iti__flag-container, #checkout-tabs.g2p-checkout-auth .iti__flag-container, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .iti__flag-container { position: absolute !important; border-right: 1px solid rgba(47, 74, 51, 0.12); border-radius: 18px 0 0 18px; background: rgba(244, 240, 230, 0.74); } .g2p-auth-page .g2p-register-form .iti__selected-flag, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .iti__selected-flag, #exampleModal #sign-in .iti__selected-flag, body.g2p-marketplace-ready #exampleModal #sign-in .iti__selected-flag, #checkout-tabs.g2p-checkout-auth .iti__selected-flag, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .iti__selected-flag { display: inline-flex; align-items: center; gap: 6px; min-width: 92px; min-height: 54px; padding: 0 12px; color: var(--g2p-ink, #1C211B); font-family: var(--g2p-sans, "Inter", Arial, sans-serif); font-size: 13px; font-weight: 850; } .g2p-auth-page .g2p-register-form .iti__selected-dial-code, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .iti__selected-dial-code, #exampleModal #sign-in .iti__selected-dial-code, body.g2p-marketplace-ready #exampleModal #sign-in .iti__selected-dial-code, #checkout-tabs.g2p-checkout-auth .iti__selected-dial-code, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .iti__selected-dial-code { margin-left: 4px; color: var(--g2p-ink, #1C211B); } .g2p-auth-page .g2p-register-form .iti__arrow, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .iti__arrow, #exampleModal #sign-in .iti__arrow, body.g2p-marketplace-ready #exampleModal #sign-in .iti__arrow, #checkout-tabs.g2p-checkout-auth .iti__arrow, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .iti__arrow { border-top-color: rgba(47, 74, 51, 0.62); } .g2p-auth-page .g2p-register-form .iti:focus-within, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .iti:focus-within, #exampleModal #sign-in .iti:focus-within, body.g2p-marketplace-ready #exampleModal #sign-in .iti:focus-within, #checkout-tabs.g2p-checkout-auth .iti:focus-within, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .iti:focus-within { border-color: rgba(196, 90, 44, 0.42) !important; box-shadow: 0 0 0 4px rgba(196, 90, 44, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.86); z-index: 120; } .g2p-auth-page .g2p-register-form .iti__country-list, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .iti__country-list, #exampleModal #sign-in .iti__country-list, body.g2p-marketplace-ready #exampleModal #sign-in .iti__country-list, #checkout-tabs.g2p-checkout-auth .iti__country-list, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .iti__country-list { width: min(360px, calc(100vw - 44px)) !important; max-height: 270px !important; margin-top: 10px !important; padding: 8px !important; overflow-x: hidden !important; overflow-y: auto !important; border: 1px solid rgba(47, 74, 51, 0.14) !important; border-radius: 18px !important; background: linear-gradient(180deg, rgba(255, 253, 248, 0.99), rgba(247, 243, 233, 0.98)), var(--g2p-cartography-field) !important; box-shadow: 0 22px 54px rgba(28, 31, 26, 0.18) !important; color: var(--g2p-ink, #1C211B) !important; font-family: var(--g2p-sans, "Inter", Arial, sans-serif) !important; font-size: 13px !important; line-height: 1.25 !important; scrollbar-color: rgba(47, 74, 51, 0.42) transparent; z-index: 13000 !important; } .g2p-auth-page .g2p-register-form .iti__country-list::-webkit-scrollbar, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .iti__country-list::-webkit-scrollbar, #exampleModal #sign-in .iti__country-list::-webkit-scrollbar, body.g2p-marketplace-ready #exampleModal #sign-in .iti__country-list::-webkit-scrollbar, #checkout-tabs.g2p-checkout-auth .iti__country-list::-webkit-scrollbar, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .iti__country-list::-webkit-scrollbar { width: 8px; } .g2p-auth-page .g2p-register-form .iti__country-list::-webkit-scrollbar-thumb, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .iti__country-list::-webkit-scrollbar-thumb, #exampleModal #sign-in .iti__country-list::-webkit-scrollbar-thumb, body.g2p-marketplace-ready #exampleModal #sign-in .iti__country-list::-webkit-scrollbar-thumb, #checkout-tabs.g2p-checkout-auth .iti__country-list::-webkit-scrollbar-thumb, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .iti__country-list::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(47, 74, 51, 0.34); } .g2p-auth-page .g2p-register-form .iti__country, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .iti__country, #exampleModal #sign-in .iti__country, body.g2p-marketplace-ready #exampleModal #sign-in .iti__country, #checkout-tabs.g2p-checkout-auth .iti__country, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .iti__country { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 9px 10px !important; border-radius: 12px; color: var(--g2p-ink, #1C211B); font-weight: 780; transition: background 120ms ease, color 120ms ease; } .g2p-auth-page .g2p-register-form .iti__country.iti__highlight, .g2p-auth-page .g2p-register-form .iti__country:hover, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .iti__country.iti__highlight, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .iti__country:hover, #exampleModal #sign-in .iti__country.iti__highlight, #exampleModal #sign-in .iti__country:hover, body.g2p-marketplace-ready #exampleModal #sign-in .iti__country.iti__highlight, body.g2p-marketplace-ready #exampleModal #sign-in .iti__country:hover, #checkout-tabs.g2p-checkout-auth .iti__country.iti__highlight, #checkout-tabs.g2p-checkout-auth .iti__country:hover, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .iti__country.iti__highlight, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .iti__country:hover { background: rgba(47, 74, 51, 0.1) !important; color: var(--g2p-pine, #2F4A33) !important; } .g2p-auth-page .g2p-register-form .iti__country-name, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .iti__country-name, #exampleModal #sign-in .iti__country-name, body.g2p-marketplace-ready #exampleModal #sign-in .iti__country-name, #checkout-tabs.g2p-checkout-auth .iti__country-name, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .iti__country-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .g2p-auth-page .g2p-register-form .iti__dial-code, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .iti__dial-code, #exampleModal #sign-in .iti__dial-code, body.g2p-marketplace-ready #exampleModal #sign-in .iti__dial-code, #checkout-tabs.g2p-checkout-auth .iti__dial-code, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .iti__dial-code { margin-left: auto; color: rgba(104, 112, 98, 0.82); font-weight: 820; } body.g2p-marketplace-ready .g2p-register-form .iti { position: relative; overflow: visible; border-radius: 18px !important; z-index: 1; } body.g2p-marketplace-ready .g2p-register-form .iti:focus-within { z-index: 120; } body.g2p-marketplace-ready .g2p-register-form .iti__country-list { width: min(360px, calc(100vw - 44px)) !important; max-height: 270px !important; margin-top: 10px !important; padding: 8px !important; overflow-x: hidden !important; overflow-y: auto !important; border: 1px solid rgba(47, 74, 51, 0.14) !important; border-radius: 18px !important; background: linear-gradient(180deg, rgba(255, 253, 248, 0.99), rgba(247, 243, 233, 0.98)), var(--g2p-cartography-field) !important; box-shadow: 0 22px 54px rgba(28, 31, 26, 0.18) !important; color: var(--g2p-ink, #1C211B) !important; font-family: var(--g2p-sans, "Inter", Arial, sans-serif) !important; font-size: 13px !important; line-height: 1.25 !important; z-index: 13000 !important; } body.g2p-marketplace-ready .g2p-register-form .iti__country { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 9px 10px !important; border-radius: 12px; font-weight: 780; } body.g2p-marketplace-ready .g2p-register-form .iti__country.iti__highlight, body.g2p-marketplace-ready .g2p-register-form .iti__country:hover { background: rgba(47, 74, 51, 0.1) !important; color: var(--g2p-pine, #2F4A33) !important; } body.g2p-marketplace-ready .g2p-register-form .iti__country-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.g2p-marketplace-ready .g2p-register-form .iti__dial-code { margin-left: auto; color: rgba(104, 112, 98, 0.82); font-weight: 820; } .g2p-auth-page .g2p-register-form .row, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .row { --bs-gutter-x: 14px; } .g2p-auth-page .g2p-register-form .field-set, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .field-set { margin-bottom: 14px; } .g2p-auth-page .g2p-register-form input[type="text"], .g2p-auth-page .g2p-register-form input[type="email"], .g2p-auth-page .g2p-register-form input[type="password"], .g2p-auth-page .g2p-register-form input[type="tel"], body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form input[type="text"], body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form input[type="email"], body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form input[type="password"], body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form input[type="tel"] { width: 100%; min-height: 56px; padding: 0 18px; border: 1px solid rgba(47, 74, 51, 0.14) !important; border-radius: 18px !important; background: rgba(255, 253, 248, 0.86) !important; color: var(--g2p-ink, #1C211B) !important; font-family: var(--g2p-sans, "Inter", Arial, sans-serif); font-size: 15px; font-weight: 760; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82); } .g2p-auth-page .g2p-register-form input:-webkit-autofill, .g2p-auth-page .g2p-register-form input:-webkit-autofill:hover, .g2p-auth-page .g2p-register-form input:-webkit-autofill:focus, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form input:-webkit-autofill, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form input:-webkit-autofill:hover, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form input:-webkit-autofill:focus { -webkit-text-fill-color: var(--g2p-ink, #1C211B); box-shadow: 0 0 0 1000px rgba(255, 253, 248, 0.92) inset, inset 0 1px 0 rgba(255, 255, 255, 0.82); caret-color: var(--g2p-ink, #1C211B); } .g2p-auth-page .g2p-register-form input:focus, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form input:focus { border-color: rgba(196, 90, 44, 0.42) !important; box-shadow: 0 0 0 4px rgba(196, 90, 44, 0.1); outline: none; } .g2p-auth-page .g2p-register-form .form-text, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .form-text { display: block; margin: 8px 0 0; color: var(--g2p-muted, #687062) !important; font-size: 12px; font-weight: 750; } .g2p-auth-page .g2p-terms-row, body.g2p-marketplace-ready .g2p-auth-page .g2p-terms-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 54px; padding: 10px 12px; border: 1px solid rgba(47, 74, 51, 0.12); border-radius: 18px; background: rgba(255, 253, 248, 0.58); } .g2p-auth-page .g2p-terms-consent, body.g2p-marketplace-ready .g2p-auth-page .g2p-terms-consent { position: relative; display: inline-flex; align-items: center; gap: 10px; min-width: 0; margin: 0; color: var(--g2p-ink, #1C211B); cursor: pointer; font-family: var(--g2p-sans, "Inter", Arial, sans-serif); font-size: 13px; font-weight: 820; line-height: 1.25; } .g2p-auth-page .g2p-terms-consent input[type="checkbox"], body.g2p-marketplace-ready .g2p-auth-page .g2p-terms-consent input[type="checkbox"] { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; clip: rect(0 0 0 0) !important; overflow: hidden !important; } .g2p-auth-page .g2p-terms-checkbox, body.g2p-marketplace-ready .g2p-auth-page .g2p-terms-checkbox { position: relative; flex: 0 0 auto; width: 24px; height: 24px; border: 1px solid rgba(47, 74, 51, 0.2); border-radius: 9px; background: rgba(255, 253, 248, 0.96); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); } .g2p-auth-page .g2p-terms-checkbox::after, body.g2p-marketplace-ready .g2p-auth-page .g2p-terms-checkbox::after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 7px; border-bottom: 2px solid #fff; border-left: 2px solid #fff; opacity: 0; transform: translate(-50%, -58%) rotate(-45deg); } .g2p-auth-page .g2p-terms-consent input[type="checkbox"]:checked + .g2p-terms-checkbox, body.g2p-marketplace-ready .g2p-auth-page .g2p-terms-consent input[type="checkbox"]:checked + .g2p-terms-checkbox { border-color: var(--g2p-pine, #2F4A33); background: var(--g2p-pine, #2F4A33); } .g2p-auth-page .g2p-terms-consent input[type="checkbox"]:checked + .g2p-terms-checkbox::after, body.g2p-marketplace-ready .g2p-auth-page .g2p-terms-consent input[type="checkbox"]:checked + .g2p-terms-checkbox::after { opacity: 1; } .g2p-auth-page .g2p-terms-copy, body.g2p-marketplace-ready .g2p-auth-page .g2p-terms-copy { min-width: 0; } .g2p-auth-page .g2p-terms-view, body.g2p-marketplace-ready .g2p-auth-page .g2p-terms-view { flex: 0 0 auto; color: var(--g2p-clay, #C45A2C); font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 11px; font-weight: 900; letter-spacing: 0.12em; text-decoration: none; text-transform: uppercase; } .g2p-auth-page .g2p-register-form .btn-brand, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .btn-brand { width: 100%; min-height: 56px; border: 0 !important; border-radius: 999px !important; background: var(--g2p-pine, #2F4A33) !important; color: var(--g2p-map, #F4F0E6) !important; font-family: var(--g2p-sans, "Inter", Arial, sans-serif); font-weight: 900; box-shadow: 0 16px 32px rgba(47, 74, 51, 0.18); } .g2p-auth-page .g2p-register-form .btn-brand:hover, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .btn-brand:hover { background: var(--g2p-clay, #C45A2C) !important; color: #fff !important; } .g2p-auth-page .others, body.g2p-marketplace-ready .g2p-auth-page .others { display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; } .g2p-auth-page .others-item, body.g2p-marketplace-ready .g2p-auth-page .others-item { color: var(--g2p-muted, #687062); font-family: var(--g2p-sans, "Inter", Arial, sans-serif); font-size: 14px; font-weight: 820; } .g2p-auth-page .others-links, body.g2p-marketplace-ready .g2p-auth-page .others-links { color: var(--g2p-pine, #2F4A33); font-weight: 900; text-decoration-color: rgba(196, 90, 44, 0.4); } .g2p-auth-status-page, body.g2p-marketplace-ready .g2p-auth-status-page { min-height: calc(100vh - 96px); background: linear-gradient(135deg, rgba(196, 90, 44, 0.06), transparent 34%), linear-gradient(215deg, rgba(47, 74, 51, 0.07), transparent 42%), var(--g2p-cartography-field), var(--g2p-map, #F4F0E6); } .g2p-auth-status-hero, body.g2p-marketplace-ready .g2p-auth-status-hero { padding: clamp(56px, 8vw, 112px) 24px clamp(64px, 9vw, 124px); } .g2p-auth-status-shell, body.g2p-marketplace-ready .g2p-auth-status-shell { width: min(100%, 1080px); margin: 0 auto; } .g2p-auth-status-back, body.g2p-marketplace-ready .g2p-auth-status-back { display: inline-flex; align-items: center; min-height: 36px; margin: 0 0 24px; color: var(--g2p-muted, #687062); font-family: var(--g2p-sans, "Inter", Arial, sans-serif); font-size: 14px; font-weight: 850; text-decoration: none; } .g2p-auth-status-back:hover, .g2p-auth-status-back:focus-visible, body.g2p-marketplace-ready .g2p-auth-status-back:hover, body.g2p-marketplace-ready .g2p-auth-status-back:focus-visible { color: var(--g2p-clay, #C45A2C); } .g2p-auth-status-card, body.g2p-marketplace-ready .g2p-auth-status-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 390px); gap: clamp(28px, 6vw, 86px); align-items: stretch; padding: clamp(28px, 5vw, 58px); border: 1px solid rgba(47, 74, 51, 0.13); border-radius: 34px; background: linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(247, 243, 233, 0.92)), var(--g2p-cartography-field); box-shadow: 0 30px 86px rgba(28, 31, 26, 0.14); } .g2p-auth-status-copy, body.g2p-marketplace-ready .g2p-auth-status-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; } .g2p-auth-status-copy h1, body.g2p-marketplace-ready .g2p-auth-status-copy h1 { max-width: 11ch; margin: 0; color: var(--g2p-ink, #1C211B); font-family: var(--g2p-serif, Georgia, serif); font-size: clamp(54px, 8vw, 98px); font-weight: 650; letter-spacing: 0; line-height: 0.92; } .g2p-auth-status-copy h1 em, body.g2p-marketplace-ready .g2p-auth-status-copy h1 em { color: var(--g2p-clay, #C45A2C); font-style: italic; font-weight: 600; } .g2p-auth-status-lede, body.g2p-marketplace-ready .g2p-auth-status-lede { max-width: 58ch; margin: 22px 0 0; color: var(--g2p-muted, #687062); font-family: var(--g2p-sans, "Inter", Arial, sans-serif); font-size: clamp(16px, 1.3vw, 19px); font-weight: 760; line-height: 1.5; } .g2p-auth-status-actions, body.g2p-marketplace-ready .g2p-auth-status-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .g2p-auth-status-btn, body.g2p-marketplace-ready .g2p-auth-status-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border: 1px solid rgba(47, 74, 51, 0.16); border-radius: 999px; font-family: var(--g2p-sans, "Inter", Arial, sans-serif); font-size: 15px; font-weight: 900; text-decoration: none; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease; } .g2p-auth-status-btn:hover, .g2p-auth-status-btn:focus-visible, body.g2p-marketplace-ready .g2p-auth-status-btn:hover, body.g2p-marketplace-ready .g2p-auth-status-btn:focus-visible { transform: translateY(-1px); text-decoration: none; } .g2p-auth-status-btn--primary, body.g2p-marketplace-ready .g2p-auth-status-btn--primary { border-color: var(--g2p-pine, #2F4A33); background: var(--g2p-pine, #2F4A33); color: var(--g2p-map, #F4F0E6); } .g2p-auth-status-btn--primary:hover, .g2p-auth-status-btn--primary:focus-visible, body.g2p-marketplace-ready .g2p-auth-status-btn--primary:hover, body.g2p-marketplace-ready .g2p-auth-status-btn--primary:focus-visible { border-color: var(--g2p-clay, #C45A2C); background: var(--g2p-clay, #C45A2C); color: #fff; } .g2p-auth-status-btn--secondary, body.g2p-marketplace-ready .g2p-auth-status-btn--secondary { background: rgba(255, 253, 248, 0.72); color: var(--g2p-pine, #2F4A33); } .g2p-auth-status-btn--secondary:hover, .g2p-auth-status-btn--secondary:focus-visible, body.g2p-marketplace-ready .g2p-auth-status-btn--secondary:hover, body.g2p-marketplace-ready .g2p-auth-status-btn--secondary:focus-visible { border-color: rgba(196, 90, 44, 0.42); background: rgba(196, 90, 44, 0.12); color: var(--g2p-clay, #C45A2C); } .g2p-auth-status-panel, body.g2p-marketplace-ready .g2p-auth-status-panel { align-self: center; padding: 28px; border: 1px solid rgba(47, 74, 51, 0.13); border-radius: 28px; background: linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(236, 230, 215, 0.7)), var(--g2p-cartography-field); box-shadow: 0 20px 48px rgba(28, 31, 26, 0.1); } .g2p-auth-status-icon, body.g2p-marketplace-ready .g2p-auth-status-icon { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; margin-bottom: 24px; border: 1px solid rgba(47, 74, 51, 0.2); border-radius: 999px; background: rgba(47, 74, 51, 0.1); color: var(--g2p-pine, #2F4A33); } .g2p-auth-status-icon svg, body.g2p-marketplace-ready .g2p-auth-status-icon svg { width: 34px; height: 34px; } .g2p-auth-status-panel-kicker, body.g2p-marketplace-ready .g2p-auth-status-panel-kicker { margin: 0 0 10px; color: var(--g2p-clay, #C45A2C); font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 11px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; } .g2p-auth-status-panel h2, body.g2p-marketplace-ready .g2p-auth-status-panel h2 { margin: 0; color: var(--g2p-ink, #1C211B); font-family: var(--g2p-serif, Georgia, serif); font-size: clamp(30px, 3vw, 42px); font-weight: 650; letter-spacing: 0; line-height: 1; } .g2p-auth-status-list, body.g2p-marketplace-ready .g2p-auth-status-list { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; } .g2p-auth-status-list li, body.g2p-marketplace-ready .g2p-auth-status-list li { position: relative; padding-left: 20px; color: var(--g2p-muted, #687062); font-family: var(--g2p-sans, "Inter", Arial, sans-serif); font-size: 15px; font-weight: 780; line-height: 1.35; } .g2p-auth-status-list li::before, body.g2p-marketplace-ready .g2p-auth-status-list li::before { content: ""; position: absolute; top: 0.6em; left: 0; width: 7px; height: 7px; border-radius: 999px; background: var(--g2p-pine, #2F4A33); } @media (max-width: 820px) { .g2p-auth-status-card, body.g2p-marketplace-ready .g2p-auth-status-card { grid-template-columns: 1fr; padding: 28px; border-radius: 28px; } .g2p-auth-status-copy h1, body.g2p-marketplace-ready .g2p-auth-status-copy h1 { max-width: 9ch; font-size: clamp(44px, 15vw, 68px); } .g2p-auth-status-panel, body.g2p-marketplace-ready .g2p-auth-status-panel { padding: 22px; } } .g2p-terms-modal[hidden] { display: none !important; } .g2p-terms-modal, body.g2p-marketplace-ready .g2p-terms-modal { position: fixed; inset: 0; z-index: 12000; display: grid; padding: 24px; place-items: center; } .g2p-terms-modal__backdrop { position: absolute; inset: 0; background: rgba(18, 22, 18, 0.54); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .g2p-terms-modal__card { position: relative; z-index: 1; display: grid; grid-template-rows: auto minmax(260px, 1fr) auto; width: min(820px, calc(100vw - 32px)); max-height: min(860px, calc(100vh - 32px)); overflow: hidden; border: 1px solid rgba(47, 74, 51, 0.14); border-radius: 28px; background: linear-gradient(180deg, rgba(255, 253, 248, 0.99), rgba(247, 243, 233, 0.97)), var(--g2p-cartography-field); box-shadow: 0 34px 92px rgba(18, 22, 18, 0.28); } .g2p-terms-modal__header, .g2p-terms-modal__footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 28px; } .g2p-terms-modal__header { border-bottom: 1px solid rgba(47, 74, 51, 0.1); } .g2p-terms-modal__header h2 { margin: 0; color: var(--g2p-ink, #1C211B); font-family: var(--g2p-serif, Georgia, serif); font-size: clamp(32px, 4vw, 48px); font-weight: 650; letter-spacing: 0; line-height: 0.95; } .g2p-terms-modal__header p { margin: 8px 0 0; color: var(--g2p-muted, #687062); font-weight: 740; } .g2p-terms-modal__close { position: relative; flex: 0 0 auto; width: 40px; height: 40px; border: 1px solid rgba(47, 74, 51, 0.12); border-radius: 999px; background: rgba(47, 74, 51, 0.08); } .g2p-terms-modal__close::before, .g2p-terms-modal__close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 15px; height: 2px; border-radius: 999px; background: var(--g2p-pine, #2F4A33); } .g2p-terms-modal__close::before { transform: translate(-50%, -50%) rotate(45deg); } .g2p-terms-modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); } .g2p-terms-modal__body { min-height: 0; overflow: auto; padding: 28px; background: rgba(255, 253, 248, 0.78); color: var(--g2p-ink, #1C211B); scrollbar-color: rgba(47, 74, 51, 0.35) rgba(47, 74, 51, 0.08); scrollbar-width: thin; } .g2p-terms-modal__body::-webkit-scrollbar { width: 10px; } .g2p-terms-modal__body::-webkit-scrollbar-track { background: rgba(47, 74, 51, 0.08); border-radius: 999px; } .g2p-terms-modal__body::-webkit-scrollbar-thumb { background: rgba(47, 74, 51, 0.35); border: 3px solid rgba(255, 253, 248, 0.86); border-radius: 999px; } .g2p-terms-modal__content { max-width: 720px; margin: 0 auto; font-family: var(--g2p-sans, "Inter", Arial, sans-serif); font-size: 15px; font-weight: 650; line-height: 1.65; } .g2p-terms-modal__content, .g2p-terms-modal__content * { box-sizing: border-box; max-width: 100%; overflow-wrap: anywhere; white-space: normal !important; } .g2p-terms-modal__content [style] { background: transparent !important; color: inherit !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; line-height: inherit !important; white-space-collapse: collapse !important; text-wrap-mode: wrap !important; } .g2p-terms-modal__content img, .g2p-terms-modal__content iframe, .g2p-terms-modal__content table { max-width: 100% !important; } .g2p-terms-modal__content img { display: none !important; } .g2p-terms-modal__content h1, .g2p-terms-modal__content h2, .g2p-terms-modal__content h3, .g2p-terms-modal__content h4 { margin: 1.4em 0 0.5em; color: var(--g2p-ink, #1C211B); font-family: var(--g2p-serif, Georgia, serif); font-weight: 650; letter-spacing: 0; line-height: 1; } .g2p-terms-modal__content h1:first-child, .g2p-terms-modal__content h2:first-child, .g2p-terms-modal__content h3:first-child { margin-top: 0; } .g2p-terms-modal__content h1 { font-size: clamp(28px, 3vw, 38px); } .g2p-terms-modal__content h2, .g2p-terms-modal__content h3 { font-size: clamp(22px, 2.1vw, 28px); } .g2p-terms-modal__content h4 { font-size: 18px; } .g2p-terms-modal__content p, .g2p-terms-modal__content li { color: var(--g2p-muted, #687062); } .g2p-terms-modal__content p { margin: 0 0 1rem; } .g2p-terms-modal__content ul, .g2p-terms-modal__content ol { margin: 0 0 1.1rem; padding-left: 1.25rem; } .g2p-terms-modal__content strong, .g2p-terms-modal__content b { color: var(--g2p-ink, #1C211B); font-weight: 900; } .g2p-terms-modal__content a { color: var(--g2p-pine, #2F4A33); font-weight: 900; text-decoration-color: rgba(196, 90, 44, 0.38); } /* Standalone CMS/legal pages: bring pasted legal content into the Gear2Peer system. */ .g2p-cms-page { background-color: var(--g2p-map, #F4F0E6); } .g2p-cms-shell { width: min(100% - 64px, 1180px); margin: 0 auto; } .g2p-cms-hero { padding: clamp(52px, 7vw, 96px) 0 clamp(30px, 4vw, 54px); } .g2p-cms-back { display: inline-flex; align-items: center; min-height: 34px; margin-bottom: 28px; color: var(--g2p-muted, #6E7163); font-weight: 750; text-decoration: none; } .g2p-cms-back:hover, .g2p-cms-back:focus-visible { color: var(--g2p-clay, #C45A2C); text-decoration: none; } .g2p-cms-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: clamp(28px, 6vw, 84px); align-items: end; } .g2p-cms-kicker { margin: 0 0 14px; color: var(--g2p-clay, #C45A2C); font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.22em; line-height: 1.3; text-transform: uppercase; } .g2p-cms-hero h1 { max-width: 11ch; margin: 0; color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-serif, Georgia, serif); font-size: clamp(3.4rem, 8vw, 7.2rem); font-weight: 600; letter-spacing: 0; line-height: 0.94; } .g2p-cms-hero-copy > p:not(.g2p-cms-kicker) { max-width: 58ch; margin: 22px 0 0; color: var(--g2p-muted, #6E7163); font-size: clamp(1rem, 1.2vw, 1.16rem); font-weight: 750; line-height: 1.5; } .g2p-cms-note, .g2p-cms-side, .g2p-cms-card { border: 1px solid var(--g2p-line, rgba(28, 31, 26, 0.12)); background: rgba(255, 255, 255, 0.72); box-shadow: 0 20px 52px rgba(28, 31, 26, 0.08); } .g2p-cms-note { padding: 24px; border-radius: 24px; } .g2p-cms-note span { display: block; margin-bottom: 12px; color: var(--g2p-clay, #C45A2C); font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; } .g2p-cms-note strong { display: block; color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-serif, Georgia, serif); font-size: clamp(1.6rem, 2.2vw, 2.35rem); font-weight: 650; letter-spacing: 0; line-height: 1.02; } .g2p-cms-note p { margin: 16px 0 0; color: var(--g2p-muted, #6E7163); font-weight: 750; line-height: 1.45; } .g2p-cms-section { padding: 0 0 clamp(70px, 8vw, 116px); } .g2p-cms-layout { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; } .g2p-cms-side, .g2p-cms-card { border-radius: 26px; } .g2p-cms-side { position: sticky; top: 104px; padding: 24px; } .g2p-cms-side h2 { margin: 0; color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-serif, Georgia, serif); font-size: clamp(1.8rem, 2.4vw, 2.6rem); font-weight: 650; letter-spacing: 0; line-height: 1; } .g2p-cms-side p:not(.g2p-cms-kicker) { margin: 14px 0 0; color: var(--g2p-muted, #6E7163); font-weight: 750; line-height: 1.5; } .g2p-cms-side-actions { display: grid; gap: 10px; margin-top: 22px; } .g2p-cms-side-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 16px; border: 1px solid rgba(47, 74, 51, 0.14); border-radius: 999px; background: rgba(250, 247, 238, 0.82); color: var(--g2p-pine, #2F4A33); font-weight: 850; text-decoration: none; } .g2p-cms-side-actions a:hover, .g2p-cms-side-actions a:focus-visible { border-color: var(--g2p-clay, #C45A2C); background: rgba(196, 90, 44, 0.1); color: var(--g2p-clay, #C45A2C); } .g2p-cms-card { overflow: hidden; padding: clamp(28px, 4vw, 56px); } .g2p-cms-prose { max-width: 780px; margin: 0 auto; color: var(--g2p-muted, #6E7163); font-family: var(--g2p-sans, "Inter", Arial, sans-serif); font-size: clamp(1rem, 1.05vw, 1.08rem); font-weight: 650; line-height: 1.72; } .g2p-cms-prose, .g2p-cms-prose * { box-sizing: border-box; max-width: 100%; overflow-wrap: anywhere; white-space: normal !important; } .g2p-cms-prose [style] { background: transparent !important; color: inherit !important; font-family: inherit !important; font-size: inherit !important; font-style: inherit !important; font-variant: normal !important; font-weight: inherit !important; letter-spacing: inherit !important; line-height: inherit !important; white-space-collapse: collapse !important; text-wrap-mode: wrap !important; } .g2p-cms-prose h1, .g2p-cms-prose h2, .g2p-cms-prose h3, .g2p-cms-prose h4, .g2p-cms-prose h5 { margin: 1.35em 0 0.55em; color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-serif, Georgia, serif) !important; font-weight: 650 !important; letter-spacing: 0 !important; line-height: 1.05 !important; } .g2p-cms-prose h1:first-child, .g2p-cms-prose h2:first-child, .g2p-cms-prose h3:first-child { margin-top: 0; } .g2p-cms-prose h1 { font-size: clamp(2rem, 4vw, 3.2rem) !important; } .g2p-cms-prose h2, .g2p-cms-prose h3 { font-size: clamp(1.45rem, 2.1vw, 2rem) !important; } .g2p-cms-prose h4, .g2p-cms-prose h5 { font-size: 1.2rem !important; } .g2p-cms-prose p { margin: 0 0 1.05rem !important; } .g2p-cms-prose p, .g2p-cms-prose li { color: var(--g2p-muted, #6E7163); } .g2p-cms-prose strong, .g2p-cms-prose b { color: var(--g2p-ink, #1C1F1A); font-weight: 900 !important; } .g2p-cms-prose ul, .g2p-cms-prose ol { display: grid; gap: 0.55rem; margin: 0 0 1.25rem !important; padding-left: 1.35rem !important; } .g2p-cms-prose li { padding-left: 0.2rem; } .g2p-cms-prose img, .g2p-cms-prose iframe, .g2p-cms-prose table { max-width: 100% !important; } .g2p-cms-prose a { color: var(--g2p-pine, #2F4A33); font-weight: 900; text-decoration-color: rgba(196, 90, 44, 0.42); } @media (max-width: 960px) { .g2p-cms-shell { width: min(100% - 36px, 720px); } .g2p-cms-hero-grid, .g2p-cms-layout { grid-template-columns: 1fr; } .g2p-cms-side { position: static; } } @media (max-width: 640px) { .g2p-cms-shell { width: min(100% - 24px, 480px); } .g2p-cms-hero { padding-top: 36px; } .g2p-cms-hero h1 { font-size: clamp(2.7rem, 16vw, 4rem); } .g2p-cms-note, .g2p-cms-side, .g2p-cms-card { border-radius: 20px; } .g2p-cms-card { padding: 22px 18px; } .g2p-cms-prose { font-size: 0.98rem; line-height: 1.65; } } .g2p-terms-modal__footer { border-top: 1px solid rgba(47, 74, 51, 0.1); } .g2p-terms-modal__footer a { color: var(--g2p-pine, #2F4A33); font-weight: 900; } .g2p-terms-modal__footer .btn { min-width: 120px; } body.g2p-terms-open { overflow: hidden; } /* Final auth layout guard: override the legacy 500px enter-page form shell. */ .g2p-auth-page .form-sign.g2p-register-sign, body.g2p-marketplace-ready .g2p-auth-page .form-sign.g2p-register-sign { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 68px 24px !important; border-radius: 0 !important; background: transparent !important; color: var(--g2p-ink, #1C211B) !important; box-shadow: none !important; } .g2p-auth-page .g2p-auth-shell, body.g2p-marketplace-ready .g2p-auth-page .g2p-auth-shell { width: min(100%, 980px) !important; border-radius: 0 !important; background: transparent !important; } .g2p-auth-page .card-sign, body.g2p-marketplace-ready .g2p-auth-page .card-sign { display: grid !important; grid-template-columns: minmax(250px, 0.9fr) minmax(360px, 1.1fr); align-items: stretch; column-gap: 28px; row-gap: 0; } .g2p-auth-page .card-sign_head, body.g2p-marketplace-ready .g2p-auth-page .card-sign_head { grid-column: 1; grid-row: 1 / span 2; display: flex; align-items: center; min-height: 100%; padding: 44px 18px 44px 44px; } .g2p-auth-page .card-sign_head .section-head, body.g2p-marketplace-ready .g2p-auth-page .card-sign_head .section-head { width: 100%; margin: 0; } .g2p-auth-page .card-sign_body, body.g2p-marketplace-ready .g2p-auth-page .card-sign_body { grid-column: 2; grid-row: 1; padding: 44px 44px 14px 0; } .g2p-auth-page .card-sign_foot, body.g2p-marketplace-ready .g2p-auth-page .card-sign_foot { grid-column: 2; grid-row: 2; padding: 4px 44px 36px 0; } .g2p-auth-page .card-sign .section-heading, body.g2p-marketplace-ready .g2p-auth-page .card-sign .section-heading, .g2p-auth-page .section-heading.otp-heading, body.g2p-marketplace-ready .g2p-auth-page .section-heading.otp-heading { display: grid !important; grid-template-columns: 1fr; gap: 18px; align-items: start; text-align: left; } .g2p-auth-page .g2p-auth-title-block, body.g2p-marketplace-ready .g2p-auth-page .g2p-auth-title-block { max-width: 360px; } .g2p-auth-page .g2p-auth-title-block h1, body.g2p-marketplace-ready .g2p-auth-page .g2p-auth-title-block h1 { max-width: 9.8ch !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: manual !important; } .g2p-auth-page .otp-link, body.g2p-marketplace-ready .g2p-auth-page .otp-link { justify-self: start; max-width: none; margin-top: 0; text-align: left; } /* Phone-number mode: make intl-tel-input feel like one Gear2Peer field. */ .g2p-auth-page .g2p-register-form .iti, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .iti, #exampleModal #sign-in .iti, body.g2p-marketplace-ready #exampleModal #sign-in .iti, #checkout-tabs.g2p-checkout-auth .iti, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .iti { position: relative !important; display: flex !important; align-items: stretch !important; width: 100% !important; min-height: 56px !important; overflow: visible !important; border: 1px solid rgba(47, 74, 51, 0.14) !important; border-radius: 18px !important; background: rgba(255, 253, 248, 0.9) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86) !important; } .g2p-auth-page .g2p-register-form .iti input, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .iti input, #exampleModal #sign-in .iti input, body.g2p-marketplace-ready #exampleModal #sign-in .iti input, #checkout-tabs.g2p-checkout-auth .iti input, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .iti input { width: 100% !important; height: 54px !important; min-height: 54px !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; text-align: left !important; } .g2p-auth-page .g2p-register-form .iti--separate-dial-code input, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .iti--separate-dial-code input, #exampleModal #sign-in .iti--separate-dial-code input, body.g2p-marketplace-ready #exampleModal #sign-in .iti--separate-dial-code input, #checkout-tabs.g2p-checkout-auth .iti--separate-dial-code input, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .iti--separate-dial-code input { padding-right: 18px !important; padding-left: 112px !important; } .g2p-auth-page .g2p-register-form .iti__flag-container, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .iti__flag-container, #exampleModal #sign-in .iti__flag-container, body.g2p-marketplace-ready #exampleModal #sign-in .iti__flag-container, #checkout-tabs.g2p-checkout-auth .iti__flag-container, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .iti__flag-container { position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; width: auto !important; height: 100% !important; min-height: 54px !important; border-right: 1px solid rgba(47, 74, 51, 0.12) !important; border-radius: 18px 0 0 18px !important; background: rgba(244, 240, 230, 0.76) !important; z-index: 3 !important; } .g2p-auth-page .g2p-register-form .iti__selected-flag, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .iti__selected-flag, #exampleModal #sign-in .iti__selected-flag, body.g2p-marketplace-ready #exampleModal #sign-in .iti__selected-flag, #checkout-tabs.g2p-checkout-auth .iti__selected-flag, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .iti__selected-flag { display: inline-flex !important; align-items: center !important; gap: 7px !important; min-width: 100px !important; height: 100% !important; min-height: 54px !important; padding: 0 13px !important; color: var(--g2p-ink, #1C211B) !important; font-family: var(--g2p-sans, "Inter", Arial, sans-serif) !important; font-size: 13px !important; font-weight: 850 !important; } .g2p-auth-page .g2p-register-form .iti__selected-dial-code, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .iti__selected-dial-code, #exampleModal #sign-in .iti__selected-dial-code, body.g2p-marketplace-ready #exampleModal #sign-in .iti__selected-dial-code, #checkout-tabs.g2p-checkout-auth .iti__selected-dial-code, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .iti__selected-dial-code { margin-left: 4px !important; color: var(--g2p-ink, #1C211B) !important; } .g2p-auth-page .g2p-register-form .iti__arrow, body.g2p-marketplace-ready .g2p-auth-page .g2p-register-form .iti__arrow, #exampleModal #sign-in .iti__arrow, body.g2p-marketplace-ready #exampleModal #sign-in .iti__arrow, #checkout-tabs.g2p-checkout-auth .iti__arrow, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .iti__arrow { border-top-color: rgba(47, 74, 51, 0.66) !important; } /* Standalone auth routes use a different form id than the modal partial. */ .g2p-auth-page .iti, body.g2p-marketplace-ready .g2p-auth-page .iti { position: relative !important; display: flex !important; align-items: stretch !important; width: 100% !important; min-height: 56px !important; overflow: visible !important; border: 1px solid rgba(47, 74, 51, 0.14) !important; border-radius: 18px !important; background: rgba(255, 253, 248, 0.9) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86) !important; } .g2p-auth-page .iti input, body.g2p-marketplace-ready .g2p-auth-page .iti input { width: 100% !important; height: 54px !important; min-height: 54px !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; text-align: left !important; } .g2p-auth-page .iti--separate-dial-code input, body.g2p-marketplace-ready .g2p-auth-page .iti--separate-dial-code input { padding-right: 18px !important; padding-left: 112px !important; } .g2p-auth-page .iti__flag-container, body.g2p-marketplace-ready .g2p-auth-page .iti__flag-container { position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; width: auto !important; height: 100% !important; min-height: 54px !important; border-right: 1px solid rgba(47, 74, 51, 0.12) !important; border-radius: 18px 0 0 18px !important; background: rgba(244, 240, 230, 0.76) !important; z-index: 3 !important; } .g2p-auth-page .iti__selected-flag, body.g2p-marketplace-ready .g2p-auth-page .iti__selected-flag { display: inline-flex !important; align-items: center !important; gap: 7px !important; min-width: 100px !important; height: 100% !important; min-height: 54px !important; padding: 0 13px !important; color: var(--g2p-ink, #1C211B) !important; font-family: var(--g2p-sans, "Inter", Arial, sans-serif) !important; font-size: 13px !important; font-weight: 850 !important; } .g2p-auth-page .iti__selected-dial-code, body.g2p-marketplace-ready .g2p-auth-page .iti__selected-dial-code { margin-left: 4px !important; color: var(--g2p-ink, #1C211B) !important; } .g2p-auth-page .iti__arrow, body.g2p-marketplace-ready .g2p-auth-page .iti__arrow { border-top-color: rgba(47, 74, 51, 0.66) !important; } @media (max-width: 767px) { .g2p-auth-page .form-sign.g2p-register-sign, body.g2p-marketplace-ready .g2p-auth-page .form-sign.g2p-register-sign { min-height: auto; padding: 30px 14px calc(34px + env(safe-area-inset-bottom)) !important; } .g2p-auth-page .card-sign_head, .g2p-auth-page .card-sign_body, .g2p-auth-page .card-sign_foot, body.g2p-marketplace-ready .g2p-auth-page .card-sign_head, body.g2p-marketplace-ready .g2p-auth-page .card-sign_body, body.g2p-marketplace-ready .g2p-auth-page .card-sign_foot { padding-right: 22px; padding-left: 22px; } .g2p-auth-page .card-sign, body.g2p-marketplace-ready .g2p-auth-page .card-sign { grid-template-columns: 1fr; } .g2p-auth-page .card-sign_head, .g2p-auth-page .card-sign_body, .g2p-auth-page .card-sign_foot, body.g2p-marketplace-ready .g2p-auth-page .card-sign_head, body.g2p-marketplace-ready .g2p-auth-page .card-sign_body, body.g2p-marketplace-ready .g2p-auth-page .card-sign_foot { grid-column: 1; grid-row: auto; } .g2p-auth-page .card-sign_head, body.g2p-marketplace-ready .g2p-auth-page .card-sign_head { min-height: 0; padding-top: 32px; padding-bottom: 12px; } .g2p-auth-page .card-sign_body, body.g2p-marketplace-ready .g2p-auth-page .card-sign_body { padding-top: 10px; padding-bottom: 18px; } .g2p-auth-page .card-sign_foot, body.g2p-marketplace-ready .g2p-auth-page .card-sign_foot { padding-top: 0; padding-bottom: 30px; } .g2p-auth-page .card-sign .section-heading, body.g2p-marketplace-ready .g2p-auth-page .card-sign .section-heading { grid-template-columns: 1fr; gap: 12px; } .g2p-auth-page .g2p-auth-title-block h1, body.g2p-marketplace-ready .g2p-auth-page .g2p-auth-title-block h1 { max-width: 10.5ch; font-size: clamp(42px, 13vw, 54px); } .g2p-auth-page .g2p-terms-row, body.g2p-marketplace-ready .g2p-auth-page .g2p-terms-row { align-items: flex-start; flex-direction: column; } .g2p-auth-page .section-heading.otp-heading, body.g2p-marketplace-ready .g2p-auth-page .section-heading.otp-heading { display: block; } .g2p-auth-page .otp-link, body.g2p-marketplace-ready .g2p-auth-page .otp-link { display: inline-flex; max-width: none; text-align: left; } .g2p-terms-modal, body.g2p-marketplace-ready .g2p-terms-modal { align-items: end; padding: 0; } .g2p-terms-modal__card { width: 100%; max-height: calc(92vh - env(safe-area-inset-top, 0px)); border-radius: 28px 28px 0 0; grid-template-rows: auto minmax(280px, 1fr) auto; } .g2p-terms-modal__header, .g2p-terms-modal__footer { padding: 22px 20px; } .g2p-terms-modal__body { padding: 22px 20px; } .g2p-terms-modal__content { font-size: 14px; line-height: 1.6; } .g2p-terms-modal__footer { padding-bottom: calc(22px + env(safe-area-inset-bottom)); } } /* Standalone login route: keep the register split layout from leaking into sign in. */ .g2p-auth-page .form-sign.g2p-login-sign, body.g2p-marketplace-ready .g2p-auth-page .form-sign.g2p-login-sign { display: grid !important; width: 100% !important; max-width: none !important; min-height: calc(100vh - 96px); margin: 0 !important; padding: 64px 24px !important; place-items: center; border-radius: 0 !important; background: transparent !important; color: var(--g2p-ink, #1C211B) !important; box-shadow: none !important; } .g2p-auth-page .form-sign-body.g2p-login-shell, body.g2p-marketplace-ready .g2p-auth-page .form-sign-body.g2p-login-shell { width: min(100%, 540px) !important; max-width: none !important; } .g2p-auth-page .g2p-login-card, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card { display: block !important; grid-template-columns: 1fr !important; width: 100% !important; overflow: hidden !important; } .g2p-auth-page .g2p-login-card .card-sign_head, .g2p-auth-page .g2p-login-card .card-sign_body, .g2p-auth-page .g2p-login-card .card-sign_foot, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .card-sign_head, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .card-sign_body, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .card-sign_foot { display: block !important; width: 100% !important; min-height: 0 !important; padding-right: 36px !important; padding-left: 36px !important; grid-column: auto !important; grid-row: auto !important; } .g2p-auth-page .g2p-login-card .card-sign_head, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .card-sign_head { padding-top: 36px !important; padding-bottom: 12px !important; } .g2p-auth-page .g2p-login-card .card-sign_body, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .card-sign_body { padding-top: 10px !important; padding-bottom: 18px !important; } .g2p-auth-page .g2p-login-card .card-sign_foot, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .card-sign_foot { padding-top: 0 !important; padding-bottom: 34px !important; } .g2p-auth-page .g2p-login-card .section-heading, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .section-heading { display: grid !important; grid-template-columns: 1fr; gap: 14px; align-items: start; text-align: left; } .g2p-auth-page .g2p-login-card .g2p-auth-title-block, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .g2p-auth-title-block { max-width: none !important; } .g2p-auth-page .g2p-login-card .g2p-auth-title-block h1, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .g2p-auth-title-block h1 { max-width: none !important; font-size: clamp(42px, 7vw, 62px); } .g2p-auth-page .g2p-login-card .otp-link, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .otp-link { justify-self: start; max-width: none; margin: 0; text-align: left; } .g2p-auth-page .g2p-login-form, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-form { width: 100%; } .g2p-auth-page .g2p-login-form .row, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-form .row { --bs-gutter-x: 14px; } .g2p-auth-page .g2p-login-form .field-set, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-form .field-set { margin-bottom: 14px; } .g2p-auth-page .g2p-login-form input[type="text"], .g2p-auth-page .g2p-login-form input[type="email"], .g2p-auth-page .g2p-login-form input[type="password"], .g2p-auth-page .g2p-login-form input[type="tel"], body.g2p-marketplace-ready .g2p-auth-page .g2p-login-form input[type="text"], body.g2p-marketplace-ready .g2p-auth-page .g2p-login-form input[type="email"], body.g2p-marketplace-ready .g2p-auth-page .g2p-login-form input[type="password"], body.g2p-marketplace-ready .g2p-auth-page .g2p-login-form input[type="tel"] { width: 100%; min-height: 56px; padding: 0 18px; border: 1px solid rgba(47, 74, 51, 0.14) !important; border-radius: 18px !important; background: rgba(255, 253, 248, 0.88) !important; color: var(--g2p-ink, #1C211B) !important; font-family: var(--g2p-sans, "Inter", Arial, sans-serif); font-size: 15px; font-weight: 760; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82); } .g2p-auth-page .g2p-login-form input::placeholder, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-form input::placeholder { color: rgba(104, 112, 98, 0.62); } .g2p-auth-page .g2p-login-form input:focus, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-form input:focus { border-color: rgba(196, 90, 44, 0.42) !important; box-shadow: 0 0 0 4px rgba(196, 90, 44, 0.1); outline: none; } .g2p-auth-page .g2p-login-form .checkbox, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-form .checkbox { display: inline-flex; align-items: center; gap: 10px; color: var(--g2p-muted, #687062); font-family: var(--g2p-sans, "Inter", Arial, sans-serif); font-size: 13px; font-weight: 800; line-height: 1.25; } .g2p-auth-page .g2p-login-form input[type="checkbox"], body.g2p-marketplace-ready .g2p-auth-page .g2p-login-form input[type="checkbox"] { width: 22px; height: 22px; min-height: 22px; margin: 0; border-radius: 8px; accent-color: var(--g2p-pine, #2F4A33); } .g2p-remember-control, body.g2p-marketplace-ready .g2p-remember-control { display: inline-flex !important; align-items: center; gap: 9px; width: max-content; max-width: 100%; color: var(--g2p-muted, #687062); cursor: pointer; user-select: none; } .g2p-remember-control .g2p-remember-checkbox, body.g2p-marketplace-ready .g2p-remember-control .g2p-remember-checkbox { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 1px !important; margin: 0 !important; overflow: hidden !important; opacity: 0; pointer-events: none; } .g2p-remember-control .g2p-remember-box, body.g2p-marketplace-ready .g2p-remember-control .g2p-remember-box { position: relative; flex: 0 0 20px; width: 20px; height: 20px; border: 1px solid rgba(47, 74, 51, 0.22); border-radius: 999px; background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9); transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; } .g2p-remember-control .g2p-remember-box::after, body.g2p-marketplace-ready .g2p-remember-control .g2p-remember-box::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; opacity: 0; transform: translate(-50%, -58%) rotate(-45deg) scale(0.86); transition: opacity 0.14s ease, transform 0.14s ease; } .g2p-remember-control .g2p-remember-checkbox:checked + .g2p-remember-box, body.g2p-marketplace-ready .g2p-remember-control .g2p-remember-checkbox:checked + .g2p-remember-box { border-color: var(--g2p-pine, #2F4A33); background: var(--g2p-pine, #2F4A33); box-shadow: 0 8px 18px rgba(47, 74, 51, 0.2); } .g2p-remember-control .g2p-remember-checkbox:checked + .g2p-remember-box::after, body.g2p-marketplace-ready .g2p-remember-control .g2p-remember-checkbox:checked + .g2p-remember-box::after { opacity: 1; transform: translate(-50%, -58%) rotate(-45deg) scale(1); } .g2p-remember-control .g2p-remember-checkbox:focus-visible + .g2p-remember-box, body.g2p-marketplace-ready .g2p-remember-control .g2p-remember-checkbox:focus-visible + .g2p-remember-box { outline: 2px solid rgba(196, 90, 44, 0.38); outline-offset: 3px; } .g2p-remember-control:hover .g2p-remember-box, body.g2p-marketplace-ready .g2p-remember-control:hover .g2p-remember-box { border-color: rgba(196, 90, 44, 0.55); transform: translateY(-1px); } .g2p-remember-control .lb-txt, body.g2p-marketplace-ready .g2p-remember-control .lb-txt { color: var(--g2p-muted, #687062); font-family: var(--g2p-sans, "Inter", Arial, sans-serif); font-size: 13px; font-weight: 850; line-height: 1.2; } .g2p-auth-page .g2p-login-form .forgot, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-form .forgot { text-align: right; font-size: 13px; font-weight: 850; } .g2p-auth-page .g2p-login-form .btn-brand, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-form .btn-brand { width: 100%; min-height: 56px; border: 0 !important; border-radius: 999px !important; background: var(--g2p-pine, #2F4A33) !important; color: #fff !important; font-family: var(--g2p-sans, "Inter", Arial, sans-serif); font-size: 15px; font-weight: 900; box-shadow: 0 16px 32px rgba(47, 74, 51, 0.18); } .g2p-auth-page .g2p-login-form .btn-brand:hover, .g2p-auth-page .g2p-login-form .btn-brand:focus-visible, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-form .btn-brand:hover, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-form .btn-brand:focus-visible { background: var(--g2p-clay, #C45A2C) !important; color: #fff !important; } .g2p-auth-page .g2p-login-card .or, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 20px auto 16px; color: rgba(28, 31, 26, 0.58); font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; } .g2p-auth-page .g2p-login-card .or::before, .g2p-auth-page .g2p-login-card .or::after, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .or::before, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .or::after { content: ""; height: 1px; background: rgba(47, 74, 51, 0.12); } .g2p-auth-page .g2p-login-card .or span, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .or span { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 28px; padding: 0 12px; border: 1px solid rgba(47, 74, 51, 0.1); border-radius: 999px; background: rgba(244, 240, 230, 0.86); color: var(--g2p-muted, #687062); line-height: 1; } .g2p-auth-page .g2p-login-card .buttons-list, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .buttons-list { display: grid; gap: 10px; width: min(100%, 340px); margin: 0 auto; padding: 0; } .g2p-auth-page .g2p-login-card .buttons-list-item, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .buttons-list-item { list-style: none; } .g2p-auth-page .g2p-login-card .buttons-list-link, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .buttons-list-link { display: flex; align-items: center; justify-content: center; min-height: 54px; border: 1px solid rgba(47, 74, 51, 0.16); border-radius: 999px; background: rgba(255, 253, 248, 0.76); color: var(--g2p-ink, #1C211B); font-family: var(--g2p-sans, "Inter", Arial, sans-serif); font-weight: 900; text-decoration: none; } .g2p-auth-page .g2p-login-card .buttons-list-wrap, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .buttons-list-wrap { display: inline-grid; grid-template-columns: 28px auto; align-items: center; gap: 12px; min-width: 178px; text-align: left; } .g2p-auth-page .g2p-login-card .buttons-list-icon img, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .buttons-list-icon img { width: 24px; height: 24px; } .g2p-auth-page .g2p-login-card .buttons-list-link:hover, .g2p-auth-page .g2p-login-card .buttons-list-link:focus-visible, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .buttons-list-link:hover, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .buttons-list-link:focus-visible { border-color: rgba(196, 90, 44, 0.32); background: rgba(196, 90, 44, 0.08); } .g2p-auth-page .g2p-login-card .others, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .others { margin-top: 8px; } @media (max-width: 767px) { .g2p-auth-page .form-sign.g2p-login-sign, body.g2p-marketplace-ready .g2p-auth-page .form-sign.g2p-login-sign { min-height: auto; padding: 30px 14px calc(34px + env(safe-area-inset-bottom)) !important; } .g2p-auth-page .g2p-login-card .card-sign_head, .g2p-auth-page .g2p-login-card .card-sign_body, .g2p-auth-page .g2p-login-card .card-sign_foot, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .card-sign_head, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .card-sign_body, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .card-sign_foot { padding-right: 22px !important; padding-left: 22px !important; } .g2p-auth-page .g2p-login-card .g2p-auth-title-block h1, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-card .g2p-auth-title-block h1 { font-size: clamp(38px, 12vw, 52px); } .g2p-auth-page .g2p-login-form .forgot, body.g2p-marketplace-ready .g2p-auth-page .g2p-login-form .forgot { text-align: left; } } /* Auth and toast final skin: apply without waiting for PJAX/body readiness. */ .system_message.alert, body.g2p-marketplace-ready .system_message.alert { top: 82px !important; left: 50% !important; right: auto !important; z-index: 11050 !important; width: min(420px, calc(100vw - 32px)) !important; min-height: 0 !important; padding: 13px 46px 13px 18px !important; border: 1px solid rgba(47, 74, 51, 0.14) !important; border-radius: 999px !important; background: linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(247, 242, 232, 0.96)) !important; color: var(--g2p-ink, #1C211B) !important; box-shadow: 0 18px 46px rgba(28, 31, 26, 0.16) !important; transform: translateX(-50%) !important; text-align: left !important; } .system_message.alert.alert--process, body.g2p-marketplace-ready .system_message.alert.alert--process { display: none !important; } .system_message.alert::before, body.g2p-marketplace-ready .system_message.alert::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 999px; background: var(--g2p-pine, #2F4A33); vertical-align: 1px; } .system_message.alert.alert--danger::before, body.g2p-marketplace-ready .system_message.alert.alert--danger::before { background: var(--g2p-clay, #C45A2C); } .system_message.alert .content, body.g2p-marketplace-ready .system_message.alert .content { display: inline; font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-size: 13px; font-weight: 850; line-height: 1.35; letter-spacing: 0; } .system_message.alert .close, body.g2p-marketplace-ready .system_message.alert .close { position: absolute; top: 50%; right: 12px; width: 24px; height: 24px; border-radius: 999px; background: rgba(47, 74, 51, 0.08); transform: translateY(-50%); opacity: 1; } .system_message.alert .close::before, .system_message.alert .close::after, body.g2p-marketplace-ready .system_message.alert .close::before, body.g2p-marketplace-ready .system_message.alert .close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 11px; height: 2px; border-radius: 999px; background: var(--g2p-pine, #2F4A33); } .system_message.alert .close::before, body.g2p-marketplace-ready .system_message.alert .close::before { transform: translate(-50%, -50%) rotate(45deg); } .system_message.alert .close::after, body.g2p-marketplace-ready .system_message.alert .close::after { transform: translate(-50%, -50%) rotate(-45deg); } #exampleModal .modal-dialog#sign-in, body.g2p-marketplace-ready #exampleModal .modal-dialog#sign-in { width: min(510px, calc(100vw - 28px)); max-width: 510px; } #exampleModal #sign-in .modal-content, body.g2p-marketplace-ready #exampleModal #sign-in .modal-content { overflow: hidden; border: 1px solid rgba(47, 74, 51, 0.13); border-radius: 28px; background: linear-gradient(180deg, rgba(255, 253, 248, 0.99), rgba(248, 244, 234, 0.97)), var(--g2p-cartography-field); box-shadow: 0 34px 90px rgba(28, 31, 26, 0.26); } #exampleModal #sign-in .modal-header, body.g2p-marketplace-ready #exampleModal #sign-in .modal-header { align-items: flex-start; min-height: 0; padding: 28px 34px 18px; border-bottom: 1px solid rgba(47, 74, 51, 0.1); } #exampleModal #sign-in .g2p-login-intro, body.g2p-marketplace-ready #exampleModal #sign-in .g2p-login-intro { max-width: 350px; } #exampleModal #sign-in .g2p-auth-kicker, body.g2p-marketplace-ready #exampleModal #sign-in .g2p-auth-kicker { margin: 0 0 9px; color: var(--g2p-clay, #C45A2C); font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-size: 11px; font-weight: 900; letter-spacing: 0.18em; line-height: 1; text-transform: uppercase; } #exampleModal #sign-in .modal-title, body.g2p-marketplace-ready #exampleModal #sign-in .modal-title { margin: 0; color: var(--g2p-ink, #1C211B); font-family: Georgia, "Times New Roman", serif; font-size: clamp(34px, 5vw, 48px); font-weight: 800; letter-spacing: 0; line-height: 0.96; } #exampleModal #sign-in .g2p-auth-subtitle, body.g2p-marketplace-ready #exampleModal #sign-in .g2p-auth-subtitle { margin: 12px 0 0; color: var(--g2p-muted, #687062); font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-weight: 750; line-height: 1.35; } #exampleModal #sign-in .btn-close, body.g2p-marketplace-ready #exampleModal #sign-in .btn-close { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 38px; height: 38px; margin: -2px -4px 0 18px; padding: 0; border: 1px solid rgba(47, 74, 51, 0.12); border-radius: 999px; background: rgba(47, 74, 51, 0.08) !important; background-image: none !important; opacity: 1; } #exampleModal #sign-in .btn-close::before, #exampleModal #sign-in .btn-close::after, body.g2p-marketplace-ready #exampleModal #sign-in .btn-close::before, body.g2p-marketplace-ready #exampleModal #sign-in .btn-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 15px; height: 2px; border-radius: 999px; background: var(--g2p-muted, #687062); } #exampleModal #sign-in .btn-close::before, body.g2p-marketplace-ready #exampleModal #sign-in .btn-close::before { transform: translate(-50%, -50%) rotate(45deg); } #exampleModal #sign-in .btn-close::after, body.g2p-marketplace-ready #exampleModal #sign-in .btn-close::after { transform: translate(-50%, -50%) rotate(-45deg); } #exampleModal #sign-in .modal-body, body.g2p-marketplace-ready #exampleModal #sign-in .modal-body { padding: 28px 40px 36px; } #exampleModal #sign-in .row, body.g2p-marketplace-ready #exampleModal #sign-in .row { --bs-gutter-x: 14px; } #exampleModal #sign-in .field-set, body.g2p-marketplace-ready #exampleModal #sign-in .field-set { margin-bottom: 14px; } #exampleModal #sign-in input[type="text"], #exampleModal #sign-in input[type="email"], #exampleModal #sign-in input[type="password"], body.g2p-marketplace-ready #exampleModal #sign-in input[type="text"], body.g2p-marketplace-ready #exampleModal #sign-in input[type="email"], body.g2p-marketplace-ready #exampleModal #sign-in input[type="password"] { width: 100%; height: 54px; border: 1px solid rgba(47, 74, 51, 0.15); border-radius: 17px; background: rgba(255, 253, 248, 0.88); color: var(--g2p-ink, #1C211B); font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-size: 15px; font-weight: 750; padding: 0 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86); } #exampleModal #sign-in input::placeholder, body.g2p-marketplace-ready #exampleModal #sign-in input::placeholder { color: rgba(104, 112, 98, 0.62); } #exampleModal #sign-in input:focus, body.g2p-marketplace-ready #exampleModal #sign-in input:focus { border-color: rgba(196, 90, 44, 0.44); box-shadow: 0 0 0 4px rgba(196, 90, 44, 0.1); outline: none; } #exampleModal #sign-in input[type="checkbox"], body.g2p-marketplace-ready #exampleModal #sign-in input[type="checkbox"] { width: 18px; height: 18px; margin: 0 8px 0 0; border: 1px solid rgba(47, 74, 51, 0.22); border-radius: 6px; accent-color: var(--g2p-pine, #2F4A33); vertical-align: -4px; } #exampleModal #sign-in .g2p-remember-control .g2p-remember-checkbox, body.g2p-marketplace-ready #exampleModal #sign-in .g2p-remember-control .g2p-remember-checkbox { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 1px !important; margin: 0 !important; overflow: hidden !important; opacity: 0; pointer-events: none; } #exampleModal #sign-in .forgot, body.g2p-marketplace-ready #exampleModal #sign-in .forgot { text-align: right; } #exampleModal #sign-in .btn-brand, body.g2p-marketplace-ready #exampleModal #sign-in .btn-brand { width: 100%; height: 56px; border: 0; border-radius: 999px; background: var(--g2p-pine, #2F4A33); color: #fff; font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-size: 15px; font-weight: 900; box-shadow: 0 16px 30px rgba(47, 74, 51, 0.18); } #exampleModal #sign-in .btn-brand:hover, #exampleModal #sign-in .btn-brand:focus-visible, body.g2p-marketplace-ready #exampleModal #sign-in .btn-brand:hover, body.g2p-marketplace-ready #exampleModal #sign-in .btn-brand:focus-visible { background: var(--g2p-clay, #C45A2C); color: #fff; } #exampleModal #sign-in .forgot, #exampleModal #sign-in .rememberme-text, #exampleModal #sign-in .text-center, #exampleModal #sign-in .others, body.g2p-marketplace-ready #exampleModal #sign-in .forgot, body.g2p-marketplace-ready #exampleModal #sign-in .rememberme-text, body.g2p-marketplace-ready #exampleModal #sign-in .text-center, body.g2p-marketplace-ready #exampleModal #sign-in .others { color: var(--g2p-muted, #687062); font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-size: 14px; font-weight: 750; line-height: 1.35; } #exampleModal #sign-in .link-brand, #exampleModal #sign-in a, #exampleModal #sign-in button.link-brand, body.g2p-marketplace-ready #exampleModal #sign-in .link-brand, body.g2p-marketplace-ready #exampleModal #sign-in a, body.g2p-marketplace-ready #exampleModal #sign-in button.link-brand { color: var(--g2p-pine, #2F4A33); font-weight: 900; text-decoration-color: rgba(47, 74, 51, 0.32); } #exampleModal #sign-in .link-brand:hover, #exampleModal #sign-in a:hover, #exampleModal #sign-in button.link-brand:hover, body.g2p-marketplace-ready #exampleModal #sign-in .link-brand:hover, body.g2p-marketplace-ready #exampleModal #sign-in a:hover, body.g2p-marketplace-ready #exampleModal #sign-in button.link-brand:hover { color: var(--g2p-clay, #C45A2C); text-decoration-color: rgba(196, 90, 44, 0.42); } #exampleModal #sign-in button.link-brand, body.g2p-marketplace-ready #exampleModal #sign-in button.link-brand { border: 0; background: transparent; } #exampleModal #sign-in .or, body.g2p-marketplace-ready #exampleModal #sign-in .or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 22px auto 16px; color: rgba(28, 31, 26, 0.58); font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; } #exampleModal #sign-in .or span, body.g2p-marketplace-ready #exampleModal #sign-in .or span { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 28px; padding: 0 12px; border: 1px solid rgba(47, 74, 51, 0.1); border-radius: 999px; background: rgba(244, 240, 230, 0.86); color: var(--g2p-muted, #687062); line-height: 1; } #exampleModal #sign-in .or::before, #exampleModal #sign-in .or::after, body.g2p-marketplace-ready #exampleModal #sign-in .or::before, body.g2p-marketplace-ready #exampleModal #sign-in .or::after { content: ""; height: 1px; background: rgba(47, 74, 51, 0.12); } #exampleModal #sign-in .other-option, body.g2p-marketplace-ready #exampleModal #sign-in .other-option, #checkout-tabs.g2p-checkout-auth .g2p-auth-social, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .g2p-auth-social { width: min(100%, 360px); margin: 0 auto; text-align: center; } #exampleModal #sign-in .buttons-list, body.g2p-marketplace-ready #exampleModal #sign-in .buttons-list, #checkout-tabs.g2p-checkout-auth .buttons-list, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .buttons-list { display: grid; gap: 10px; width: min(100%, 330px); margin: 0 auto; padding: 0; } #exampleModal #sign-in .buttons-list-item, body.g2p-marketplace-ready #exampleModal #sign-in .buttons-list-item, #checkout-tabs.g2p-checkout-auth .buttons-list-item, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .buttons-list-item { list-style: none; } #exampleModal #sign-in .buttons-list-link, body.g2p-marketplace-ready #exampleModal #sign-in .buttons-list-link, #checkout-tabs.g2p-checkout-auth .buttons-list-link, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .buttons-list-link { display: flex; align-items: center; justify-content: center; min-height: 54px; border: 1px solid rgba(47, 74, 51, 0.16); border-radius: 999px; background: rgba(255, 253, 248, 0.76); color: var(--g2p-ink, #1C211B); font-family: "Inter", "Helvetica Neue", Arial, sans-serif; font-weight: 900; text-decoration: none; } #exampleModal #sign-in .buttons-list-wrap, body.g2p-marketplace-ready #exampleModal #sign-in .buttons-list-wrap, #checkout-tabs.g2p-checkout-auth .buttons-list-wrap, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .buttons-list-wrap { display: inline-grid; grid-template-columns: 28px auto; align-items: center; gap: 12px; min-width: 178px; text-align: left; } #exampleModal #sign-in .buttons-list-icon img, body.g2p-marketplace-ready #exampleModal #sign-in .buttons-list-icon img, #checkout-tabs.g2p-checkout-auth .buttons-list-icon img, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .buttons-list-icon img { width: 24px; height: 24px; } #exampleModal #sign-in .buttons-list-link:hover, body.g2p-marketplace-ready #exampleModal #sign-in .buttons-list-link:hover, #checkout-tabs.g2p-checkout-auth .buttons-list-link:hover, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .buttons-list-link:hover { border-color: rgba(196, 90, 44, 0.32); background: rgba(196, 90, 44, 0.08); } #exampleModal #sign-in .others, body.g2p-marketplace-ready #exampleModal #sign-in .others { display: flex; justify-content: center; margin: 24px 0 0; padding: 0; list-style: none; text-align: center; } #checkout-tabs.g2p-checkout-auth, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth { color: var(--g2p-ink, #1C211B); } #checkout-tabs.g2p-checkout-auth .g2p-checkout-auth-intro, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .g2p-checkout-auth-intro { max-width: 520px; margin: 0 auto 24px; text-align: center; } #checkout-tabs.g2p-checkout-auth .g2p-checkout-auth-intro h3, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .g2p-checkout-auth-intro h3 { margin: 0; color: var(--g2p-ink, #1C211B); font-family: var(--g2p-serif, Georgia, serif); font-size: clamp(32px, 4vw, 44px); font-weight: 650; line-height: 1; } #checkout-tabs.g2p-checkout-auth .g2p-checkout-auth-intro p:not(.g2p-auth-kicker), body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .g2p-checkout-auth-intro p:not(.g2p-auth-kicker) { margin: 10px auto 0; color: var(--g2p-muted, #687062); font-size: 14px; font-weight: 750; line-height: 1.42; } #checkout-tabs.g2p-checkout-auth .g2p-checkout-auth-panel, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .g2p-checkout-auth-panel { max-width: 420px; margin: 0 auto; } #checkout-tabs.g2p-checkout-auth .or, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 22px auto 16px; color: var(--g2p-muted, #687062); font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 11px; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; } #checkout-tabs.g2p-checkout-auth .or::before, #checkout-tabs.g2p-checkout-auth .or::after, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .or::before, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .or::after { content: ""; height: 1px; background: rgba(47, 74, 51, 0.12); } #checkout-tabs.g2p-checkout-auth .or span, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .or span { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 28px; padding: 0 12px; border: 1px solid rgba(47, 74, 51, 0.1); border-radius: 999px; background: rgba(244, 240, 230, 0.86); line-height: 1; } #checkout-tabs.g2p-checkout-auth .term, body.g2p-marketplace-ready #checkout-tabs.g2p-checkout-auth .term { margin-top: 22px; color: var(--g2p-muted, #687062); text-align: center; } /* Gear2Peer blog / field notes */ body.g2p-blog-page, body.is--blog, .g2p-blog-page { min-height: 100vh; background-color: var(--g2p-map); background-image: var(--g2p-cartography-field), radial-gradient(circle at 12% 4%, rgba(201, 95, 45, 0.08), transparent 30%), radial-gradient(circle at 84% 12%, rgba(47, 74, 51, 0.07), transparent 34%); background-size: 1800px 1300px, auto, auto; background-attachment: fixed, scroll, scroll; } .g2p-blog-page { color: var(--g2p-ink); font-family: var(--g2p-sans); overflow-x: hidden; } .g2p-blog-page a { color: inherit; text-decoration: none; } .g2p-blog-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; } .g2p-blog-hero { padding: clamp(56px, 7vw, 96px) 0 clamp(24px, 4vw, 42px); } .g2p-blog-results-hero { padding-bottom: 18px; } .g2p-blog-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: clamp(36px, 6vw, 86px); align-items: center; } .g2p-blog-hero-copy { max-width: 720px; } .g2p-blog-hero h1, .g2p-blog-article-heading h1 { margin: 12px 0 16px; color: var(--g2p-ink); font-family: var(--g2p-serif); font-size: clamp(3.5rem, 7.2vw, 7.4rem); font-weight: 500; letter-spacing: -0.045em; line-height: 0.93; } .g2p-blog-hero h1 em, .g2p-blog-article-heading h1 em { color: var(--g2p-clay); font-style: italic; } .g2p-blog-hero-copy > p:not(.g2p-marketplace-kicker), .g2p-blog-search-card p, .g2p-blog-card-excerpt, .g2p-blog-empty p, .g2p-blog-article-meta, .g2p-blog-prose, .g2p-blog-comments-card { color: var(--g2p-muted); } .g2p-blog-hero-copy > p:not(.g2p-marketplace-kicker) { max-width: 560px; margin: 0; font-size: clamp(1rem, 1.5vw, 1.18rem); font-weight: 650; line-height: 1.45; } .g2p-blog-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .g2p-blog-button, .g2p-blog-share-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 1px solid rgba(47, 74, 51, 0.18); border-radius: 999px; background: rgba(255, 255, 255, 0.82); color: var(--g2p-pine); font-size: 0.95rem; font-weight: 850; transition: transform 140ms ease, background-color 140ms ease, color 140ms ease, border-color 140ms ease; } .g2p-blog-button:hover, .g2p-blog-share-button:hover { transform: translateY(-1px); border-color: rgba(201, 95, 45, 0.32); background: var(--g2p-clay); color: #fff; } .g2p-blog-button.g2p-blog-button-primary, .g2p-blog-button.g2p-blog-button-primary:link, .g2p-blog-button.g2p-blog-button-primary:visited, .g2p-blog-button.g2p-blog-button-primary:active { border-color: transparent; background: var(--g2p-pine); color: #fffdf8 !important; } .g2p-blog-button.g2p-blog-button-primary:hover, .g2p-blog-button.g2p-blog-button-primary:focus-visible { background: var(--g2p-clay); color: #fffdf8 !important; } .g2p-blog-search-card { align-self: center; max-width: 440px; margin-left: auto; padding: 26px; border: 1px solid var(--g2p-line); border-radius: 28px; background: rgba(255, 255, 255, 0.9); box-shadow: var(--g2p-shadow); } .g2p-blog-search-card-compact { max-width: 420px; } .g2p-blog-press-panel { display: grid; gap: 22px; } .g2p-blog-press-list { display: grid; gap: 10px; padding-top: 4px; } .g2p-blog-press-list span { display: block; padding: 14px 16px; border: 1px solid rgba(47, 74, 51, 0.12); border-radius: 18px; background: rgba(244, 240, 230, 0.72); color: var(--g2p-muted); font-size: 0.92rem; font-weight: 680; line-height: 1.35; } .g2p-blog-press-list strong { display: block; margin-bottom: 3px; color: var(--g2p-ink); font-family: var(--g2p-serif); font-size: 1.1rem; font-weight: 600; line-height: 1.05; } .g2p-blog-search-field { display: grid; grid-template-columns: 1fr 52px; align-items: center; gap: 8px; min-height: 64px; margin: 14px 0 12px; padding: 6px; border: 1px solid rgba(47, 74, 51, 0.16); border-radius: 999px; background: var(--g2p-surface-2); } .g2p-blog-search-field input { width: 100%; min-height: 48px; padding: 0 18px; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--g2p-ink); font-weight: 750; outline: none; } .g2p-blog-search-field button { width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--g2p-clay); color: #fff; } .g2p-blog-chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; margin-bottom: 42px; } .g2p-blog-chip-row a, .g2p-blog-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border: 1px solid rgba(47, 74, 51, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.76); color: var(--g2p-pine); font-family: var(--g2p-mono); font-size: 0.7rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; } .g2p-blog-chip-row a.is-active, .g2p-blog-chip-row a:hover { border-color: transparent; background: var(--g2p-pine); color: var(--g2p-map); } .g2p-blog-section, .g2p-blog-featured-section, .g2p-blog-rail-section { padding: clamp(18px, 3vw, 30px) 0 clamp(54px, 7vw, 92px); } .g2p-blog-section-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 24px; } .g2p-blog-section-head h2, .g2p-blog-related h2, .g2p-blog-comments-card h2 { margin: 6px 0 0; color: var(--g2p-ink); font-family: var(--g2p-serif); font-size: clamp(1.85rem, 3vw, 3rem); font-weight: 520; line-height: 1.02; } .g2p-blog-section-head > a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border: 1px solid var(--g2p-line); border-radius: 999px; background: rgba(255, 255, 255, 0.74); color: var(--g2p-pine); font-weight: 850; } .g2p-blog-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 32px); } .g2p-blog-card-grid-tight { gap: 18px; } .g2p-blog-card { min-width: 0; } .g2p-blog-card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid rgba(47, 74, 51, 0.16); border-radius: 18px; background: var(--g2p-paper-2); box-shadow: 0 10px 28px rgba(28, 31, 26, 0.08); } .g2p-blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 220ms ease; } .g2p-blog-card:hover .g2p-blog-card-media img { transform: scale(1.025); } .g2p-blog-card-media .g2p-blog-chip { position: absolute; top: 14px; left: 14px; background: rgba(255, 255, 255, 0.9); color: var(--g2p-ink); } .g2p-blog-card-copy { padding-top: 14px; } .g2p-blog-card-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 7px; color: var(--g2p-muted); font-size: 0.88rem; font-weight: 650; } .g2p-blog-card h2 { margin: 0; color: var(--g2p-ink); font-family: var(--g2p-serif); font-size: clamp(1.35rem, 2vw, 1.9rem); font-weight: 560; letter-spacing: -0.02em; line-height: 1.05; } .g2p-blog-card:not(.g2p-blog-card-featured) h2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .g2p-blog-card h2 a:hover { color: var(--g2p-clay); } .g2p-blog-card-excerpt { margin: 10px 0 0; font-size: 0.98rem; font-weight: 600; line-height: 1.45; } .g2p-blog-card-footer { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--g2p-line); color: var(--g2p-muted); font-size: 0.82rem; font-weight: 800; } .g2p-blog-card-footer a { color: var(--g2p-clay); } .g2p-blog-card-featured { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(24px, 3.4vw, 38px); align-items: stretch; padding: clamp(16px, 2.6vw, 24px); overflow: hidden; border: 1px solid var(--g2p-line); border-radius: 28px; background: rgba(255, 255, 255, 0.86); box-shadow: var(--g2p-shadow); isolation: isolate; } .g2p-blog-card-featured > * { min-width: 0; } .g2p-blog-card-featured .g2p-blog-card-media { min-height: clamp(260px, 25vw, 350px); aspect-ratio: auto; box-shadow: none; z-index: 1; } .g2p-blog-card-featured .g2p-blog-card-copy { display: flex; flex-direction: column; justify-content: center; min-width: 0; overflow: hidden; padding: clamp(8px, 2vw, 20px) clamp(4px, 1vw, 10px); z-index: 2; } .g2p-blog-card-featured h2 { display: -webkit-box; max-width: 100%; overflow: hidden; font-size: clamp(1.65rem, 1.85vw, 2.2rem); letter-spacing: -0.035em; line-height: 1.04; overflow-wrap: break-word; text-wrap: balance; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .g2p-blog-card-featured .g2p-blog-card-excerpt { display: -webkit-box; max-width: 58ch; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .g2p-blog-card-compact h2 { font-size: clamp(1.15rem, 1.7vw, 1.5rem); } .g2p-blog-mini-panel { padding: 28px; border: 1px solid var(--g2p-line); border-radius: 28px; background: rgba(255, 255, 255, 0.7); } .g2p-blog-mini-panel + .g2p-blog-mini-panel { margin-top: 28px; } .g2p-blog-mini-grid, .g2p-blog-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 18px; } .g2p-blog-empty { max-width: 720px; padding: clamp(34px, 5vw, 56px); border: 1px solid var(--g2p-line); border-radius: 30px; background: rgba(255, 255, 255, 0.82); box-shadow: var(--g2p-shadow); } .g2p-blog-empty h2 { margin: 8px 0 8px; font-family: var(--g2p-serif); font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1; } .g2p-blog-pagination { margin-top: 34px; } .g2p-blog-pagination .pagination-wrapper { display: flex; justify-content: center; } .g2p-blog-pagination .pagination { gap: 8px; padding: 8px; border: 1px solid var(--g2p-line); border-radius: 999px; background: rgba(255, 255, 255, 0.78); } .g2p-blog-pagination .pagination-link { min-width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--g2p-ink); font-weight: 850; } .g2p-blog-pagination .selected .pagination-link, .g2p-blog-pagination .pagination-link:hover { background: var(--g2p-pine); color: var(--g2p-map); } .g2p-blog-back { display: inline-flex; margin-bottom: 22px; color: var(--g2p-muted); font-size: 0.95rem; font-weight: 800; } .g2p-blog-back:hover { color: var(--g2p-clay); } .g2p-blog-article-hero { padding: clamp(42px, 6vw, 82px) 0 0; } .g2p-blog-article-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; margin-bottom: clamp(28px, 4vw, 42px); } .g2p-blog-article-heading h1 { max-width: 920px; font-size: clamp(3rem, 5.8vw, 6.2rem); line-height: 0.96; } .g2p-blog-article-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 1rem; font-weight: 700; } .g2p-blog-article-meta a:hover { color: var(--g2p-clay); } .g2p-blog-article-gallery { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr); grid-auto-rows: clamp(190px, 18vw, 230px); gap: 10px; overflow: hidden; border: 1px solid rgba(47, 74, 51, 0.14); border-radius: 28px; background: rgba(255, 255, 255, 0.84); box-shadow: 0 18px 48px rgba(28, 31, 26, 0.08); } .g2p-blog-article-gallery.is-single { grid-template-columns: 1fr; grid-auto-rows: clamp(320px, 34vw, 470px); } .g2p-blog-article-gallery figure { position: relative; min-height: 0; margin: 0; overflow: hidden; background: var(--g2p-paper-2); } .g2p-blog-article-gallery figure.is-primary { grid-row: span 2; } .g2p-blog-article-gallery.is-single figure.is-primary { grid-row: auto; } .g2p-blog-article-gallery img { width: 100%; height: 100%; object-fit: cover; } .g2p-blog-article-layout { display: grid; grid-template-columns: minmax(0, 780px) minmax(270px, 330px); gap: clamp(42px, 6vw, 82px); align-items: start; padding: clamp(48px, 7vw, 88px) 0; } .g2p-blog-prose { max-width: 780px; color: var(--g2p-ink); font-size: clamp(1.05rem, 1.25vw, 1.16rem); line-height: 1.74; overflow-wrap: break-word; word-break: normal; } .g2p-blog-prose * { max-width: 100%; } .g2p-blog-prose p, .g2p-blog-prose li, .g2p-blog-prose span, .g2p-blog-prose div { color: inherit !important; font-family: var(--g2p-sans) !important; font-size: inherit !important; line-height: inherit !important; letter-spacing: normal !important; text-transform: none !important; background: transparent !important; white-space: normal !important; } .g2p-blog-prose p:empty, .g2p-blog-prose li:empty { display: none; } .g2p-blog-prose > *:first-child { margin-top: 0; } .g2p-blog-article-lead { margin: 0 0 1.6em !important; padding-bottom: 1.35em; border-bottom: 1px solid var(--g2p-line); color: var(--g2p-muted) !important; font-family: var(--g2p-sans) !important; font-size: clamp(1.18rem, 1.5vw, 1.35rem) !important; font-weight: 720 !important; line-height: 1.5 !important; } .g2p-blog-prose h2, .g2p-blog-prose h3, .g2p-blog-prose h4 { margin: 1.75em 0 0.55em; color: var(--g2p-ink); font-family: var(--g2p-serif); font-weight: 560; line-height: 1.05; } .g2p-blog-prose h1 { margin: 1.9em 0 0.55em; color: var(--g2p-ink); font-family: var(--g2p-serif); font-size: clamp(2.25rem, 4vw, 3.4rem); font-weight: 560; letter-spacing: -0.03em; line-height: 1.02; } .g2p-blog-prose h2 { font-size: clamp(1.85rem, 3vw, 2.65rem); } .g2p-blog-prose h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); } .g2p-blog-prose p, .g2p-blog-prose ul, .g2p-blog-prose ol { margin: 0 0 1.3em !important; } .g2p-blog-prose ul, .g2p-blog-prose ol { display: grid; gap: 0.55em; padding: 1.05em 1.25em 1.05em 1.6em; border: 1px solid rgba(47, 74, 51, 0.1); border-radius: 20px; background: rgba(255, 255, 255, 0.5); } .g2p-blog-prose li { padding-left: 0.15em; } .g2p-blog-prose strong, .g2p-blog-prose b, .g2p-blog-prose span[style*="font-weight: 700"] { color: var(--g2p-ink) !important; font-weight: 850 !important; } .g2p-blog-prose a { color: var(--g2p-clay); font-weight: 800; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .g2p-blog-prose img { width: 100%; height: auto; max-height: 560px; margin: 28px 0; border-radius: 20px; object-fit: cover; box-shadow: 0 18px 42px rgba(28, 31, 26, 0.12); } .g2p-blog-prose table { width: 100%; margin: 2em 0; border-collapse: collapse; overflow: hidden; border: 1px solid var(--g2p-line); border-radius: 18px; background: rgba(255, 255, 255, 0.72); } .g2p-blog-prose th, .g2p-blog-prose td { padding: 14px 16px; border-bottom: 1px solid var(--g2p-line); color: var(--g2p-ink); text-align: left; } .g2p-blog-prose blockquote { margin: 2em 0; padding: 22px 26px; border-left: 4px solid var(--g2p-clay); border-radius: 18px; background: rgba(255, 255, 255, 0.72); color: var(--g2p-ink); font-family: var(--g2p-serif); font-size: 1.25rem; line-height: 1.42; } .g2p-blog-related { position: sticky; top: 96px; padding: 24px; border: 1px solid var(--g2p-line); border-radius: 28px; background: rgba(255, 255, 255, 0.86); box-shadow: var(--g2p-shadow); } .g2p-blog-related-grid { grid-template-columns: 1fr; } .g2p-blog-comments { padding-bottom: clamp(56px, 8vw, 96px); } .g2p-blog-comments-card { margin-bottom: 22px; padding: clamp(24px, 4vw, 38px); border: 1px solid var(--g2p-line); border-radius: 28px; background: rgba(255, 255, 255, 0.86); box-shadow: var(--g2p-shadow); } .g2p-blog-comment-form input, .g2p-blog-comment-form textarea { min-height: 48px; border-radius: 14px !important; background: var(--g2p-surface-2); } @media (max-width: 991px) { .g2p-blog-hero-grid, .g2p-blog-card-featured, .g2p-blog-article-heading, .g2p-blog-article-layout { grid-template-columns: 1fr; } .g2p-blog-card-grid, .g2p-blog-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g2p-blog-related { position: static; } .g2p-blog-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .g2p-blog-shell { width: min(100% - 32px, 560px); } .g2p-blog-hero { padding-top: 42px; } .g2p-blog-hero h1, .g2p-blog-article-heading h1 { font-size: clamp(3rem, 15vw, 5rem); } .g2p-blog-card-grid, .g2p-blog-mini-grid, .g2p-blog-related-grid { grid-template-columns: 1fr; } .g2p-blog-section-head { display: block; } .g2p-blog-section-head > a { margin-top: 14px; } .g2p-blog-search-card { padding: 18px; border-radius: 24px; } .g2p-blog-card-featured { padding: 14px; border-radius: 24px; } .g2p-blog-card-featured .g2p-blog-card-media { min-height: 0; aspect-ratio: 16 / 10; } .g2p-blog-article-gallery { grid-template-columns: 1fr; grid-auto-rows: auto; border-radius: 22px; } .g2p-blog-article-gallery figure, .g2p-blog-article-gallery figure.is-primary { grid-row: auto; aspect-ratio: 4 / 3; } } @media (max-width: 767px) { .system_message.alert, body.g2p-marketplace-ready .system_message.alert { top: max(18px, env(safe-area-inset-top)) !important; } #exampleModal .modal-dialog#sign-in, body.g2p-marketplace-ready #exampleModal .modal-dialog#sign-in { align-items: flex-end; width: 100%; max-width: none; min-height: 100%; margin: 0; } #exampleModal #sign-in .modal-content, body.g2p-marketplace-ready #exampleModal #sign-in .modal-content { border-radius: 28px 28px 0 0; } #exampleModal #sign-in .modal-header, body.g2p-marketplace-ready #exampleModal #sign-in .modal-header { padding: 26px 24px 16px; } #exampleModal #sign-in .modal-body, body.g2p-marketplace-ready #exampleModal #sign-in .modal-body { padding: 22px 24px calc(28px + env(safe-area-inset-bottom)); } } /* Browse control rehydration guard: one final visual system for injected filters. */ body.g2p-marketplace-ready .g2p-listing-page .price-range-wrap, body.g2p-marketplace-ready #collection-sidebar[data-g2p-filter-rail] .price-range-wrap, body.g2p-marketplace-ready .productFilters-js .price-range-wrap { --g2p-price-thumb-hit: 18px; --g2p-price-track-height: 3px; overflow: visible !important; } body.g2p-marketplace-ready .g2p-listing-page .slider, body.g2p-marketplace-ready #collection-sidebar[data-g2p-filter-rail] .slider, body.g2p-marketplace-ready .productFilters-js .slider { position: relative !important; height: var(--g2p-price-track-height, 3px) !important; overflow: visible !important; border-radius: 999px !important; background: rgba(28, 31, 26, 0.14) !important; } body.g2p-marketplace-ready .g2p-listing-page .slider .progress, body.g2p-marketplace-ready #collection-sidebar[data-g2p-filter-rail] .slider .progress, body.g2p-marketplace-ready .productFilters-js .slider .progress { position: absolute !important; top: 0 !important; bottom: 0 !important; height: var(--g2p-price-track-height, 3px) !important; border-radius: 999px !important; background: var(--g2p-clay, #C45A2C) !important; box-shadow: none !important; transition: none !important; will-change: left, right; } body.g2p-marketplace-ready .g2p-listing-page .slider .progress::before, body.g2p-marketplace-ready .g2p-listing-page .slider .progress::after, body.g2p-marketplace-ready #collection-sidebar[data-g2p-filter-rail] .slider .progress::before, body.g2p-marketplace-ready #collection-sidebar[data-g2p-filter-rail] .slider .progress::after, body.g2p-marketplace-ready .productFilters-js .slider .progress::before, body.g2p-marketplace-ready .productFilters-js .slider .progress::after { content: none !important; display: none !important; } body.g2p-marketplace-ready .g2p-listing-page .range-input input[type="range"], body.g2p-marketplace-ready #collection-sidebar[data-g2p-filter-rail] .range-input input[type="range"], body.g2p-marketplace-ready .productFilters-js .range-input input[type="range"] { height: 28px !important; background: transparent !important; box-shadow: none !important; accent-color: auto !important; pointer-events: none; -webkit-appearance: none !important; appearance: none !important; } body.g2p-marketplace-ready .g2p-listing-page .range-input input[type="range"]::-webkit-slider-runnable-track, body.g2p-marketplace-ready #collection-sidebar[data-g2p-filter-rail] .range-input input[type="range"]::-webkit-slider-runnable-track, body.g2p-marketplace-ready .productFilters-js .range-input input[type="range"]::-webkit-slider-runnable-track { height: var(--g2p-price-track-height, 3px) !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body.g2p-marketplace-ready .g2p-listing-page .range-input input[type="range"]::-webkit-slider-thumb, body.g2p-marketplace-ready #collection-sidebar[data-g2p-filter-rail] .range-input input[type="range"]::-webkit-slider-thumb, body.g2p-marketplace-ready .productFilters-js .range-input input[type="range"]::-webkit-slider-thumb { width: var(--g2p-price-thumb-hit, 18px) !important; height: var(--g2p-price-thumb-hit, 18px) !important; margin-top: calc((var(--g2p-price-track-height, 3px) - var(--g2p-price-thumb-hit, 18px)) / 2) !important; border: 2px solid rgba(255, 253, 248, 0.95) !important; border-radius: 50% !important; background: var(--g2p-clay, #C45A2C) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 5px 12px rgba(196, 90, 44, 0.18) !important; cursor: grab; opacity: 1 !important; pointer-events: auto; -webkit-appearance: none !important; appearance: none !important; } body.g2p-marketplace-ready .g2p-listing-page .range-input input[type="range"]::-moz-range-track, body.g2p-marketplace-ready #collection-sidebar[data-g2p-filter-rail] .range-input input[type="range"]::-moz-range-track, body.g2p-marketplace-ready .productFilters-js .range-input input[type="range"]::-moz-range-track { height: var(--g2p-price-track-height, 3px) !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } body.g2p-marketplace-ready .g2p-listing-page .range-input input[type="range"]::-moz-range-thumb, body.g2p-marketplace-ready #collection-sidebar[data-g2p-filter-rail] .range-input input[type="range"]::-moz-range-thumb, body.g2p-marketplace-ready .productFilters-js .range-input input[type="range"]::-moz-range-thumb { width: var(--g2p-price-thumb-hit, 18px) !important; height: var(--g2p-price-thumb-hit, 18px) !important; border: 2px solid rgba(255, 253, 248, 0.95) !important; border-radius: 50% !important; background: var(--g2p-clay, #C45A2C) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 5px 12px rgba(196, 90, 44, 0.18) !important; cursor: grab; opacity: 1 !important; pointer-events: auto; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger, body.g2p-marketplace-ready #collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger, body.g2p-marketplace-ready .productFilters-js .cat-accordion ul li > .acc-trigger { appearance: none !important; -webkit-appearance: none !important; position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 24px !important; min-width: 24px !important; height: 24px !important; min-height: 24px !important; padding: 0 !important; border: 1px solid rgba(28, 31, 26, 0.13) !important; border-radius: 999px !important; background-color: rgba(255, 253, 248, 0.92) !important; background-image: none !important; color: #1C1F1A !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.82), 0 6px 14px rgba(28, 31, 26, 0.045) !important; cursor: pointer !important; overflow: hidden !important; font-size: 0 !important; line-height: 0 !important; text-indent: 0 !important; transform: none !important; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger > *, body.g2p-marketplace-ready #collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger > *, body.g2p-marketplace-ready .productFilters-js .cat-accordion ul li > .acc-trigger > * { display: none !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger::before, body.g2p-marketplace-ready #collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger::before, body.g2p-marketplace-ready .productFilters-js .cat-accordion ul li > .acc-trigger::before { content: "" !important; position: absolute !important; top: 50% !important; left: 50% !important; display: block !important; width: 13px !important; height: 13px !important; margin: 0 !important; border: 0 !important; background: currentColor !important; opacity: 1 !important; pointer-events: none; transform: translate(-50%, -50%) rotate(0deg) !important; transform-origin: center center !important; transition: transform 140ms ease, background-color 140ms ease !important; -webkit-mask: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7 5.1 6.5 7.9l2.8-2.8' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat; mask: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.7 5.1 6.5 7.9l2.8-2.8' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px 13px no-repeat; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger::after, body.g2p-marketplace-ready #collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger::after, body.g2p-marketplace-ready .productFilters-js .cat-accordion ul li > .acc-trigger::after { content: none !important; display: none !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger:hover, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger:focus-visible, body.g2p-marketplace-ready #collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger:hover, body.g2p-marketplace-ready #collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger:focus-visible, body.g2p-marketplace-ready .productFilters-js .cat-accordion ul li > .acc-trigger:hover, body.g2p-marketplace-ready .productFilters-js .cat-accordion ul li > .acc-trigger:focus-visible { border-color: rgba(196, 90, 44, 0.3) !important; background-color: rgba(196, 90, 44, 0.12) !important; color: var(--g2p-clay, #C45A2C) !important; outline: none !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger.is--active, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger[aria-expanded="true"], body.g2p-marketplace-ready #collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger.is--active, body.g2p-marketplace-ready #collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger[aria-expanded="true"], body.g2p-marketplace-ready .productFilters-js .cat-accordion ul li > .acc-trigger.is--active, body.g2p-marketplace-ready .productFilters-js .cat-accordion ul li > .acc-trigger[aria-expanded="true"] { border-color: rgba(47, 74, 51, 0.2) !important; background-color: rgba(47, 74, 51, 0.1) !important; color: #1C1F1A !important; transform: none !important; } body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger.is--active::before, body.g2p-marketplace-ready .g2p-listing-page .cat-accordion ul li > .acc-trigger[aria-expanded="true"]::before, body.g2p-marketplace-ready #collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger.is--active::before, body.g2p-marketplace-ready #collection-sidebar[data-g2p-filter-rail] .cat-accordion ul li > .acc-trigger[aria-expanded="true"]::before, body.g2p-marketplace-ready .productFilters-js .cat-accordion ul li > .acc-trigger.is--active::before, body.g2p-marketplace-ready .productFilters-js .cat-accordion ul li > .acc-trigger[aria-expanded="true"]::before { transform: translate(-50%, -50%) rotate(180deg) !important; } .g2p-contact-page { min-height: 100vh; background-color: transparent; color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-sans, "Inter Tight", sans-serif); } .g2p-contact-shell { width: min(1216px, calc(100% - 56px)); margin: 0 auto; } .g2p-contact-hero { padding: clamp(42px, 7vw, 86px) 0 34px; } .g2p-contact-back { display: inline-flex; align-items: center; min-height: 38px; margin-bottom: 26px; padding: 0 14px; border: 1px solid rgba(28, 31, 26, 0.12); border-radius: 999px; background: rgba(255, 255, 255, 0.68); color: var(--g2p-ink-2, #3E4438); font-weight: 800; text-decoration: none; transition: border-color 140ms ease, color 140ms ease, transform 140ms ease; } .g2p-contact-back:hover, .g2p-contact-back:focus-visible { border-color: rgba(196, 90, 44, 0.32); color: var(--g2p-clay, #C45A2C); text-decoration: none; transform: translateY(-1px); } .g2p-contact-kicker { margin: 0 0 12px; color: var(--g2p-clay, #C45A2C); font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.18em; line-height: 1.35; text-transform: uppercase; } .g2p-contact-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.55fr); gap: 24px; align-items: end; } .g2p-contact-page h1, .g2p-contact-page h2 { margin: 0; color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-serif, Georgia, serif); font-weight: 600; letter-spacing: 0; } .g2p-contact-page h1 { max-width: 780px; font-size: clamp(4rem, 9vw, 7.8rem); line-height: 0.93; } .g2p-contact-page h1 em { color: var(--g2p-clay, #C45A2C); font-style: italic; } .g2p-contact-lede { max-width: 680px; margin: 24px 0 0; color: var(--g2p-muted, #6E7163); font-size: clamp(1.05rem, 1.5vw, 1.28rem); font-weight: 750; line-height: 1.45; } .g2p-contact-hero-card, .g2p-contact-panel, .g2p-contact-trust article { border: 1px solid rgba(28, 31, 26, 0.12); border-radius: 28px; background: rgba(255, 255, 255, 0.84); box-shadow: 0 18px 48px rgba(28, 31, 26, 0.08); } .g2p-contact-hero-card { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 24px; } .g2p-contact-hero-card span, .g2p-contact-method span, .g2p-contact-trust span { display: block; color: var(--g2p-clay, #C45A2C); font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; } .g2p-contact-hero-card strong { display: block; margin-top: 12px; color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-serif, Georgia, serif); font-size: clamp(1.55rem, 2.3vw, 2.25rem); font-weight: 600; line-height: 1.05; } .g2p-contact-hero-card p { margin: 14px 0 0; color: var(--g2p-muted, #6E7163); font-weight: 700; line-height: 1.45; } .g2p-contact-section { padding: 16px 0 clamp(58px, 8vw, 104px); } .g2p-contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.55fr); gap: 24px; align-items: stretch; } .g2p-contact-panel { padding: clamp(24px, 3.2vw, 38px); } .g2p-contact-form-panel, .g2p-contact-info-panel { height: 100%; } .g2p-contact-info-panel { display: flex; flex-direction: column; } .g2p-contact-panel-head { margin-bottom: 24px; } .g2p-contact-panel-head h2 { font-size: clamp(2rem, 3vw, 3.1rem); line-height: 1; } .g2p-contact-panel-head p:not(.g2p-contact-kicker) { max-width: 560px; margin: 12px 0 0; color: var(--g2p-muted, #6E7163); font-size: 1rem; font-weight: 700; line-height: 1.45; } .g2p-contact-form { overflow: visible !important; border-radius: 0 !important; background: transparent !important; } .g2p-contact-form > .row { margin-right: -8px; margin-left: -8px; } .g2p-contact-form > .row + .row { margin-top: 18px; } .g2p-contact-form > .row > [class*="col-"] { padding-right: 8px; padding-left: 8px; } .g2p-contact-form .field-set { margin: 0; } .g2p-contact-form .caption-wraper { margin-bottom: 8px; } .g2p-contact-form .field_label { color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-mono, ui-monospace, monospace); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; line-height: 1.35; text-transform: uppercase; } .g2p-contact-form .spn_must_field { color: var(--g2p-clay, #C45A2C); } .g2p-contact-form .field_cover { position: relative; overflow: visible; } .g2p-contact-form input:not([type="submit"]), .g2p-contact-form textarea, .g2p-contact-form select { width: 100%; min-height: 58px !important; border: 1px solid rgba(28, 31, 26, 0.14) !important; border-radius: 18px !important; background: rgba(250, 247, 238, 0.72) !important; color: var(--g2p-ink, #1C1F1A) !important; font-size: 1rem; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76); transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease; } .g2p-contact-form textarea { min-height: 160px !important; padding-top: 16px; resize: vertical; } .g2p-contact-form input:not([type="submit"]):focus, .g2p-contact-form textarea:focus, .g2p-contact-form select:focus { border-color: rgba(196, 90, 44, 0.48) !important; background: rgba(255, 255, 255, 0.96) !important; box-shadow: 0 0 0 4px rgba(196, 90, 44, 0.11); outline: none; } .g2p-contact-form input.error:not([type="submit"]), .g2p-contact-form textarea.error, .g2p-contact-form select.error { border-color: rgba(196, 90, 44, 0.42) !important; background: rgba(196, 90, 44, 0.035) !important; box-shadow: 0 0 0 3px rgba(196, 90, 44, 0.08) !important; } .g2p-contact-form .errorlist { display: inline-flex; max-width: 100%; align-items: center; gap: 6px; margin: 8px 0 0; padding: 6px 10px; border: 1px solid rgba(196, 90, 44, 0.18); border-radius: 999px; background: rgba(196, 90, 44, 0.075); color: var(--g2p-clay, #C45A2C); font-size: 0.78rem; font-weight: 800; line-height: 1.2; list-style: none; } .g2p-contact-form .errorlist li { display: inline-flex; min-width: 0; align-items: center; } .g2p-contact-form .errorlist li::before { content: ""; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--g2p-clay, #C45A2C); opacity: 0.72; } .g2p-contact-form .errorlist a { color: inherit; text-decoration: none; } .g2p-contact-form input[type="submit"] { width: min(100%, 220px); min-height: 54px; margin-top: 4px; border: 0 !important; border-radius: 999px !important; background: var(--g2p-pine, #2F4A33) !important; color: #fff !important; font-weight: 850; box-shadow: 0 16px 30px rgba(47, 74, 51, 0.16); } .g2p-contact-form input[type="submit"]:hover, .g2p-contact-form input[type="submit"]:focus-visible { background: var(--g2p-clay, #C45A2C) !important; color: #fff !important; } .g2p-contact-form .iti, .g2p-contact-form .iti input { width: 100%; } .g2p-contact-form .iti { position: relative; display: block; min-height: 58px; overflow: visible; border: 1px solid rgba(28, 31, 26, 0.14); border-radius: 18px; background: rgba(250, 247, 238, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76); } .g2p-contact-form .iti:has(input.error) { border-color: rgba(196, 90, 44, 0.42); background: rgba(196, 90, 44, 0.035); box-shadow: 0 0 0 3px rgba(196, 90, 44, 0.08); } .g2p-contact-form .iti input { min-height: 56px !important; height: 56px !important; border: 0 !important; border-radius: 18px !important; background: transparent !important; box-shadow: none !important; } .g2p-contact-form .iti--separate-dial-code input { padding-left: 112px !important; } .g2p-contact-form .iti__flag-container { position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; width: auto !important; height: 56px !important; border-right: 1px solid rgba(47, 74, 51, 0.12); border-radius: 18px 0 0 18px; background: rgba(244, 240, 230, 0.82); z-index: 3; } .g2p-contact-form .iti__selected-flag { display: inline-flex; min-width: 100px; min-height: 56px; align-items: center; gap: 7px; padding: 0 13px; border-radius: 18px 0 0 18px; color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-sans, "Inter Tight", sans-serif); font-size: 0.88rem; font-weight: 850; } .g2p-contact-form .iti__selected-flag:hover, .g2p-contact-form .iti__selected-flag:focus-visible { background: rgba(47, 74, 51, 0.08); outline: none; } .g2p-contact-form .iti__selected-dial-code { margin-left: 2px; color: var(--g2p-ink, #1C1F1A); } .g2p-contact-form .iti__arrow { margin-left: 0; border-top-color: rgba(47, 74, 51, 0.72); } .g2p-contact-form .iti__country-list { top: calc(100% + 10px); width: min(100%, 620px); max-height: 310px; overflow: auto; border: 1px solid rgba(28, 31, 26, 0.14); border-radius: 20px; background: rgba(255, 253, 248, 0.98); color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-sans, "Inter Tight", sans-serif); font-size: 0.92rem; font-weight: 700; box-shadow: 0 22px 54px rgba(28, 31, 26, 0.16); scrollbar-color: rgba(47, 74, 51, 0.38) transparent; z-index: 30; } .g2p-contact-form .iti__country { display: flex; min-height: 38px; align-items: center; gap: 8px; padding: 8px 14px; color: var(--g2p-ink, #1C1F1A); } .g2p-contact-form .iti__country:hover, .g2p-contact-form .iti__country.iti__highlight { background: rgba(196, 90, 44, 0.08); color: var(--g2p-clay, #C45A2C); } .g2p-contact-form .iti__country[aria-selected="true"], .g2p-contact-form .iti__country.iti__active { background: rgba(47, 74, 51, 0.1); color: var(--g2p-pine, #2F4A33); } .g2p-contact-form .iti__country-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .g2p-contact-form .iti__dial-code { margin-left: auto; color: rgba(62, 68, 56, 0.58); font-weight: 800; } /* Contact phone field: keep the country picker and input in one compact row. */ .g2p-contact-form .field_cover .iti, body.g2p-marketplace-ready .g2p-contact-form .field_cover .iti { height: 58px !important; min-height: 58px !important; overflow: visible !important; } .g2p-contact-form .field_cover .iti input.phone-js, .g2p-contact-form .field_cover .iti input[type="tel"], .g2p-contact-form .field_cover .iti input[type="text"], body.g2p-marketplace-ready .g2p-contact-form .field_cover .iti input.phone-js, body.g2p-marketplace-ready .g2p-contact-form .field_cover .iti input[type="tel"], body.g2p-marketplace-ready .g2p-contact-form .field_cover .iti input[type="text"] { width: 100% !important; height: 56px !important; min-height: 56px !important; margin: 0 !important; padding: 0 18px 0 112px !important; border: 0 !important; border-radius: 18px !important; background: transparent !important; box-shadow: none !important; } .g2p-contact-form .field_cover .iti .iti__flag-container, body.g2p-marketplace-ready .g2p-contact-form .field_cover .iti .iti__flag-container { position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; width: auto !important; height: 56px !important; border-right: 1px solid rgba(47, 74, 51, 0.12) !important; border-radius: 18px 0 0 18px !important; background: rgba(244, 240, 230, 0.82) !important; z-index: 3 !important; } .g2p-contact-form .field_cover .iti .iti__selected-flag, body.g2p-marketplace-ready .g2p-contact-form .field_cover .iti .iti__selected-flag { height: 56px !important; min-height: 56px !important; } .g2p-contact-methods { display: grid; flex: 1; gap: 12px; grid-auto-rows: minmax(0, 1fr); } .g2p-contact-method { display: flex; flex-direction: column; justify-content: center; min-height: 108px; padding: 18px; border: 1px solid rgba(28, 31, 26, 0.1); border-radius: 20px; background: rgba(250, 247, 238, 0.78); color: var(--g2p-ink, #1C1F1A); text-decoration: none; } a.g2p-contact-method { transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease; } a.g2p-contact-method:hover, a.g2p-contact-method:focus-visible { border-color: rgba(196, 90, 44, 0.32); background: rgba(196, 90, 44, 0.08); color: var(--g2p-ink, #1C1F1A); text-decoration: none; transform: translateY(-1px); } .g2p-contact-method strong { display: block; margin-top: 8px; color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-serif, Georgia, serif); font-size: clamp(1.24rem, 1.8vw, 1.58rem); font-weight: 600; line-height: 1.1; } .g2p-contact-method small { display: block; margin-top: 8px; color: var(--g2p-muted, #6E7163); font-size: 0.92rem; font-weight: 700; line-height: 1.35; } .g2p-contact-quicklinks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 18px; } .g2p-contact-quicklinks a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border: 1px solid rgba(28, 31, 26, 0.12); border-radius: 999px; background: rgba(255, 255, 255, 0.72); color: var(--g2p-pine, #2F4A33); font-weight: 850; text-decoration: none; } .g2p-contact-quicklinks a:hover, .g2p-contact-quicklinks a:focus-visible { border-color: rgba(196, 90, 44, 0.32); color: var(--g2p-clay, #C45A2C); text-decoration: none; } .g2p-contact-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 24px; } .g2p-contact-trust article { display: flex; flex-direction: column; min-height: 154px; padding: 22px; } .g2p-contact-trust strong { display: block; margin-top: 18px; color: var(--g2p-ink, #1C1F1A); font-family: var(--g2p-serif, Georgia, serif); font-size: 1.38rem; font-weight: 600; line-height: 1.1; } .g2p-contact-trust p { margin: 10px 0 0; color: var(--g2p-muted, #6E7163); font-size: 0.95rem; font-weight: 700; line-height: 1.4; } @media (max-width: 991.98px) { .g2p-contact-hero-grid, .g2p-contact-grid, .g2p-contact-trust { grid-template-columns: 1fr; } .g2p-contact-info-panel { order: -1; } } @media (max-width: 767.98px) { .g2p-contact-shell { width: min(100% - 28px, 560px); } .g2p-contact-hero { padding: 34px 0 20px; } .g2p-contact-page h1 { font-size: clamp(3.2rem, 18vw, 5.2rem); } .g2p-contact-lede { margin-top: 18px; font-size: 1rem; } .g2p-contact-panel, .g2p-contact-hero-card, .g2p-contact-trust article { border-radius: 22px; padding: 20px; } .g2p-contact-form > .row + .row { margin-top: 14px; } .g2p-contact-form > .row > [class*="col-"] + [class*="col-"] { margin-top: 14px; } .g2p-contact-form input[type="submit"] { width: 100%; } } /* Canonical Gear2Peer newsletter card. Use the compact home treatment everywhere. */ .collection-newsletter { --g2p-newsletter-map: var(--g2p-map, #F4F0E6); --g2p-newsletter-ink: var(--g2p-ink, #1C1F1A); --g2p-newsletter-pine: var(--g2p-pine, #2F4A33); --g2p-newsletter-clay: var(--g2p-clay, #C45A2C); --g2p-newsletter-line: var(--g2p-line, rgba(28, 31, 26, 0.12)); --g2p-newsletter-sans: var(--g2p-sans, "Inter Tight", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); --g2p-newsletter-serif: var(--g2p-serif, "Fraunces", Georgia, serif); --g2p-newsletter-mono: var(--g2p-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); padding: 48px 0 !important; border-top: 1px solid var(--g2p-newsletter-line) !important; background: var(--g2p-newsletter-map) !important; color: var(--g2p-newsletter-ink) !important; } .collection-newsletter > .container { position: relative; overflow: hidden; width: min(100% - 128px, 1080px) !important; max-width: 1080px !important; padding: 26px 32px !important; border: 1px solid rgba(244, 240, 230, 0.18) !important; border-radius: 22px !important; background: repeating-linear-gradient(171deg, rgba(244, 240, 230, 0.07) 0 1px, transparent 1px 34px), linear-gradient(135deg, var(--g2p-newsletter-pine) 0%, #1C1F1A 100%) !important; box-shadow: 0 16px 42px rgba(28, 31, 26, 0.13) !important; } .collection-newsletter .row { margin: 0 !important; } .collection-newsletter .col-lg-8 { display: grid !important; grid-template-columns: minmax(0, 0.9fr) minmax(380px, 520px) !important; gap: 24px !important; align-items: center; width: 100% !important; max-width: none !important; flex: 0 0 100% !important; padding: 0 !important; } .collection-newsletter .section-head { margin: 0 !important; } .collection-newsletter .section-heading { text-align: left !important; } .collection-newsletter h5 { margin: 0 0 8px !important; color: var(--g2p-newsletter-clay) !important; font-family: var(--g2p-newsletter-mono); font-size: 10px !important; font-weight: 760 !important; letter-spacing: 0 !important; text-transform: uppercase; } .collection-newsletter h2 { max-width: 430px !important; margin: 0 !important; color: var(--g2p-newsletter-map) !important; font-family: var(--g2p-newsletter-serif); font-size: clamp(31px, 2.8vw, 35px) !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1.04 !important; } .collection-newsletter .subscribers { align-self: center; justify-self: end; width: min(100%, 520px) !important; } .collection-newsletter .form-subscribers, .collection-newsletter .form-subscribe { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important; align-items: center !important; height: 52px !important; min-height: 52px !important; width: 100% !important; max-width: 520px !important; margin: 0 !important; padding: 6px !important; border: 1px solid rgba(244, 240, 230, 0.36) !important; border-radius: 999px !important; background: rgba(250, 247, 238, 0.96) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12) !important; } .collection-newsletter .form-subscribers input[type="text"], .collection-newsletter .form-subscribers input[type="email"], .collection-newsletter .form-subscribe input[type="text"], .collection-newsletter .form-subscribe input[type="email"] { width: 100% !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; padding: 0 16px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; color: var(--g2p-newsletter-ink) !important; font-family: var(--g2p-newsletter-sans); font-size: 14px !important; font-weight: 600 !important; outline: none; } .collection-newsletter .form-subscribers input[type="text"]::placeholder, .collection-newsletter .form-subscribers input[type="email"]::placeholder, .collection-newsletter .form-subscribe input[type="text"]::placeholder, .collection-newsletter .form-subscribe input[type="email"]::placeholder { color: rgba(28, 31, 26, 0.48) !important; } .collection-newsletter .form-subscribers input[type="submit"], .collection-newsletter .form-subscribers button[type="submit"], .collection-newsletter .form-subscribe input[type="submit"], .collection-newsletter .form-subscribe button[type="submit"], .collection-newsletter .btn-brand { width: auto !important; min-width: 116px !important; height: 40px !important; min-height: 40px !important; padding: 0 18px !important; border: 0 !important; border-radius: 999px !important; background: var(--g2p-newsletter-clay) !important; color: #ffffff !important; font-family: var(--g2p-newsletter-sans); font-size: 14px !important; font-weight: 800 !important; cursor: pointer; transition: background 160ms ease, transform 160ms ease; } .collection-newsletter .form-subscribers input[type="submit"]:hover, .collection-newsletter .form-subscribers button[type="submit"]:hover, .collection-newsletter .form-subscribe input[type="submit"]:hover, .collection-newsletter .form-subscribe button[type="submit"]:hover, .collection-newsletter .btn-brand:hover, .collection-newsletter .form-subscribers input[type="submit"]:focus-visible, .collection-newsletter .form-subscribers button[type="submit"]:focus-visible, .collection-newsletter .form-subscribe input[type="submit"]:focus-visible, .collection-newsletter .form-subscribe button[type="submit"]:focus-visible, .collection-newsletter .btn-brand:focus-visible { background: #A94A25 !important; color: #ffffff !important; transform: translateY(-1px); } @media (max-width: 900px) { .collection-newsletter { padding: 38px 0 !important; } .collection-newsletter > .container { width: min(100% - 32px, 680px) !important; padding: 26px !important; } .collection-newsletter .col-lg-8 { grid-template-columns: 1fr !important; gap: 18px !important; text-align: center; } .collection-newsletter .section-heading { text-align: center !important; } .collection-newsletter h2 { max-width: none !important; font-size: clamp(32px, 8vw, 36px) !important; } .collection-newsletter .subscribers { justify-self: center; } } @media (max-width: 560px) { .collection-newsletter > .container { padding: 22px !important; border-radius: 22px !important; } .collection-newsletter h2 { font-size: 30px !important; } .collection-newsletter .form-subscribers, .collection-newsletter .form-subscribe { grid-template-columns: 1fr !important; height: auto !important; min-height: 0 !important; max-width: 100% !important; gap: 8px !important; padding: 8px !important; border-radius: 24px !important; } .collection-newsletter .form-subscribers input[type="text"], .collection-newsletter .form-subscribers input[type="email"], .collection-newsletter .form-subscribers input[type="submit"], .collection-newsletter .form-subscribers button[type="submit"], .collection-newsletter .form-subscribe input[type="text"], .collection-newsletter .form-subscribe input[type="email"], .collection-newsletter .form-subscribe input[type="submit"], .collection-newsletter .form-subscribe button[type="submit"], .collection-newsletter .btn-brand { width: 100% !important; height: 42px !important; min-height: 42px !important; } } /* Blog/press pages load older theme CSS after this file; pin the shared footer/newsletter treatment. */ body.is--blog, body.g2p-blog-page { background-color: var(--g2p-map, #F4F0E6) !important; background-image: linear-gradient(180deg, rgba(255, 253, 248, 0.62), rgba(255, 253, 248, 0) 520px), var(--g2p-cartography-field), radial-gradient(circle at 16% 8%, rgba(47, 74, 51, 0.055), transparent 28%), radial-gradient(circle at 90% 12%, rgba(196, 90, 44, 0.045), transparent 26%) !important; background-repeat: no-repeat !important; background-position: center top, center top, left top, right top !important; background-size: auto, max(1800px, 132vw) auto, auto, auto !important; } body.is--blog .collection-newsletter, body.g2p-blog-page .collection-newsletter { padding: 48px 0 !important; border-top: 1px solid var(--g2p-line, rgba(28, 31, 26, 0.12)) !important; background: var(--g2p-map, #F4F0E6) !important; color: var(--g2p-ink, #1C1F1A) !important; } body.is--blog .collection-newsletter > .container, body.g2p-blog-page .collection-newsletter > .container { position: relative !important; overflow: hidden !important; width: min(100% - 128px, 1080px) !important; max-width: 1080px !important; padding: 26px 32px !important; border: 1px solid rgba(244, 240, 230, 0.18) !important; border-radius: 22px !important; background: repeating-linear-gradient(171deg, rgba(244, 240, 230, 0.07) 0 1px, transparent 1px 34px), linear-gradient(135deg, var(--g2p-pine, #2F4A33) 0%, #1C1F1A 100%) !important; box-shadow: 0 16px 42px rgba(28, 31, 26, 0.13) !important; } body.is--blog .collection-newsletter .col-lg-8, body.g2p-blog-page .collection-newsletter .col-lg-8 { display: grid !important; grid-template-columns: minmax(0, 0.9fr) minmax(380px, 520px) !important; gap: 24px !important; align-items: center !important; width: 100% !important; max-width: none !important; flex: 0 0 100% !important; padding: 0 !important; } body.is--blog .collection-newsletter .section-head, body.g2p-blog-page .collection-newsletter .section-head { margin: 0 !important; } body.is--blog .collection-newsletter .section-heading, body.g2p-blog-page .collection-newsletter .section-heading { text-align: left !important; } body.is--blog .collection-newsletter h5, body.g2p-blog-page .collection-newsletter h5 { margin: 0 0 8px !important; color: var(--g2p-clay, #C45A2C) !important; font-family: var(--g2p-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace) !important; font-size: 10px !important; font-weight: 760 !important; letter-spacing: 0 !important; line-height: 1.2 !important; text-transform: uppercase !important; } body.is--blog .collection-newsletter h2, body.g2p-blog-page .collection-newsletter h2 { max-width: 430px !important; margin: 0 !important; color: var(--g2p-map, #F4F0E6) !important; font-family: var(--g2p-serif, "Fraunces", Georgia, serif) !important; font-size: clamp(31px, 2.8vw, 35px) !important; font-weight: 600 !important; letter-spacing: 0 !important; line-height: 1.04 !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); } body.is--blog .footer, body.g2p-blog-page .footer { background-color: var(--g2p-map, #F4F0E6) !important; background-image: var(--g2p-cartography-field) !important; background-repeat: no-repeat !important; background-position: center top !important; background-size: max(1800px, 132vw) auto !important; } body.is--blog .footer .g2p-site-footer-top, body.g2p-blog-page .footer .g2p-site-footer-top { background: transparent !important; } @media (max-width: 900px) { body.is--blog .collection-newsletter > .container, body.g2p-blog-page .collection-newsletter > .container { width: min(100% - 32px, 680px) !important; padding: 26px !important; } body.is--blog .collection-newsletter .col-lg-8, body.g2p-blog-page .collection-newsletter .col-lg-8 { grid-template-columns: 1fr !important; gap: 18px !important; text-align: center !important; } body.is--blog .collection-newsletter .section-heading, body.g2p-blog-page .collection-newsletter .section-heading { text-align: center !important; } body.is--blog .collection-newsletter h2, body.g2p-blog-page .collection-newsletter h2 { max-width: none !important; font-size: clamp(32px, 8vw, 36px) !important; } }