body {
font-size: 100%;
}
/* ============================================================
FOTO DO VENDEDOR + TOOLTIP "CONTA VERIFICADA"
============================================================ */
/* Linha foto + info lado a lado */
.seller-photo-row {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
}
/* Wrapper da foto circular */
.seller-photo-wrap {
flex-shrink: 0;
}
/* Foto real do vendedor */
.seller-photo-img {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #e8e8e8;
display: block;
}
/* Placeholder quando não há foto */
.seller-photo-placeholder {
width: 56px;
height: 56px;
border-radius: 50%;
background: #f0f0f0;
border: 2px solid #e8e8e8;
display: flex;
align-items: center;
justify-content: center;
}
/* Coluna com nome e badge */
.seller-info-col {
display: flex;
flex-direction: column;
gap: 2px;
justify-content: center;
}
.seller-name-text {
font-weight: 600;
font-size: 16px;
color: #1a1d23;
}
/* Badge "Conta verificada" com tooltip */
.verified-badge-wrapper {
position: relative;
display: inline-flex;
align-items: center;
gap: 4px;
cursor: pointer;
width: fit-content;
}
.verified-badge-label {
font-size: 12px;
color: #28b5d9;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Tooltip oculto por padrão */
.verified-tooltip {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: #1a1d23;
color: #fff;
font-size: 12px;
font-weight: 500;
padding: 6px 10px;
border-radius: 6px;
white-space: nowrap;
display: flex;
align-items: center;
gap: 5px;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease;
z-index: 100;
box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
/* Seta do tooltip */
.verified-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #1a1d23;
}
/* Mostrar tooltip ao hover */
.verified-badge-wrapper:hover .verified-tooltip {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-display: swap;
-webkit-font-smoothing: antialiased;
}
ul[class] {
padding: 0;
}
body,
h1,
h2,
h3,
p {
margin: 0;
}
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1.5;
}
img,
picture {
max-width: 100%;
display: block;
}
input,
button {
font: inherit;
}
button,
[type='button'] {
-webkit-appearance: button;
}
@media (prefers-reduced-motion:reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
@media screen {
:root {
--border-radius-none: 0;
--border-radius-xxs: 2px;
--border-radius-xs: 4px;
--border-radius-sm: 8px;
--border-radius-md: 16px;
--border-radius-lg: 24px;
--border-radius-pill: 500px;
--border-radius-circle: 50%;
--border-width-none: 0;
--border-width-hairline: 1px;
--border-width-thin: 2px;
--border-width-thick: 4px;
--border-width-heavy: 8px;
--media-query-sm: 360px;
--media-query-md: 840px;
--media-query-lg: 1200px;
--media-query-xl: 1500px;
--media-query-xxl: 1720px;
--color-primary-70: #fff3e6;
--color-primary-80: #ffe1bf;
--color-primary-90: #ffbb73;
--color-primary-100: #f28000;
--color-primary-110: #df7400;
--color-primary-120: #cb6700;
--color-primary-130: #b35a00;
--color-primary-darkest: #b35a00;
--color-primary-darker: #cb6700;
--color-primary-dark: #df7400;
--color-primary-medium: #f28000;
--color-primary-light: #ffbb73;
--color-primary-lighter: #ffe1bf;
--color-primary-lightest: #fff3e6;
--color-secondary-70: #f0e6ff;
--color-secondary-80: #c599ff;
--color-secondary-90: #994dfa;
--color-secondary-100: #6e0ad6;
--color-secondary-110: #5c08b2;
--color-secondary-120: #49078f;
--color-secondary-130: #37056b;
--color-secondary-darkest: #37056b;
--color-secondary-darker: #49078f;
--color-secondary-dark: #5c08b2;
--color-secondary-medium: #6e0ad6;
--color-secondary-light: #994dfa;
--color-secondary-lighter: #c599ff;
--color-secondary-lightest: #f0e6ff;
--color-neutral-70: #ffffff;
--color-neutral-80: #f5f6f7;
--color-neutral-90: #cfd4dd;
--color-neutral-100: #8994a9;
--color-neutral-110: #5e6a82;
--color-neutral-120: #3c4453;
--color-neutral-130: #1a1d23;
--color-neutral-darkest: #1a1d23;
--color-neutral-darker: #3c4453;
--color-neutral-dark: #5e6a82;
--color-neutral-medium: #8994a9;
--color-neutral-light: #cfd4dd;
--color-neutral-lighter: #f5f6f7;
--color-neutral-lightest: #ffffff;
--color-feedback-success-80: #def9cc;
--color-feedback-success-90: #8ce563;
--color-feedback-success-100: #24a148;
--color-feedback-success-110: #197b35;
--color-feedback-success-120: #105323;
--color-feedback-success-darkest: #105323;
--color-feedback-success-dark: #197b35;
--color-feedback-success-medium: #24a148;
--color-feedback-success-light: #8ce563;
--color-feedback-success-lightest: #def9cc;
--color-feedback-error-80: #fff5f5;
--color-feedback-error-90: #f48787;
--color-feedback-error-100: #e22828;
--color-feedback-error-110: #901111;
--color-feedback-error-120: #3b0505;
--color-feedback-error-darkest: #3b0505;
--color-feedback-error-dark: #901111;
--color-feedback-error-medium: #e22828;
--color-feedback-error-light: #f48787;
--color-feedback-error-lightest: #fff5f5;
--color-feedback-attention-80: #fff7e0;
--color-feedback-attention-90: #ffe19a;
--color-feedback-attention-100: #f9af27;
--color-feedback-attention-110: #7b5613;
--color-feedback-attention-120: #3c2a09;
--color-feedback-attention-darkest: #3c2a09;
--color-feedback-attention-dark: #7b5613;
--color-feedback-attention-medium: #f9af27;
--color-feedback-attention-light: #ffe19a;
--color-feedback-attention-lightest: #fff7e0;
--color-feedback-info-80: #e1f9ff;
--color-feedback-info-90: #9ce6f9;
--color-feedback-info-100: #28b5d9;
--color-feedback-info-110: #14596b;
--color-feedback-info-120: #0a2b34;
--color-feedback-info-darkest: #0a2b34;
--color-feedback-info-dark: #14596b;
--color-feedback-info-medium: #28b5d9;
--color-feedback-info-light: #9ce6f9;
--color-feedback-info-lightest: #e1f9ff;
--font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-size-nano: 10px;
--font-size-xxxs: 12px;
--font-size-xxs: 14px;
--font-size-xs: 16px;
--font-size-sm: 18px;
--font-size-md: 20px;
--font-size-lg: 24px;
--font-size-xl: 30px;
--font-size-xxl: 36px;
--font-size-xxxl: 48px;
--font-size-huge: 64px;
--font-weight-bold: 700;
--font-weight-semibold: 600;
--font-weight-regular: 400;
--font-weight-light: 300;
--font-lineheight-supertight: 1;
--font-lineheight-tight: 1.15;
--font-lineheight-medium: 1.32;
--font-lineheight-distant: 1.40;
--font-lineheight-superdistant: 1.50;
--z-index-1-default: 1;
--z-index-100-masked: 100;
--z-index-200-mask: 200;
--z-index-250-mask-button: 250;
--z-index-300-sticky: 300;
--z-index-400-header: 400;
--z-index-500-toast: 500;
--z-index-600-dropdown: 600;
--z-index-700-overlay: 700;
--z-index-800-spinner: 800;
--z-index-900-modal: 900;
--z-index-950-popup: 950;
--z-index-1000-top: 1000;
--z-index-deep: -9999;
--opacity-full: 1;
--opacity-semiopaque: 0.8;
--opacity-intense: 0.64;
--opacity-medium: 0.32;
--opacity-light: 0.16;
--opacity-semitransparent: 0.08;
--opacity-none: 0;
--shadow-level-1: 0px 1px 1px rgba(0, 0, 0, 0.14);
--shadow-level-2: 0px 2px 2px rgba(0, 0, 0, 0.14);
--shadow-level-3: 0px 3px 4px rgba(0, 0, 0, 0.14);
--shadow-level-4: 0px 4px 5px rgba(0, 0, 0, 0.14);
--shadow-level-6: 0px 6px 10px rgba(0, 0, 0, 0.14);
--shadow-level-8: 0px 8px 10px rgba(0, 0, 0, 0.14);
--shadow-level-9: 0px 9px 12px rgba(0, 0, 0, 0.14);
--shadow-level-12: 0px 12px 17px rgba(0, 0, 0, 0.14);
--shadow-level-16: 0px 16px 24px rgba(0, 0, 0, 0.14);
--shadow-level-24: 0px 24px 38px rgba(0, 0, 0, 0.14);
--spacing-1: 8px;
--spacing-2: 16px;
--spacing-3: 24px;
--spacing-4: 32px;
--spacing-5: 40px;
--spacing-6: 48px;
--spacing-7: 56px;
--spacing-8: 64px;
--spacing-9: 72px;
--spacing-0-25: 2px;
--spacing-0-5: 4px;
--spacing-1-5: 12px;
--spacing-10: 80px;
--spacing-stack-quarck: 4px;
--spacing-stack-nano: 8px;
--spacing-stack-xxxs: 16px;
--spacing-stack-xxs: 24px;
--spacing-stack-xs: 32px;
--spacing-stack-sm: 40px;
--spacing-stack-md: 48px;
--spacing-stack-lg: 56px;
--spacing-stack-xl: 64px;
--spacing-stack-xxl: 80px;
--spacing-stack-xxxl: 120px;
--spacing-stack-huge: 160px;
--spacing-stack-giant: 200px;
--spacing-inline-quarck: 4px;
--spacing-inline-nano: 8px;
--spacing-inline-xxxs: 16px;
--spacing-inline-xxs: 24px;
--spacing-inline-xs: 32px;
--spacing-inline-sm: 40px;
--spacing-inline-md: 48px;
--spacing-inline-lg: 64px;
--spacing-inline-xl: 80px;
--spacing-inset-xxs: 2px;
--spacing-inset-xs: 4px;
--spacing-inset-sm: 8px;
--spacing-inset-md: 16px;
--spacing-inset-lg: 24px;
--spacing-inset-xl: 32px;
--spacing-inset-xxl: 40px;
--spacing-squish-xxs: 2px 4px;
--spacing-squish-xs: 4px 8px;
--spacing-squish-sm: 8px 16px;
--spacing-squish-md: 8px 24px;
--spacing-squish-lg: 12px 16px;
--spacing-squish-xl: 16px 24px;
--spacing-squish-xxl: 16px 32px;
--spacing-squish-xxxl: 24px 32px;
--transition-delay-1: 100ms;
--transition-delay-2: 200ms;
--transition-delay-3: 300ms;
--transition-delay-4: 400ms;
--transition-delay-5: 500ms;
--transition-delay-slowest: 500ms;
--transition-delay-slow: 400ms;
--transition-delay-normal: 300ms;
--transition-delay-fast: 200ms;
--transition-delay-fastest: 100ms;
--transition-timing-ease: cubic-bezier(0.250, 0.100, 0.250, 1.000);
--transition-timing-ease-in: cubic-bezier(0.420, 0.000, 1.000, 1.000);
--transition-timing-ease-out: cubic-bezier(0.000, 0.000, 0.580, 1.000);
--transition-timing-ease-in-out: cubic-bezier(0.420, 0.000, 0.580, 1.000);
--transition-duration-1: 100ms;
--transition-duration-2: 200ms;
--transition-duration-3: 300ms;
--transition-duration-4: 400ms;
--transition-duration-5: 500ms;
--transition-duration-slowest: 500ms;
--transition-duration-slow: 400ms;
--transition-duration-normal: 300ms;
--transition-duration-fast: 200ms;
--transition-duration-fastest: 100ms;
--transition-repetition-2: 2;
--transition-repetition-3: 3;
--transition-repetition-infinite: infinite;
--button-primary-background-color-base: #f28000;
--button-primary-background-color-hover: #df7400;
--button-primary-background-color-loading: #f28000;
--button-primary-border-color-base: #f28000;
--button-primary-border-color-hover: #df7400;
--button-primary-color-font-base: #ffffff;
--button-primary-color-outline: #ffe1bf;
--button-secondary-background-color-base: transparent;
--button-secondary-background-color-hover: #fff3e6;
--button-secondary-background-color-loading: transparent;
--button-secondary-border-color-base: #f28000;
--button-secondary-border-color-hover: #fff3e6;
--button-secondary-color-font-base: #f28000;
--button-secondary-color-outline: #ffe1bf;
--button-secondary-inverted-background-color-base: #ffffff00;
--button-secondary-inverted-background-color-hover: #ffffff2B;
--button-secondary-inverted-background-color-loading: transparent;
--button-secondary-inverted-border-color-base: #ffffff;
--button-secondary-inverted-border-color-hover: #ffffff2B;
--button-secondary-inverted-color-font-base: #ffffff;
--button-secondary-inverted-color-outline: #ffffff52;
--button-tertiary-background-color-base: #fff3e6;
--button-tertiary-background-color-hover: #ffe1bf;
--button-tertiary-background-color-loading: #df7400;
--button-tertiary-border-color-base: #fff3e6;
--button-tertiary-border-color-hover: #ffe1bf;
--button-tertiary-color-font-base: #cb6700;
--button-tertiary-color-outline: #ffe1bf;
--button-link-button-background-color-base: transparent;
--button-link-button-background-color-hover: #f0e6ff;
--button-link-button-background-color-loading: #f0e6ff;
--button-link-button-border-color-base: transparent;
--button-link-button-border-color-hover: #f0e6ff;
--button-link-button-color-font-base: #6e0ad6;
--button-link-button-color-outline: #f0e6ff;
--button-danger-background-color-base: #e22828;
--button-danger-background-color-hover: #901111;
--button-danger-background-color-loading: #e22828;
--button-danger-border-color-base: #e22828;
--button-danger-border-color-hover: #901111;
--button-danger-color-font-base: #ffffff;
--button-danger-color-outline: #f48787;
--button-neutral-background-color-base: transparent;
--button-neutral-background-color-hover: #cfd4dd;
--button-neutral-background-color-loading: transparent;
--button-neutral-border-color-base: #5e6a82;
--button-neutral-border-color-hover: #5e6a82;
--button-neutral-color-font-base: #1a1d23;
--button-neutral-color-outline: #f5f6f7;
--button-disabled-background-color: #f5f6f7;
--button-disabled-border-color: transparent;
--button-disabled-color-font: #5e6a82;
--carousel-focus: #1a1d23;
--carousel-arrow-background-color-base: #ffffff;
--carousel-arrow-background-color-hover: #cfd4dd;
--carousel-arrow-color: #1a1d23;
--checkbox-background-color-base: #ffffff;
--checkbox-background-color-checked: #6e0ad6;
--checkbox-background-color-checked-hover: #49078f;
--checkbox-background-color-error: #fff5f5;
--checkbox-background-color-hover: #f5f6f7;
--checkbox-border-color-base: #cfd4dd;
--checkbox-border-color-hover: #cfd4dd;
--checkbox-border-color-error: #e22828;
--checkbox-color-outline: #c599ff;
--checkbox-color-icon: #ffffff;
--container-background-color: #ffffff;
--container-border-color-outlined: #cfd4dd;
--divider-default-background-color: #cfd4dd;
--divider-inverted-background-color: #5e6a82;
--dropdown-background-color-base: #ffffff;
--dropdown-background-color-error: #fff5f5;
--dropdown-background-color-disabled: #f5f6f7;
--dropdown-border-color-base: #cfd4dd;
--dropdown-border-color-disabled: #f5f6f7;
--dropdown-border-color-error: #e22828;
--dropdown-border-color-focus: #6e0ad6;
--dropdown-border-color-hover: #cfd4dd;
--dropdown-border-color-selected: #1a1d23;
--dropdown-color-font-base: #8994a9;
--dropdown-color-font-disabled: #8994a9;
--dropdown-color-font-selected: #1a1d23;
--dropdown-icon-color-base: #1a1d23;
--dropdown-icon-color-disabled: #8994a9;
--link-color-main-base: #6e0ad6;
--link-color-main-hover: #5c08b2;
--link-color-main-active: #49078f;
--link-color-grey-base: #1a1d23;
--link-color-grey-hover: #6e0ad6;
--link-color-grey-active: #5c08b2;
--link-color-inverted-base: #ffffff;
--link-color-inverted-hover: #c599ff;
--link-color-inverted-active: #f0e6ff;
--modal-background-color: #ffffff;
--modal-button-background-color-hover: #cfd4dd;
--modal-button-background-color-focus: #1a1d23;
--modal-button-color: #1a1d23;
--radio-background-color-base: #ffffff;
--radio-background-color-checked: #6e0ad6;
--radio-background-color-checked-hover: #49078f;
--radio-background-color-error: #e22828;
--radio-background-color-hover: #f5f6f7;
--radio-border-color-base: #5e6a82;
--radio-border-color-checked: #6e0ad6;
--radio-border-color-checked-hover: #49078f;
--radio-border-color-hover: #cfd4dd;
--radio-border-color-error: #e22828;
--radio-color-outline: #c599ff;
--radio-font-color: #1a1d23;
--skeleton-background-0: linear-gradient(90deg, #f5f6f7 0%, #cfd4dd 0%, #f5f6f7 100%);
--skeleton-background-20: linear-gradient(90deg, #f5f6f7 0%, #cfd4dd 20%, #f5f6f7 100%);
--skeleton-background-40: linear-gradient(90deg, #f5f6f7 0%, #cfd4dd 40%, #f5f6f7 100%);
--skeleton-background-60: linear-gradient(90deg, #f5f6f7 0%, #cfd4dd 60%, #f5f6f7 100%);
--skeleton-background-80: linear-gradient(90deg, #f5f6f7 0%, #cfd4dd 80%, #f5f6f7 100%);
--skeleton-background-100: linear-gradient(90deg, #f5f6f7 0%, #cfd4dd 100%, #f5f6f7 100%);
--spinner-color: #6e0ad6;
--spinner-inverted-color: #ffffff;
--spinner-extra-small-size: 16px;
--spinner-small-size: 24px;
--spinner-medium-size: 32px;
--spinner-large-size: 48px;
--spinner-extra-large-size: 56px;
--spinner-huge-size: 64px;
--spots-background-circle: #f0e6ff;
--spots-background-triangle: #def9cc;
--spots-background-square: #fff3e6;
--spots-background-neutral: #f5f6f7;
--spots-color-circle: #6e0ad6;
--spots-color-triangle: #8ce563;
--spots-color-square: #f28000;
--spots-color-neutral: #cfd4dd;
--spots-border-color-default: #1a1d23;
--spots-border-color-neutral: #8994a9;
--textinput-background-color-base: #ffffff;
--textinput-background-color-error: #fff5f5;
--textinput-background-color-disabled: #f5f6f7;
--textinput-background-color-success: #ffffff;
--textinput-border-color-empty: #cfd4dd;
--textinput-border-color-error: #e22828;
--textinput-border-color-disabled: transparent;
--textinput-border-color-filled: #1a1d23;
--textinput-border-color-focus: #6e0ad6;
--textinput-border-color-hover: #cfd4dd;
--textinput-border-color-success: #24a148;
--textinput-border-color-empty-hover: #cfd4dd;
--textinput-color-font: #1a1d23;
--textinput-color-placeholder: #8994a9;
--textinput-color-disabled: #8994a9;
--textinput-icon-color: #3c4453;
--textinput-caption-font-color: #3c4453;
--textinput-feedback-error-font-color: #e22828;
--text-color: #1a1d23;
--toast-background-color: #3c4453;
--toast-font-color: #ffffff;
--toast-close-icon-color: #ffffff;
--toggleswitch-background-color-base: #cfd4dd;
--toggleswitch-background-color-checked: #6e0ad6;
--toggleswitch-background-color-checked-hover: #49078f;
--toggleswitch-background-color-hover: #8994a9;
--toggleswitch-color-outline: #c599ff;
--toggleswitch-icon-color: #ffffff;
}
}
.olx-button {
align-items: center;
background-color: var(--button-background-color);
border-color: var(--button-border);
border-radius: var(--border-radius-pill);
border-style: solid;
border-width: var(--border-width-hairline);
color: var(--button-color-font);
cursor: pointer;
display: inline-flex;
font-family: var(--font-family);
font-size: var(--button-font-size);
font-weight: var(--font-weight-semibold);
height: var(--button-height);
justify-content: center;
line-height: var(--button-line-height);
min-width: 72px;
outline: none;
padding: var(--button-padding);
position: relative;
text-decoration: initial;
width: -moz-fit-content;
width: fit-content;
}
.olx-button--a {
text-decoration: none;
}
.olx-button:active {
transform: scale(.96);
}
.olx-button:active,
.olx-button:not(:active) {
transition: all var(--transition-duration-1) var(--transition-timing-ease-in) 0ms, outline 0ms, outline-offset 0ms;
}
.olx-button:not(:hover) {
transition: all var(--transition-duration-2) var(--transition-timing-ease-in) 0ms, outline 0ms, outline-offset 0ms;
}
.olx-button:focus {
outline: var(--color-neutral-130) solid var(--border-width-thin);
outline-offset: var(--border-width-thin);
transition: outline 0ms, outline-offset 0ms;
}
.olx-button:not(.olx-button--disabled):hover {
background-color: var(--button-background-color-hover);
border-color: var(--button-border-color-hover);
transition: all var(--transition-duration-2) var(--transition-timing-ease-in) 0ms, outline 0ms, outline-offset 0ms;
}
.olx-button:focus:not(:focus-visible) {
outline: none;
outline-offset: 0;
}
.olx-button--small {
--button-height: 32px;
--button-padding: var(--spacing-1) var(--spacing-2);
--button-font-size: var(--font-size-xxs);
--button-line-height: var(--font-lineheight-tight);
}
.olx-button--medium {
--button-height: 40px;
--button-padding: var(--spacing-1) var(--spacing-3);
--button-font-size: var(--font-size-xs);
--button-line-height: var(--font-lineheight-superdistant);
}
.olx-button--large {
--button-height: 48px;
--button-padding: var(--spacing-2) var(--spacing-3);
--button-font-size: var(--font-size-xs);
--button-line-height: var(--font-lineheight-supertight);
}
.olx-button--primary {
--button-background-color: var(--button-primary-background-color-base);
--button-border: var(--button-primary-border-color-base);
--button-color-font: var(--button-primary-color-font-base);
--button-background-color-hover: var(--button-primary-background-color-hover);
--button-border-color-hover: var(--button-primary-border-color-hover);
}
.olx-button--secondary {
--button-background-color: var(--button-secondary-background-color-base);
--button-border: var(--button-secondary-border-color-base);
--button-color-font: var(--button-secondary-color-font-base);
--button-background-color-hover: var(--button-secondary-background-color-hover);
--button-border-color-hover: var(--button-secondary-border-color-hover);
}
.olx-button--link-button {
--button-background-color: var(--button-link-button-background-color-base);
--button-border: var(--button-link-button-border-color-base);
--button-color-font: var(--button-link-button-color-font-base);
--button-background-color-hover: var(--button-link-button-background-color-hover);
--button-border-color-hover: var(--button-link-button-border-color-hover);
}
.olx-button__content-wrapper {
align-items: center;
display: inline-flex;
justify-content: center;
visibility: visible;
}
.olx-button__icon-wrapper {
fill: currentcolor;
align-items: center;
display: inline-flex;
height: 24px;
justify-content: center;
margin-right: var(--spacing-1);
pointer-events: none;
width: 24px;
}
.olx-button__icon-wrapper svg {
height: 24px;
width: 24px;
}
.olx-link {
align-items: center;
color: var(--link-color);
cursor: pointer;
display: inline-flex;
font-family: var(--font-family);
font-size: var(--font-size);
font-weight: var(--font-weight-semibold);
justify-content: center;
line-height: var(--font-lineheight);
outline: none;
text-decoration: none;
transition: all var(--transition-duration-3) var(--transition-timing-ease);
}
.olx-link:active {
color: var(--link-color-active);
}
.olx-link:focus {
border-radius: var(--border-radius-xxs);
outline: var(--border-width-thin) solid var(--color-neutral-130);
}
.olx-link:hover {
color: var(--link-color-hover);
text-decoration: underline;
}
.olx-link:focus:not(:focus-visible) {
box-shadow: none;
outline: 0;
}
.olx-link--caption {
--font-size: var(--font-size-xxxs);
--font-lineheight: var(--font-lineheight-medium);
}
.olx-link--small {
--font-size: var(--font-size-xxs);
--font-lineheight: var(--font-lineheight-distant);
}
.olx-link--medium {
--font-size: var(--font-size-xs);
--font-lineheight: var(--font-lineheight-superdistant);
}
.olx-link--main {
--link-color: var(--link-color-main-base);
--link-color-hover: var(--link-color-main-hover);
--link-color-active: var(--link-color-main-active);
}
.olx-link--grey {
--link-color: var(--link-color-grey-base);
--link-color-hover: var(--link-color-grey-hover);
--link-color-active: var(--link-color-grey-active);
}
.olx-text {
color: var(--text-color);
display: block;
font-family: var(--font-family);
font-style: normal;
font-weight: var(--font-weight-regular);
margin: 0;
padding: 0;
word-break: break-word;
}
.olx-text--title-large {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
line-height: var(--font-lineheight-medium);
}
@media screen and (min-width:840px) {
.olx-text--title-large {
font-size: var(--font-size-xxl);
}
}
.olx-text--title-medium {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
line-height: var(--font-lineheight-medium);
}
@media screen and (min-width:840px) {
.olx-text--title-medium {
font-size: var(--font-size-lg);
}
}
.olx-text--title-small {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
line-height: var(--font-lineheight-medium);
}
@media screen and (min-width:840px) {
.olx-text--title-small {
font-size: var(--font-size-md);
}
}
.olx-text--body-large {
font-size: var(--font-size-sm);
}
.olx-text--body-large,
.olx-text--body-medium {
line-height: var(--font-lineheight-superdistant);
}
.olx-text--body-medium {
font-size: var(--font-size-xs);
}
.olx-text--caption {
font-size: var(--font-size-xxxs);
line-height: var(--font-lineheight-medium);
}
.olx-text--light,
.olx-text--regular {
font-weight: var(--font-weight-regular);
}
.olx-text--semibold {
font-weight: var(--font-weight-semibold);
}
.olx-text--bold {
font-weight: var(--font-weight-bold);
}
.olx-text--inline {
display: inline;
}
.olx-text--block {
display: block;
}
.olx-text-input__input-container {
align-items: center;
background-color: var(--textinput-background-color-base);
border: none;
border-radius: var(--border-radius-xs);
box-shadow: 0 0 0 var(--border-width-hairline) var(--textinput-border-color-empty);
color: var(--textinput-color-font);
display: inline-flex;
position: relative;
width: 100%;
z-index: var(--z-index-1-default, 1);
}
.olx-text-input__input-container:hover {
box-shadow: 0 0 0 var(--border-width-thin) var(--textinput-border-color-empty-hover);
}
.olx-text-input__input-container--medium {
border-radius: var(--border-radius-sm);
}
.olx-text-input__input-field {
background-color: inherit;
border: none;
border-radius: var(--border-radius-xs);
color: var(--color-neutral-130);
font-family: var(--font-family);
font-size: var(--font-size-xxs);
font-weight: var(--font-weight-regular);
outline: none;
padding: var(--spacing-0-5) var(--spacing-1);
position: relative;
width: 100%;
}
.olx-text-input__input-field--medium {
border-radius: var(--border-radius-sm);
font-size: var(--font-size-xs);
line-height: var(--font-lineheight-distant);
padding: var(--spacing-1-5) var(--spacing-2);
}
.olx-text-input__input-field::placeholder {
color: var(--textinput-color-placeholder);
}
.olx-container {
background-color: var(--container-background-color);
border-radius: var(--border-radius-sm);
overflow: hidden;
padding: var(--spacing-2);
}
.olx-container--outlined {
border: var(--border-width-hairline) solid var(--container-border-color-outlined);
}
.olx-divider {
background-color: var(--divider-default-background-color);
border: none;
height: 1px;
margin: 0;
}
.olx-visually-hidden {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.olx-visually-hidden:focus {
clip: auto;
height: auto;
overflow: auto;
position: absolute;
width: auto;
}
.olx-image-carousel {
height: 100%;
padding: 0;
position: relative;
width: 100%;
}
.olx-image-carousel>span {
height: 24px;
left: 8px;
max-width: calc(100% - 16px);
position: absolute;
top: 8px;
z-index: var(--z-index-100-masked);
}
.olx-image-carousel span {
display: block;
text-overflow: ellipsis;
}
@media screen and (min-width:566px) {
.olx-image-carousel>span {
left: 16px;
top: 16px;
}
}
.olx-image-carousel__items {
align-items: center;
display: flex;
height: 100%;
justify-content: flex-start;
margin: 0;
overflow-x: scroll;
overflow-y: hidden;
padding: 0;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.olx-image-carousel__items::-webkit-scrollbar {
display: none;
}
.olx-image-carousel__item {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
list-style: none;
margin: 0;
min-width: 100%;
overflow: hidden;
padding: 0;
position: relative;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.olx-image-carousel__item * {
height: 100%;
width: 100%;
}
.olx-image-carousel__item img,
.olx-image-carousel__item picture {
display: block;
-o-object-fit: cover;
object-fit: cover;
}
.olx-image-carousel__counter-wrapper {
bottom: 6px;
position: absolute;
right: 8px;
}
.olx-ad-card {
background: var(--color-neutral-70);
border: 1px solid var(--color-neutral-90);
border-radius: var(--border-radius-sm);
cursor: pointer;
position: relative;
transition: box-shadow var(--transition-duration-2) var(--transition-timing-ease);
}
.olx-ad-card picture img {
transition: scale var(--transition-duration-5) var(--transition-timing-ease);
}
.olx-ad-card:hover {
box-shadow: var(--shadow-level-6);
}
.olx-ad-card:hover picture img {
scale: 1.1;
}
.olx-ad-card--vertical {
display: flex;
flex-direction: column;
max-width: 400px;
min-height: 100%;
min-width: 180px;
width: 100%;
}
.olx-ad-card--vertical .olx-image-carousel {
border-bottom: 0;
border-top-left-radius: var(--border-radius-sm);
border-top-right-radius: var(--border-radius-sm);
height: 180px;
overflow: hidden;
width: 100%;
}
.olx-ad-card__link-wrapper {
display: block;
height: 100%;
outline: none;
position: absolute;
top: 0;
width: 100%;
z-index: var(--z-index-1-default);
}
.olx-ad-card__link-wrapper:focus {
border-radius: var(--border-radius-sm);
outline: var(--border-width-hairline) solid var(--color-neutral-130);
outline-offset: var(--border-width-hairline);
}
.olx-ad-card__content {
border-radius: var(--border-radius-sm);
display: flex;
flex-direction: column;
padding: var(--spacing-2);
}
.olx-ad-card__content--vertical {
--carousel-height: 180px;
gap: var(--spacing-2);
height: calc(100% - var(--carousel-height));
}
.olx-ad-card__top {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
@media screen and (min-width:566px) {
.olx-ad-card__top {
flex-direction: row;
gap: var(--spacing-2);
}
}
.olx-ad-card__top--vertical {
flex-direction: column-reverse;
gap: var(--spacing-2);
justify-content: flex-end;
}
.olx-ad-card__title {
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
display: -webkit-box;
font-size: 14px;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
.olx-ad-card__title--vertical {
-webkit-line-clamp: 2;
--two-lines-height: 37px;
height: var(--two-lines-height);
}
.olx-ad-card__title-link {
color: inherit;
text-decoration: none;
}
.olx-ad-card__badges-items {
display: flex;
margin: 0;
margin-top: var(--spacing-1);
overflow: hidden;
padding: 0;
position: relative;
}
.olx-ad-card__badges-item {
list-style: none;
}
.olx-ad-card__badges-item+.olx-ad-card__badges-item {
padding-left: var(--spacing-1);
}
.olx-ad-card__badges-item>span {
display: flex;
white-space: nowrap;
}
.olx-ad-card__old-price {
color: var(--color-neutral-100);
text-decoration-line: line-through;
width: -moz-max-content;
width: max-content;
}
.olx-ad-card__price {
width: -moz-max-content;
width: max-content;
}
.olx-ad-card__details-ads {
display: flex;
flex-direction: column;
}
.olx-ad-card__bottom {
align-items: center;
display: flex;
justify-content: space-between;
width: 100%;
}
.olx-ad-card__bottom-content {
display: flex;
flex-direction: column;
overflow: hidden;
}
.olx-ad-card__location {
align-items: center;
display: flex;
flex-direction: row;
gap: var(--spacing-0-5);
margin-right: var(--spacing-6);
padding: 0;
}
.olx-ad-card__location--vertical {
align-items: flex-start;
flex-direction: column;
}
.olx-ad-card__location svg {
color: var(--color-neutral-120);
min-width: 16px;
}
.olx-ad-card__location p {
color: var(--color-neutral-120);
line-height: normal;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.olx-ad-card__location-date-container {
align-items: flex-start;
display: flex;
gap: var(--spacing-0-5);
width: 100%;
}
.olx-alertbox {
--background-color: var(--color-neutral-80);
--color: var(--color-neutral-130);
--svg-color: var(--color-neutral-120);
background-color: var(--background-color);
border-radius: var(--border-radius-sm);
color: var(--color);
display: flex;
flex-direction: column;
font-family: var(--font-family);
padding: var(--spacing-2);
}
.olx-alertbox svg {
color: var(--svg-color);
}
.olx-alertbox__content-wrapper {
display: flex;
}
.olx-alertbox__icon-wrapper {
height: 24px;
width: 24px;
}
.olx-alertbox__content {
display: flex;
flex-direction: column;
margin-left: var(--spacing-2);
}
.olx-alertbox__description {
display: inline;
font-size: var(--font-size-xxs);
font-weight: var(--font-weight-regular);
}
@media screen and (min-width:840px) {
.olx-alertbox__description {
font-size: var(--font-size-xs);
}
}
.olx-alertbox__title {
align-items: center;
display: flex;
font-size: var(--font-size-xxs);
font-weight: var(--font-weight-semibold);
line-height: 24px;
word-break: break-word;
}
@media screen and (min-width:840px) {
.olx-alertbox__title {
font-size: var(--font-size-xs);
}
}
.olx-badge {
align-items: center;
background: var(--badge-background-color);
color: var(--badge-color);
display: inline-flex;
font-family: var(--font-family);
font-weight: var(--font-weight-semibold);
overflow: hidden;
white-space: nowrap;
}
.olx-badge:not(.olx-badge--no-gap) {
-moz-column-gap: var(--spacing-1);
column-gap: var(--spacing-1);
}
.olx-badge--small {
border-radius: var(--border-radius-xs);
font-size: var(--font-size-xxxs);
}
.olx-badge--small {
padding: var(--spacing-0-5) var(--spacing-1);
}
.olx-badge--success {
--badge-background-color: var(--color-feedback-success-80);
--badge-color: var(--color-feedback-success-120);
}
.olx-badge--info {
--badge-background-color: var(--color-feedback-info-80);
--badge-color: var(--color-feedback-info-110);
}
.olx-badge svg {
max-height: 16px;
max-width: 16px;
}
.olx-autocomplete {
position: relative;
}
.olx-carousel {
position: relative;
}
.olx-carousel__viewport {
overflow: hidden;
}
.olx-carousel__content {
display: flex;
}
.olx-carousel__next {
right: -24px;
}
.olx-carousel__next {
align-items: center;
background-color: transparent;
border: 0;
border-radius: var(--border-radius-circle);
color: var(--carousel-arrow-color);
cursor: pointer;
display: flex;
height: 48px;
justify-content: center;
outline: 0;
padding: var(--spacing-0-5);
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
z-index: var(--z-index-300-sticky, 300);
}
.olx-carousel__next:hover span {
background-color: var(--carousel-arrow-background-color-hover);
}
.olx-carousel__next--hide-on-mobile {
display: none;
}
@media screen and (min-width:840px) {
.olx-carousel__next--hide-on-mobile {
display: flex;
}
}
.olx-carousel__arrow-icon {
align-items: center;
background-color: var(--carousel-arrow-background-color-base);
border-radius: var(--border-radius-circle);
box-shadow: var(--shadow-level-2);
}
.olx-carousel__arrow-icon,
.olx-modal {
display: flex;
height: 100%;
justify-content: center;
width: 100%;
}
.olx-modal {
align-items: flex-end;
background-color: rgba(0, 0, 0, .333);
border: 0;
opacity: 0;
pointer-events: none;
position: fixed;
right: 0;
top: 0;
transition: opacity var(--transition-timing-ease) var(--transition-duration-3);
visibility: hidden;
will-change: transform;
z-index: var(--z-index-900-modal, 900);
}
@media screen and (min-width:840px) {
.olx-modal {
align-items: center;
}
}
.olx-modal__dialog {
background-color: var(--modal-background-color);
border-radius: var(--border-radius-md);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
display: flex;
flex-direction: column;
max-height: var(--modal-max-height);
max-width: 100%;
min-height: 200px;
opacity: 0;
padding: var(--spacing-3) var(--spacing-4);
position: relative;
transform: translateY(100%) scale(.9);
transition: all var(--transition-timing-ease) var(--transition-duration-3);
width: 100%;
}
@media screen and (min-width:840px) {
.olx-modal__dialog {
border-radius: var(--border-radius-md);
max-width: var(--modal-max-width);
transform: translateY(10%) scale(.9);
}
}
.olx-modal__content {
background-color: var(--color-neutral-70);
display: flex;
flex-direction: column;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.olx-modal__content::-webkit-scrollbar {
width: 10px;
}
.olx-modal__content::-webkit-scrollbar-track {
background: var(--color-neutral-80);
border-radius: var(--border-radius-md);
}
.olx-modal__content::-webkit-scrollbar-thumb {
background: var(--color-neutral-90);
border-radius: var(--border-radius-md);
}
.olx-modal__content::-webkit-scrollbar-thumb:hover {
background: var(--color-neutral-110);
}
.olx-modal__close-button {
align-items: center;
align-self: flex-end;
background-color: transparent;
border: none;
border-radius: var(--border-radius-pill);
color: var(--modal-button-color);
cursor: pointer;
display: flex;
height: 48px;
justify-content: center;
min-height: 48px;
width: 48px;
}
.olx-modal__close-button:hover {
background-color: var(--modal-button-background-color-hover);
}
.olx-logo-olx {
min-height: 12px;
min-width: 12px;
width: 100%;
}
.olx-logo-olx--o {
fill: var(--color-secondary-100);
}
.olx-logo-olx--l {
fill: var(--color-feedback-success-90);
}
.olx-logo-olx--x {
fill: var(--color-primary-100);
}
.olx-default-footer {
border-top: 1px solid var(--divider-default-background-color);
padding: var(--spacing-2) var(--spacing-2) var(--spacing-8);
}
@media screen and (min-width:840px) {
.olx-default-footer {
padding: var(--spacing-2) var(--spacing-4) var(--spacing-3);
}
}
@media screen and (min-width:1200px) {
.olx-default-footer {
padding: var(--spacing-2) var(--spacing-9) var(--spacing-3);
}
}
@media screen and (min-width:1720px) {
.olx-default-footer {
display: grid;
grid-template-columns: 1576px;
justify-content: center;
}
}
.olx-default-footer__links-container {
flex-direction: column;
gap: var(--spacing-2);
padding-bottom: var(--spacing-2);
}
@media screen and (min-width:840px) {
.olx-default-footer__links-container {
flex-direction: row;
gap: var(--spacing-4);
}
}
.olx-static-footer__links-container {
display: flex;
flex-direction: column;
gap: var(--spacing-3);
padding-top: var(--spacing-2);
}
@media screen and (min-width:1200px) {
.olx-static-footer__links-container {
display: grid;
grid-template-columns: 1fr auto;
}
}
.olx-static-footer__legal-container,
.olx-static-footer__legal-container-links {
display: flex;
flex-direction: column;
justify-content: center;
row-gap: var(--spacing-1-5);
}
@media screen and (min-width:840px) {
.olx-static-footer__legal-container-links {
-moz-column-gap: var(--spacing-2);
column-gap: var(--spacing-2);
flex-direction: row;
justify-content: flex-start;
}
}
.olx-static-footer__social-container {
display: grid;
gap: var(--spacing-1);
grid-template-columns: repeat(3, 48px);
grid-template-rows: repeat(2, 48px);
justify-content: center;
}
@media screen and (min-width:600px) {
.olx-static-footer__social-container {
grid-template-columns: repeat(6, 48px);
grid-template-rows: 48px;
}
}
@media screen and (min-width:1200px) {
.olx-static-footer__social-container {
justify-content: flex-end;
}
}
.olx-static-footer__legal-container-address {
display: block;
text-align: center;
}
@media screen and (min-width:840px) {
.olx-static-footer__legal-container-address {
text-align: left;
}
}
.olx-static-footer__icon-wrapper {
align-items: center;
display: inline-flex;
height: 48px;
justify-content: center;
width: 48px;
}
.olx-static-footer__social-link {
border-radius: 100%;
padding: var(--spacing-1);
transition: all .3s ease;
}
.olx-static-footer__social-link:active svg,
.olx-static-footer__social-link:hover svg {
color: var(--color-neutral-70);
}
.olx-static-footer__facebook-link:active,
.olx-static-footer__facebook-link:hover {
background-color: #3a5998;
}
.olx-static-footer__youtube-link:active,
.olx-static-footer__youtube-link:hover {
background-color: red;
}
.olx-static-footer__tiktok-link:active,
.olx-static-footer__tiktok-link:hover {
background-color: #040000;
}
.olx-static-footer__linkedin-link:active,
.olx-static-footer__linkedin-link:hover {
background-color: #0084bf;
}
.olx-static-footer__instagram-link:active,
.olx-static-footer__instagram-link:hover {
background-color: #e1306c;
}
.olx-static-footer__twitter-link:active,
.olx-static-footer__twitter-link:hover {
background-color: #040000;
}
.olx-header {
display: flex;
flex-direction: column;
font-family: var(--font-family);
justify-content: center;
position: relative;
z-index: var(--z-index-400-header, 400);
}
.olx-header__skip-links {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.olx-header__skip-links:focus {
clip: auto;
background-color: var(--color-neutral-70);
box-shadow: 0 0 0 2px var(--color-neutral-70);
color: var(--color-neutral-130);
display: inline-block;
height: 50px;
left: 0;
outline: var(--border-width-thin) solid var(--color-neutral-130);
overflow: initial;
top: 50%;
transform: translateY(-50%);
transition: none;
white-space: normal;
width: 60px;
z-index: 2;
}
.olx-header__main-menu {
background-color: var(--color-neutral-70);
border-bottom: 1px solid var(--color-neutral-90);
display: flex;
flex-direction: column;
justify-content: center;
min-height: 80px;
padding: var(--spacing-2) var(--spacing-2);
transition: transform var(--transition-duration-5) var(--transition-timing-ease-in-out);
}
@media screen and (min-width:840px) {
.olx-header__main-menu {
padding: var(--spacing-2) var(--spacing-4);
}
}
@media screen and (min-width:1200px) {
.olx-header__main-menu {
padding: var(--spacing-2) var(--spacing-9);
}
}
.olx-header__items {
align-items: center;
display: flex;
margin: 0;
padding: 0;
}
@media screen and (min-width:1200px) {
.olx-header__items {
-moz-column-gap: var(--spacing-2);
column-gap: var(--spacing-2);
}
}
@media screen and (min-width:1500px) {
.olx-header__items {
-moz-column-gap: var(--spacing-3);
column-gap: var(--spacing-3);
}
}
.olx-header__icon-button {
align-items: center;
background-color: transparent;
border: none;
color: var(--color-neutral-130);
cursor: pointer;
display: flex;
height: 48px;
justify-content: center;
margin: 0;
outline: none;
padding: 0;
width: 48px;
}
.olx-header__icon-button :hover {
color: var(--link-color-main-hover);
}
.olx-header__icon-button :focus {
border-radius: var(--border-radius-xxs);
outline: var(--border-width-thin) solid var(--color-neutral-130);
}
.olx-header__item {
align-items: center;
display: flex;
list-style: none;
}
.olx-header__item[data-variant=anunciar] {
margin-left: var(--spacing-1-5);
}
@media screen and (max-width:1200px) {
.olx-header__item[data-myads=true],
.olx-header__item[data-professional=true] {
display: none;
}
}
@media screen and (min-width:1200px) {
.olx-header__item[data-variant=anunciar] {
margin-left: 0;
}
}
.olx-header__link {
-moz-column-gap: var(--spacing-1);
column-gap: var(--spacing-1);
}
@media screen and (max-width:1200px) {
.olx-header__link {
padding: 12px;
}
}
.olx-header__link:hover {
text-decoration: none;
}
.olx-header__primary-menu {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 0 auto;
max-width: 1576px;
width: 100%;
}
.olx-header__burger-menu {
height: 48px;
justify-content: flex-start;
width: 48px;
}
.olx-header__burger-menu:focus {
border-radius: var(--border-radius-xxs);
outline: var(--color-neutral-130) solid var(--border-width-thin);
}
@media screen and (max-width:360px) {
.olx-header__burger-menu {
height: 44px;
width: 44px;
}
}
@media screen and (min-width:840px) {
.olx-header__burger-menu {
display: none;
}
}
.olx-header__column-left {
align-items: center;
display: flex;
flex: 1;
position: relative;
}
.olx-header__column-right {
display: flex;
transition: all var(--transition-duration-5) var(--transition-timing-ease);
}
.olx-header__olx-container {
align-items: center;
color: var(--color-neutral-130);
-moz-column-gap: 32px;
column-gap: 32px;
display: flex;
font-size: var(--font-size-xxs);
height: 48px;
width: 48px;
}
.olx-header__logo-wrapper {
height: 24px;
width: 24px;
}
@media screen and (max-width:1200px) {
.olx-header__label {
clip: rect(1px, 1px, 1px, 1px);
display: flex;
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.olx-header__label[data-variant=chat],
.olx-header__label[data-variant=notification] {
clip: auto;
display: initial;
height: auto;
overflow: initial;
position: static;
white-space: normal;
width: auto;
}
}
@media screen and (max-width:840px) {
.olx-header__label[data-variant=chat],
.olx-header__label[data-variant=notification] {
clip: rect(1px, 1px, 1px, 1px);
display: flex;
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
}
.olx-header__desapegar-button {
font-size: var(--font-size-xxs);
}
@media screen and (max-width:840px) {
.olx-header__desapegar-button {
height: 36px;
padding: var(--spacing-1) var(--spacing-2);
}
}
.olx-header__profile-item {
align-items: center;
display: flex;
list-style: none;
}
.olx-header__profile-link {
align-items: center;
background-color: transparent;
border: 0;
border: 1px solid var(--color-neutral-90);
border-radius: var(--border-radius-pill);
color: var(--color-neutral-130);
cursor: pointer;
display: flex;
font-family: var(--font-family);
font-size: var(--font-size-xxs);
font-weight: var(--font-weight-semibold);
height: 40px;
justify-content: center;
line-height: var(--font-lineheight-medium);
padding: var(--spacing-0-5);
transition: all ease var(--transition-duration-3);
width: 135px;
}
.olx-header__profile-link:hover {
border-color: var(--color-secondary-100);
color: var(--link-color-main-hover);
text-decoration: none;
}
.olx-header__profile-link:focus {
border-radius: var(--border-radius-pill);
box-shadow: none;
outline: var(--border-width-thin) solid var(--color-neutral-130);
}
@media screen and (max-width:840px) {
.olx-header__profile-link {
display: none;
}
}
.olx-header__search {
margin-left: var(--spacing-3);
margin-right: var(--spacing-1-5);
width: 100%;
}
@media screen and (min-width:840px) {
.olx-header__search {
margin-right: var(--spacing-3);
}
}
@media screen and (max-width:840px) {
.olx-header__search[data-hasnavbar=false],
.olx-header__search[data-hasnavbar=false] .olx-text-input__input-field {
display: none;
}
}
.olx-header__search-fluid {
padding-left: var(--spacing-3);
padding-right: var(--spacing-3);
padding-top: var(--spacing-2);
width: 100%;
}
@media screen and (min-width:840px) {
.olx-header__search-fluid,
.olx-header__search-fluid .olx-text-input__input-field {
display: none;
}
}
@media screen and (max-width:840px) {
.olx-header__search-fluid {
padding-left: 0;
padding-right: 0;
}
}
.olx-header__overlay {
background: var(--color-neutral-130);
height: calc(100vh - 100%);
height: calc(100svh - 100%);
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transition: opacity 1s ease;
width: 100%;
}
@media screen and (min-width:840px) {
.olx-header__overlay {
display: none;
}
}
.olx-header__overflow {
background-color: var(--color-neutral-70);
box-shadow: var(--shadow-level-2);
height: 0;
list-style: none;
opacity: 0;
padding-bottom: 2px;
padding-top: 2px;
pointer-events: none;
position: absolute;
scroll-behavior: smooth;
top: 64px;
transition: transform ease var(--transition-duration-3), opacity ease var(--transition-duration-3);
width: 280px;
z-index: var(--z-index-700-overlay);
}
@media screen and (min-width:840px) {
.olx-header__overflow {
border-radius: var(--border-radius-sm);
}
.olx-header__overflow[data-islogged=false] {
display: none;
}
}
@media screen and (max-width:840px) {
.olx-header__overflow:not([data-hasnavbar=true]) {
border-radius: 0;
height: calc(100vh - 100%);
height: calc(100svh - 100%);
left: 0;
overflow: hidden;
padding-bottom: 50px;
top: 100%;
transform: translateX(-100%);
}
}
.olx-header__overflow-item[data-divider=true] {
border-bottom: 1px solid var(--color-neutral-90);
margin-bottom: var(--spacing-0-5);
}
.olx-header__overflow-link {
color: var(--color-neutral-130);
-moz-column-gap: 16px;
column-gap: 16px;
cursor: pointer;
display: inline-flex;
font-size: var(--font-size-xxs);
justify-content: flex-start;
padding: var(--spacing-2);
position: relative;
text-decoration: none;
transition: all ease var(--transition-duration-3);
width: 100%;
}
.olx-header__overflow-link:hover {
background: var(--color-neutral-80);
text-decoration: none;
}
.olx-header__overflow-link:focus {
transform: scale(.98);
}
.olx-color-primary-100 {
color: var(--color-primary-100);
}
.olx-color-secondary-100 {
color: var(--color-secondary-100);
}
.olx-color-neutral-70 {
color: var(--color-neutral-70);
}
.olx-color-neutral-100 {
color: var(--color-neutral-100);
}
.olx-color-neutral-120 {
color: var(--color-neutral-120);
}
.olx-color-feedback-success-120 {
color: var(--color-feedback-success-120);
}
.olx-d-flex {
display: flex;
}
.olx-ai-flex-start {
align-items: flex-start;
}
.olx-ai-center {
align-items: center;
}
.olx-fd-row {
flex-direction: row;
}
.olx-fd-column {
flex-direction: column;
}
.olx-fd-column-reverse {
flex-direction: column-reverse;
}
.olx-jc-flex-start {
justify-content: flex-start;
}
.olx-jc-center {
justify-content: center;
}
.olx-jc-space-between {
justify-content: space-between;
}
.olx-ml-0-5 {
margin-left: var(--spacing-0-5);
}
.olx-ml-1 {
margin-left: var(--spacing-1);
}
.olx-ml-2 {
margin-left: var(--spacing-2);
}
.olx-mr-2 {
margin-right: var(--spacing-2);
}
.olx-mt-1 {
margin-top: var(--spacing-1);
}
.olx-mt-2 {
margin-top: var(--spacing-2);
}
.olx-mt-3 {
margin-top: var(--spacing-3);
}
.olx-mb-2 {
margin-bottom: var(--spacing-2);
}
.olx-mb-3 {
margin-bottom: var(--spacing-3);
}
.olx-mb-4 {
margin-bottom: var(--spacing-4);
}
.olx-pl-1 {
padding-left: var(--spacing-1);
}
.olx-pr-1 {
padding-right: var(--spacing-1);
}
.olx-pt-6 {
padding-top: var(--spacing-6);
}
.olx-pb-4 {
padding-bottom: var(--spacing-4);
}
.olx-mb-stack-quarck {
margin-bottom: var(--spacing-stack-quarck);
}
.ajfs2S {
align-items: center;
background: transparent;
border: none;
border-radius: var(--border-radius-lg);
cursor: pointer;
display: flex;
height: 44px;
justify-content: center;
outline: none;
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
transition: var(--transition-duration-2);
width: 44px;
z-index: var(--z-index-1-default);
}
.ajfs2S svg {
color: var(--color-neutral-130);
}
.ajfs2S:active,
.ajfs2S:hover {
background: var(--color-neutral-90);
}
.ajfs2S:focus {
outline: var(--color-secondary-100) solid var(--border-width-thin);
}
._2dsuYh {
align-items: center;
display: flex;
height: 32px;
justify-content: center;
width: 32px;
}
.S6FMF5 {
height: 48px;
margin: 0;
position: relative;
}
.S6FMF5 input {
padding-right: var(--spacing-6);
}
.rec-gallery-galleries,
.rec-gallery-gallery {
display: flex;
flex-direction: column;
}
.rec-gallery-gallery+.rec-gallery-gallery {
margin-top: var(--spacing-6);
}
.rec-gallery-carousel__viewport {
margin-left: calc(var(--spacing-1)*-1);
padding-left: var(--spacing-0-25);
}
.rec-gallery-carousel__slide {
flex: 0 0 240px;
min-width: 0;
padding: var(--spacing-0-25);
padding-left: var(--spacing-2);
position: relative;
}
@media screen and (min-width:840px) {
.rec-gallery-carousel__slide {
flex: 0 0 25%;
}
}
@media screen and (min-width:1200px) {
.rec-gallery-carousel__slide {
flex: 0 0 20%;
}
}
@media screen and (min-width:1500px) {
.rec-gallery-carousel__slide {
flex: 0 0 16.66%;
}
}
.rec-gallery-carousel__slide[data-reduced=true] {
flex: 0 0 240px;
}
.rec-gallery-adcard {
height: 396px;
}
.rec-gallery-title__wrapper {
display: flex;
justify-content: space-between;
margin-bottom: var(--spacing-3);
width: 100%;
}
*,
:before,
:after {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: currentColor;
}
:before,
:after {
--tw-content: "";
}
html {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
font-feature-settings: normal;
font-variation-settings: normal;
}
body {
margin: 0;
line-height: inherit;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
h1,
h2,
h3 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
text-decoration: inherit;
}
button,
input {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
button {
text-transform: none;
}
button,
[type=button] {
-webkit-appearance: button;
background-color: transparent;
background-image: none;
}
h1,
h2,
h3,
hr,
p {
margin: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
input::placeholder {
opacity: 1;
color: #9ca3af;
}
button,
[role=button] {
cursor: pointer;
}
:disabled {
cursor: default;
}
img,
svg,
iframe {
display: block;
vertical-align: middle;
}
img {
max-width: 100%;
height: auto;
}
*,
:before,
:after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scroll-snap-strictness: proximity;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
}
*,
:before,
:after {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: currentColor;
}
:before,
:after {
--tw-content: "";
}
html {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
font-feature-settings: normal;
font-variation-settings: normal;
}
body {
margin: 0;
line-height: inherit;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
h1,
h2,
h3 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
text-decoration: inherit;
}
button,
input {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
button {
text-transform: none;
}
button,
[type=button] {
-webkit-appearance: button;
background-color: transparent;
background-image: none;
}
h1,
h2,
h3,
hr,
p {
margin: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
input::placeholder {
opacity: 1;
color: #9ca3af;
}
button,
[role=button] {
cursor: pointer;
}
:disabled {
cursor: default;
}
img,
svg,
iframe {
display: block;
vertical-align: middle;
}
img {
max-width: 100%;
height: auto;
}
*,
:before,
:after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scroll-snap-strictness: proximity;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
}
*,
:before,
:after {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: currentColor;
}
:before,
:after {
--tw-content: "";
}
html {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
font-feature-settings: normal;
font-variation-settings: normal;
}
body {
margin: 0;
line-height: inherit;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
h1,
h2,
h3 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
text-decoration: inherit;
}
button,
input {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
button {
text-transform: none;
}
button,
[type=button] {
-webkit-appearance: button;
background-color: transparent;
background-image: none;
}
h1,
h2,
h3,
hr,
p {
margin: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
input::placeholder {
opacity: 1;
color: #9ca3af;
}
button,
[role=button] {
cursor: pointer;
}
:disabled {
cursor: default;
}
img,
svg,
iframe {
display: block;
vertical-align: middle;
}
img {
max-width: 100%;
height: auto;
}
*,
:before,
:after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scroll-snap-strictness: proximity;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / .5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
}
.eqqGqr {
display: none;
}
@media (min-width: 52.5em) {
.eqqGqr {
display: block;
}
}
.vKKEq {
display: none;
}
@media (min-width: 45em) {
.vKKEq {
display: block;
}
}
.ckFhRN {
display: none;
}
@media (min-width: 1em) {
.ckFhRN {
display: block;
}
}
@media (min-width: 52.5em) {
.ckFhRN {
display: block;
}
}
.dFeJTI {
display: block;
}
@media (min-width: 52.5em) {
.dFeJTI {
display: none;
}
}
@media (min-width: 52.5em) {
.eZENlu {
display: none;
}
}
@media (min-width: 1em) and (max-width: 52.4375em) {
.bidUvU {
display: none;
}
}
.qaqUu {
width: 100%;
}
@media (min-width: 1em) {
.qaqUu {
height: 2px;
width: 2px;
}
}
@media (min-width: 52.5em) {
.qaqUu {
height: 8px;
width: 8px;
}
}
.jZvhZY {
width: 100%;
}
@media (min-width: 1em) {
.jZvhZY {
height: 24px;
width: 24px;
}
}
@media (min-width: 52.5em) {
.jZvhZY {
height: 24px;
width: 24px;
}
}
.YSXKQ {
width: 100%;
}
@media (min-width: 1em) {
.YSXKQ {
height: 24px;
width: 24px;
}
}
@media (min-width: 52.5em) {
.YSXKQ {
height: 32px;
width: 32px;
}
}
.VkedQ {
width: 100%;
}
@media (min-width: 1em) {
.VkedQ {
height: 24px;
width: 24px;
}
}
.iCkJT {
width: 100%;
}
@media (min-width: 52.5em) {
.iCkJT {
height: 4px;
width: 4px;
}
}
.jjAoYZ {
width: 100%;
}
@media (min-width: 1em) {
.jjAoYZ {
height: 32px;
width: 32px;
}
}
.fRFGxf {
width: 100%;
}
@media (min-width: 1em) {
.fRFGxf {
height: 16px;
width: 16px;
}
}
.eTAynA {
width: 100%;
}
@media (min-width: 1em) {
.eTAynA {
height: 8px;
width: 8px;
}
}
.ccoOnh {
width: 100%;
}
@media (min-width: 1em) {
.ccoOnh {
height: 32px;
width: 32px;
}
}
@media (min-width: 52.5em) {
.ccoOnh {
height: 8px;
width: 8px;
}
}
.jtSpqv {
width: 100%;
}
@media (min-width: 1em) {
.jtSpqv {
height: 32px;
width: 32px;
}
}
@media (min-width: 52.5em) {
.jtSpqv {
height: 16px;
width: 16px;
}
}
.dmeyOb {
width: 100%;
}
@media (min-width: 1em) {
.dmeyOb {
height: 8px;
width: 8px;
}
}
@media (min-width: 52.5em) {
.dmeyOb {
height: 16px;
width: 16px;
}
}
.gbSaoO {
width: 100%;
}
@media (min-width: 1em) {
.gbSaoO {
height: 8px;
width: 8px;
}
}
@media (min-width: 52.5em) {
.gbSaoO {
height: 32px;
width: 32px;
}
}
.jZVVT {
width: 100%;
}
@media (min-width: 1em) {
.jZVVT {
height: 32px;
width: 32px;
}
}
@media (min-width: 52.5em) {
.jZVVT {
height: 32px;
width: 32px;
}
}
.kyiLNg {
width: 100%;
}
@media (min-width: 52.5em) {
.kyiLNg {
height: 32px;
width: 32px;
}
}
@media (min-width: 1em) {
.bTEwpS {
order: 0;
}
}
@media (min-width: 1em) {
.bgoMCM {
order: 1;
}
}
@media (min-width: 1em) {
.iwowFd {
order: 2;
}
}
@media (min-width: 52.5em) {
.iwowFd {
order: 1;
}
}
@media (min-width: 1em) {
.eXkntI {
order: 4;
}
}
@media (min-width: 52.5em) {
.eXkntI {
order: 3;
}
}
@media (min-width: 1em) {
.biWSIX {
order: 9;
}
}
@media (min-width: 52.5em) {
.biWSIX {
order: 5;
}
}
@media (min-width: 1em) {
.fJvuvt {
order: 11;
}
}
@media (min-width: 52.5em) {
.fJvuvt {
order: 7;
}
}
@media (min-width: 1em) {
.jMBOCG {
order: 14;
}
}
@media (min-width: 52.5em) {
.jMBOCG {
order: 13;
}
}
@media (min-width: 1em) {
.duuEbc {
order: 18;
}
}
@media (min-width: 52.5em) {
.duuEbc {
order: 16;
}
}
@media (min-width: 1em) {
.kRruSJ {
order: 20;
}
}
@media (min-width: 52.5em) {
.kRruSJ {
order: 18;
}
}
@media (min-width: 1em) {
.gVgMGW {
order: 22;
}
}
@media (min-width: 52.5em) {
.gVgMGW {
order: 20;
}
}
@media (min-width: 1em) {
.fehGuf {
order: 24;
}
}
@media (min-width: 52.5em) {
.fehGuf {
order: 22;
}
}
@media (min-width: 1em) {
.bjPHHm {
order: 26;
}
}
@media (min-width: 52.5em) {
.bjPHHm {
order: 24;
}
}
@media (min-width: 1em) {
.jHOiUX {
order: 28;
}
}
@media (min-width: 52.5em) {
.jHOiUX {
order: 26;
}
}
@media (min-width: 52.5em) {
.eHwusb {
order: 29;
}
}
@media (min-width: 1em) {
.jxfkIO {
order: 3;
}
}
@media (min-width: 52.5em) {
.jxfkIO {
order: 6;
}
}
@media (min-width: 1em) {
.hVBMMM {
order: 5;
}
}
@media (min-width: 52.5em) {
.hVBMMM {
order: 8;
}
}
@media (min-width: 1em) {
.kpCWBk {
order: 6;
}
}
@media (min-width: 52.5em) {
.kpCWBk {
order: 10;
}
}
@media (min-width: 1em) {
.eUxWSm {
order: 7;
}
}
@media (min-width: 1em) {
.ipeowV {
order: 8;
}
}
@media (min-width: 52.5em) {
.ipeowV {
order: 0;
}
}
@media (min-width: 1em) {
.hpznci {
order: 10;
}
}
@media (min-width: 1em) {
.ldCVRg {
order: 12;
}
}
@media (min-width: 1em) {
.hIQvOE {
order: 13;
}
}
@media (min-width: 1em) {
.WTzEA {
order: 15;
}
}
@media (min-width: 52.5em) {
.WTzEA {
order: 17;
}
}
@media (min-width: 1em) {
.ikhjpf {
order: 19;
}
}
@media (min-width: 52.5em) {
.ikhjpf {
order: 21;
}
}
@media (min-width: 1em) {
.eufdoK {
order: 23;
}
}
@media (min-width: 52.5em) {
.eufdoK {
order: 25;
}
}
@media (min-width: 1em) {
.gyFliR {
order: 27;
}
}
@media (min-width: 1em) {
.bJFnSS {
order: 16;
}
}
@media (min-width: 52.5em) {
.bJFnSS {
order: 11;
}
}
@media (min-width: 1em) {
.izJjFH {
order: 17;
}
}
@media (min-width: 52.5em) {
.izJjFH {
order: 12;
}
}
@media (min-width: 1em) {
.dmSScE {
order: 21;
}
}
@media (min-width: 52.5em) {
.dmSScE {
order: 19;
}
}
@media (min-width: 1em) {
.gWUwFL {
order: 25;
}
}
@media (min-width: 52.5em) {
.gWUwFL {
order: 23;
}
}
@media (min-width: 1em) {
.jbSupI {
order: 29;
}
}
@media (min-width: 52.5em) {
.jbSupI {
order: 27;
}
}
@media (min-width: 1em) {
.bRvyBK {
order: 30;
}
}
@media (min-width: 52.5em) {
.bRvyBK {
order: 28;
}
}
@media (min-width: 52.5em) {
.hMpuIj {
order: 2;
}
}
@media (min-width: 52.5em) {
.blJUlT {
order: 4;
}
}
@media (min-width: 52.5em) {
.gHUNGR {
order: 9;
}
}
@media (min-width: 52.5em) {
.bWQuzC {
order: 14;
}
}
@media (min-width: 52.5em) {
.bJBjGa {
order: 15;
}
}
@media (min-width: 1em) {
.eOOSgR {
order: 0;
}
}
@media (min-width: 52.5em) {
.eOOSgR {
order: 2;
}
}
@media (min-width: 1em) {
.eNYuAb {
order: 2;
}
}
@media (min-width: 52.5em) {
.eNYuAb {
order: 5;
}
}
@media (min-width: 1em) {
.cqVNVF {
order: 5;
}
}
@media (min-width: 52.5em) {
.cqVNVF {
order: 7;
}
}
@media (min-width: 1em) {
.hdSEbB {
order: 9;
}
}
@media (min-width: 52.5em) {
.hdSEbB {
order: 10;
}
}
@media (min-width: 1em) {
.fWWdwl {
order: 11;
}
}
@media (min-width: 1em) {
.cjdioF {
order: 3;
}
}
@media (min-width: 52.5em) {
.cjdioF {
order: 3;
}
}
@media (min-width: 1em) {
.gPstkR {
order: 4;
}
}
@media (min-width: 52.5em) {
.gPstkR {
order: 4;
}
}
@media (min-width: 1em) {
.kBsbVK {
order: 6;
}
}
@media (min-width: 1em) {
.hQZMji {
order: 7;
}
}
@media (min-width: 52.5em) {
.hQZMji {
order: 8;
}
}
@media (min-width: 1em) {
.ilTMJK {
order: 8;
}
}
@media (min-width: 1em) {
.igguHp {
order: 12;
}
}
@media (min-width: 52.5em) {
.igguHp {
order: 11;
}
}
@media (min-width: 52.5em) {
.kwBCR {
order: 0;
}
}
@media (min-width: 52.5em) {
.islsjX {
order: 1;
}
}
@media (min-width: 52.5em) {
.dqVBIN {
order: 6;
}
}
.lbubah {
box-sizing: border-box;
display: flex;
flex: 1 0 auto;
flex-flow: wrap;
}
@media only screen and (min-width: 1rem) {
.lbubah {
margin-left: -0.5rem;
margin-right: -0.5rem;
}
}
@media only screen and (min-width: 37.5rem) {
.lbubah {
margin-left: -0.5rem;
margin-right: -0.5rem;
}
}
@media only screen and (min-width: 45rem) {
.lbubah {
margin-left: -0.75rem;
margin-right: -0.75rem;
}
}
@media only screen and (min-width: 52.5rem) {
.lbubah {
margin-left: -0.75rem;
margin-right: -0.75rem;
}
}
@media only screen and (min-width: 79.5rem) {
.lbubah {
margin-left: -0.75rem;
margin-right: -0.75rem;
}
}
.eMnLDp {
box-sizing: border-box;
flex: 1 0 auto;
max-width: 100%;
display: flex;
flex-direction: column;
}
@media only screen and (min-width: 1rem) {
.eMnLDp {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
}
@media only screen and (min-width: 37.5rem) {
.eMnLDp {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
}
@media only screen and (min-width: 45rem) {
.eMnLDp {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 52.5rem) {
.eMnLDp {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 71.19rem) {
.eMnLDp {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 78.69rem) {
.eMnLDp {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 79.5rem) {
.eMnLDp {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 91.19rem) {
.eMnLDp {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 103.69rem) {
.eMnLDp {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 116.82rem) {
.eMnLDp {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 1rem) {
.eMnLDp {
flex: 1 1 100%;
max-width: 100%;
}
}
@media only screen and (min-width: 45rem) {
.eMnLDp {
flex: 1 1 25%;
max-width: 25%;
}
}
@media only screen and (min-width: 52.5rem) {
.eMnLDp {
flex: 1 1 25%;
max-width: 25%;
}
}
@media only screen and (min-width: 71.19rem) {
.eMnLDp {
flex: 1 1 33.3333%;
max-width: 33.3333%;
}
}
@media only screen and (min-width: 78.69rem) {
.eMnLDp {
flex: 1 1 33.3333%;
max-width: 33.3333%;
}
}
@media only screen and (min-width: 79.5rem) {
.eMnLDp {
flex: 1 1 33.3333%;
max-width: 33.3333%;
}
}
@media only screen and (min-width: 91.19rem) {
.eMnLDp {
flex: 1 1 33.3333%;
max-width: 33.3333%;
}
}
@media only screen and (min-width: 103.69rem) {
.eMnLDp {
flex: 1 1 25%;
max-width: 25%;
}
}
@media only screen and (min-width: 116.82rem) {
.eMnLDp {
flex: 1 1 25%;
max-width: 25%;
}
}
.dTdtCa {
margin-right: auto;
margin-left: auto;
max-width: 100%;
box-sizing: border-box;
}
@media only screen and (min-width: 1rem) {
.dTdtCa {
padding-left: 1rem;
padding-right: 1rem;
}
}
@media only screen and (min-width: 37.5rem) {
.dTdtCa {
padding-left: 1rem;
padding-right: 1rem;
}
}
@media only screen and (min-width: 45rem) {
.dTdtCa {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media only screen and (min-width: 52.5rem) {
.dTdtCa {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media only screen and (min-width: 79.5rem) {
.dTdtCa {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media only screen and (min-width: 1rem) {
.dTdtCa {
width: 100%;
}
}
@media only screen and (min-width: 37.5rem) {
.dTdtCa {
width: 100%;
}
}
@media only screen and (min-width: 45rem) {
.dTdtCa {
width: 100%;
}
}
@media only screen and (min-width: 52.5rem) {
.dTdtCa {
width: 79.5rem;
}
}
@media only screen and (min-width: 79.5rem) {
.dTdtCa {
width: 79.5rem;
}
}
.lpoEoZ {
box-sizing: border-box;
flex: 1 0 auto;
max-width: 100%;
display: flex;
flex-direction: column;
}
@media only screen and (min-width: 1rem) {
.lpoEoZ {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
}
@media only screen and (min-width: 37.5rem) {
.lpoEoZ {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
}
@media only screen and (min-width: 45rem) {
.lpoEoZ {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 52.5rem) {
.lpoEoZ {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 71.19rem) {
.lpoEoZ {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 78.69rem) {
.lpoEoZ {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 79.5rem) {
.lpoEoZ {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 91.19rem) {
.lpoEoZ {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 103.69rem) {
.lpoEoZ {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 116.82rem) {
.lpoEoZ {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 79.5rem) {
.lpoEoZ {
flex: 1 1 100%;
max-width: 100%;
}
}
.hRTDUb {
box-sizing: border-box;
flex: 1 0 auto;
max-width: 100%;
display: flex;
flex-direction: column;
}
@media only screen and (min-width: 1rem) {
.hRTDUb {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
}
@media only screen and (min-width: 37.5rem) {
.hRTDUb {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
}
@media only screen and (min-width: 45rem) {
.hRTDUb {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 52.5rem) {
.hRTDUb {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 71.19rem) {
.hRTDUb {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 78.69rem) {
.hRTDUb {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 79.5rem) {
.hRTDUb {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 91.19rem) {
.hRTDUb {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 103.69rem) {
.hRTDUb {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 116.82rem) {
.hRTDUb {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 52.5rem) {
.hRTDUb {
flex: 1 1 66.6667%;
max-width: 66.6667%;
}
}
@media only screen and (min-width: 71.19rem) {
.hRTDUb {
flex: 1 1 50%;
max-width: 50%;
}
}
@media only screen and (min-width: 78.69rem) {
.hRTDUb {
flex: 1 1 50%;
max-width: 50%;
}
}
@media only screen and (min-width: 79.5rem) {
.hRTDUb {
flex: 1 1 50%;
max-width: 50%;
}
}
@media only screen and (min-width: 91.19rem) {
.hRTDUb {
flex: 1 1 58.3333%;
max-width: 58.3333%;
}
}
@media only screen and (min-width: 103.69rem) {
.hRTDUb {
flex: 1 1 66.6667%;
max-width: 66.6667%;
}
}
@media only screen and (min-width: 116.82rem) {
.hRTDUb {
flex: 1 1 66.6667%;
max-width: 66.6667%;
}
}
.dBnjzp {
box-sizing: border-box;
flex: 1 0 auto;
max-width: 100%;
display: flex;
flex-direction: column;
}
@media only screen and (min-width: 1rem) {
.dBnjzp {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
}
@media only screen and (min-width: 37.5rem) {
.dBnjzp {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
}
@media only screen and (min-width: 45rem) {
.dBnjzp {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 52.5rem) {
.dBnjzp {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 71.19rem) {
.dBnjzp {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 78.69rem) {
.dBnjzp {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 79.5rem) {
.dBnjzp {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 91.19rem) {
.dBnjzp {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 103.69rem) {
.dBnjzp {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 116.82rem) {
.dBnjzp {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 52.5rem) {
.dBnjzp {
flex: 1 1 33.3333%;
max-width: 33.3333%;
}
}
@media only screen and (min-width: 71.19rem) {
.dBnjzp {
flex: 1 1 33.3333%;
max-width: 33.3333%;
}
}
@media only screen and (min-width: 78.69rem) {
.dBnjzp {
flex: 1 1 25%;
max-width: 25%;
}
}
@media only screen and (min-width: 79.5rem) {
.dBnjzp {
flex: 1 1 25%;
max-width: 25%;
}
}
@media only screen and (min-width: 91.19rem) {
.dBnjzp {
flex: 1 1 25%;
max-width: 25%;
}
}
@media only screen and (min-width: 103.69rem) {
.dBnjzp {
flex: 1 1 25%;
max-width: 25%;
}
}
@media only screen and (min-width: 116.82rem) {
.dBnjzp {
flex: 1 1 25%;
max-width: 25%;
}
}
.hBpmQd {
box-sizing: border-box;
flex: 1 0 auto;
max-width: 100%;
display: flex;
flex-direction: column;
}
@media only screen and (min-width: 1rem) {
.hBpmQd {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
}
@media only screen and (min-width: 37.5rem) {
.hBpmQd {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
}
@media only screen and (min-width: 45rem) {
.hBpmQd {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 52.5rem) {
.hBpmQd {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 71.19rem) {
.hBpmQd {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 78.69rem) {
.hBpmQd {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 79.5rem) {
.hBpmQd {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 91.19rem) {
.hBpmQd {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 103.69rem) {
.hBpmQd {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 116.82rem) {
.hBpmQd {
padding-right: 0.75rem;
padding-left: 0.75rem;
}
}
@media only screen and (min-width: 71.19rem) {
.hBpmQd {
flex: 1 1 16.6667%;
max-width: 16.6667%;
}
}
@media only screen and (min-width: 78.69rem) {
.hBpmQd {
flex: 1 1 25%;
max-width: 25%;
}
}
@media only screen and (min-width: 79.5rem) {
.hBpmQd {
flex: 1 1 25%;
max-width: 25%;
}
}
@media only screen and (min-width: 91.19rem) {
.hBpmQd {
flex: 1 1 16.6667%;
max-width: 16.6667%;
}
}
@media only screen and (min-width: 103.69rem) {
.hBpmQd {
flex: 1 1 8.33333%;
max-width: 8.33333%;
}
}
@media only screen and (min-width: 116.82rem) {
.hBpmQd {
flex: 1 1 8.33333%;
max-width: 8.33333%;
}
}
.dQQnbA {
background-color: rgb(229, 229, 229);
height: 1px;
}
@media (min-width: 52.5em) {
.dQQnbA {
width: 88px;
}
}
.olx-button {
-webkit-box-align: center;
align-items: center;
background-color: var(--button-background-color);
border-color: var(--button-border);
border-radius: var(--border-radius-pill);
border-style: solid;
border-width: var(--border-width-hairline);
color: var(--button-color-font);
cursor: pointer;
display: inline-flex;
font-family: var(--font-family);
font-size: var(--button-font-size);
font-weight: var(--font-weight-semibold);
height: var(--button-height);
-webkit-box-pack: center;
justify-content: center;
line-height: var(--button-line-height);
min-width: 72px;
outline: none;
padding: var(--button-padding);
position: relative;
text-decoration: initial;
width: fit-content;
}
.olx-button--a {
text-decoration: none;
}
.olx-button:active {
transform: scale(0.96);
}
.olx-button:active,
.olx-button:not(:active) {
transition: all var(--transition-duration-1) var(--transition-timing-ease-in) 0ms, outline 0ms, outline-offset 0ms;
}
.olx-button:not(:hover) {
transition: all var(--transition-duration-2) var(--transition-timing-ease-in) 0ms, outline 0ms, outline-offset 0ms;
}
.olx-button:focus {
outline: var(--color-neutral-130) solid var(--border-width-thin);
outline-offset: var(--border-width-thin);
transition: outline 0ms ease 0s, outline-offset 0ms ease 0s;
}
.olx-button:not(.olx-button--disabled):hover {
background-color: var(--button-background-color-hover);
border-color: var(--button-border-color-hover);
transition: all var(--transition-duration-2) var(--transition-timing-ease-in) 0ms, outline 0ms, outline-offset 0ms;
}
.olx-button:focus:not(:focus-visible) {
outline: none;
outline-offset: 0px;
}
.olx-button--small {
--button-height: 32px;
--button-padding: var(--spacing-1) var(--spacing-2);
--button-font-size: var(--font-size-xxs);
--button-line-height: var(--font-lineheight-tight);
}
.olx-button--medium {
--button-height: 40px;
--button-padding: var(--spacing-1) var(--spacing-3);
--button-font-size: var(--font-size-xs);
--button-line-height: var(--font-lineheight-superdistant);
}
.olx-button--large {
--button-height: 48px;
--button-padding: var(--spacing-2) var(--spacing-3);
--button-font-size: var(--font-size-xs);
--button-line-height: var(--font-lineheight-supertight);
}
.olx-button--primary {
--button-background-color: var(--button-primary-background-color-base);
--button-border: var(--button-primary-border-color-base);
--button-color-font: var(--button-primary-color-font-base);
--button-background-color-hover: var(--button-primary-background-color-hover);
--button-border-color-hover: var(--button-primary-border-color-hover);
}
.olx-button--secondary {
--button-background-color: var(--button-secondary-background-color-base);
--button-border: var(--button-secondary-border-color-base);
--button-color-font: var(--button-secondary-color-font-base);
--button-background-color-hover: var(--button-secondary-background-color-hover);
--button-border-color-hover: var(--button-secondary-border-color-hover);
}
.olx-button--link-button {
--button-background-color: var(--button-link-button-background-color-base);
--button-border: var(--button-link-button-border-color-base);
--button-color-font: var(--button-link-button-color-font-base);
--button-background-color-hover: var(--button-link-button-background-color-hover);
--button-border-color-hover: var(--button-link-button-border-color-hover);
}
.olx-button__content-wrapper {
-webkit-box-align: center;
align-items: center;
display: inline-flex;
-webkit-box-pack: center;
justify-content: center;
visibility: visible;
}
.olx-button__icon-wrapper {
fill: currentcolor;
-webkit-box-align: center;
align-items: center;
display: inline-flex;
height: 24px;
-webkit-box-pack: center;
justify-content: center;
margin-right: var(--spacing-1);
pointer-events: none;
width: 24px;
}
.olx-button__icon-wrapper svg {
height: 24px;
width: 24px;
}
.olx-link {
-webkit-box-align: center;
align-items: center;
color: var(--link-color);
cursor: pointer;
display: inline-flex;
font-family: var(--font-family);
font-size: var(--font-size);
font-weight: var(--font-weight-semibold);
-webkit-box-pack: center;
justify-content: center;
line-height: var(--font-lineheight);
outline: none;
text-decoration: none;
transition: all var(--transition-duration-3) var(--transition-timing-ease);
}
.olx-link:active {
color: var(--link-color-active);
}
.olx-link:focus {
border-radius: var(--border-radius-xxs);
outline: var(--border-width-thin) solid var(--color-neutral-130);
}
.olx-link:hover {
color: var(--link-color-hover);
text-decoration: underline;
}
.olx-link:focus:not(:focus-visible) {
box-shadow: none;
outline: 0px;
}
.olx-link--caption {
--font-size: var(--font-size-xxxs);
--font-lineheight: var(--font-lineheight-medium);
}
.olx-link--small {
--font-size: var(--font-size-xxs);
--font-lineheight: var(--font-lineheight-distant);
}
.olx-link--medium {
--font-size: var(--font-size-xs);
--font-lineheight: var(--font-lineheight-superdistant);
}
.olx-link--main {
--link-color: var(--link-color-main-base);
--link-color-hover: var(--link-color-main-hover);
--link-color-active: var(--link-color-main-active);
}
.olx-link--grey {
--link-color: var(--link-color-grey-base);
--link-color-hover: var(--link-color-grey-hover);
--link-color-active: var(--link-color-grey-active);
}
.olx-text {
color: var(--text-color);
display: block;
font-family: var(--font-family);
font-style: normal;
font-weight: var(--font-weight-regular);
margin: 0px;
padding: 0px;
word-break: break-word;
}
.olx-text--title-large {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
line-height: var(--font-lineheight-medium);
}
@media screen and (min-width: 840px) {
.olx-text--title-large {
font-size: var(--font-size-xxl);
}
}
.olx-text--title-medium {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
line-height: var(--font-lineheight-medium);
}
@media screen and (min-width: 840px) {
.olx-text--title-medium {
font-size: var(--font-size-lg);
}
}
.olx-text--title-small {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
line-height: var(--font-lineheight-medium);
}
@media screen and (min-width: 840px) {
.olx-text--title-small {
font-size: var(--font-size-md);
}
}
.olx-text--body-large {
font-size: var(--font-size-sm);
}
.olx-text--body-large,
.olx-text--body-medium {
line-height: var(--font-lineheight-superdistant);
}
.olx-text--body-medium {
font-size: var(--font-size-xs);
}
.olx-text--body-small {
font-size: 16px !important;
}
.olx-text--caption {
font-size: var(--font-size-xxxs);
line-height: var(--font-lineheight-medium);
}
.olx-text--light,
.olx-text--regular {
font-weight: var(--font-weight-regular);
}
.olx-text--semibold {
font-weight: var(--font-weight-semibold);
}
.olx-text--bold {
font-weight: var(--font-weight-bold);
}
.olx-text--inline {
display: inline;
}
.olx-text--block {
display: block;
}
.olx-text-input__input-container {
-webkit-box-align: center;
align-items: center;
background-color: var(--textinput-background-color-base);
border: none;
border-radius: var(--border-radius-xs);
box-shadow: 0 0 0 var(--border-width-hairline) var(--textinput-border-color-empty);
color: var(--textinput-color-font);
display: inline-flex;
position: relative;
width: 100%;
z-index: var(--z-index-1-default, 1);
}
.olx-text-input__input-container:hover {
box-shadow: 0 0 0 var(--border-width-thin) var(--textinput-border-color-empty-hover);
}
.olx-text-input__input-container--medium {
border-radius: var(--border-radius-sm);
}
.olx-text-input__input-field {
background-color: inherit;
border: none;
border-radius: var(--border-radius-xs);
color: var(--color-neutral-130);
font-family: var(--font-family);
font-size: var(--font-size-xxs);
font-weight: var(--font-weight-regular);
outline: none;
padding: var(--spacing-0-5) var(--spacing-1);
position: relative;
width: 100%;
}
.olx-text-input__input-field--medium {
border-radius: var(--border-radius-sm);
font-size: var(--font-size-xs);
line-height: var(--font-lineheight-distant);
padding: var(--spacing-1-5) var(--spacing-2);
}
.olx-text-input__input-field::placeholder {
color: var(--textinput-color-placeholder);
}
.olx-container {
background-color: var(--container-background-color);
border-radius: var(--border-radius-sm);
overflow: hidden;
padding: var(--spacing-2);
}
.olx-container--outlined {
border: var(--border-width-hairline) solid var(--container-border-color-outlined);
}
.olx-divider {
background-color: var(--divider-default-background-color);
border: none;
height: 1px;
margin: 0px;
}
.olx-visually-hidden {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.olx-visually-hidden:focus {
clip: auto;
height: auto;
overflow: auto;
position: absolute;
width: auto;
}
.olx-image-carousel {
height: 100%;
padding: 0px;
position: relative;
width: 100%;
}
.olx-image-carousel>span {
height: 24px;
left: 8px;
max-width: calc(100% - 16px);
position: absolute;
top: 8px;
z-index: var(--z-index-100-masked);
}
.olx-image-carousel span {
display: block;
text-overflow: ellipsis;
}
@media screen and (min-width: 566px) {
.olx-image-carousel>span {
left: 16px;
top: 16px;
}
}
.olx-image-carousel__items {
-webkit-box-align: center;
align-items: center;
display: flex;
height: 100%;
-webkit-box-pack: start;
justify-content: flex-start;
margin: 0px;
overflow: scroll hidden;
padding: 0px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.olx-image-carousel__items::-webkit-scrollbar {
display: none;
}
.olx-image-carousel__item {
-webkit-box-align: center;
align-items: center;
display: flex;
height: 100%;
-webkit-box-pack: center;
justify-content: center;
list-style: none;
margin: 0px;
min-width: 100%;
overflow: hidden;
padding: 0px;
position: relative;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.olx-image-carousel__item * {
height: 100%;
width: 100%;
}
.olx-image-carousel__item img,
.olx-image-carousel__item picture {
display: block;
object-fit: cover;
}
.olx-image-carousel__counter-wrapper {
bottom: 6px;
position: absolute;
right: 8px;
}
.olx-ad-card {
background: var(--color-neutral-70);
border: 1px solid var(--color-neutral-90);
border-radius: var(--border-radius-sm);
cursor: pointer;
position: relative;
transition: box-shadow var(--transition-duration-2) var(--transition-timing-ease);
}
.olx-ad-card picture img {
transition: scale var(--transition-duration-5) var(--transition-timing-ease);
}
.olx-ad-card:hover {
box-shadow: var(--shadow-level-6);
}
.olx-ad-card:hover picture img {
scale: 1.1;
}
.olx-ad-card--vertical {
display: flex;
flex-direction: column;
max-width: 400px;
min-height: 100%;
min-width: 180px;
width: 100%;
}
.olx-ad-card--vertical .olx-image-carousel {
border-bottom: 0px;
border-top-left-radius: var(--border-radius-sm);
border-top-right-radius: var(--border-radius-sm);
height: 180px;
overflow: hidden;
width: 100%;
}
.olx-ad-card__link-wrapper {
display: block;
height: 100%;
outline: none;
position: absolute;
top: 0px;
width: 100%;
z-index: var(--z-index-1-default);
}
.olx-ad-card__link-wrapper:focus {
border-radius: var(--border-radius-sm);
outline: var(--border-width-hairline) solid var(--color-neutral-130);
outline-offset: var(--border-width-hairline);
}
.olx-ad-card__content {
border-radius: var(--border-radius-sm);
display: flex;
flex-direction: column;
padding: var(--spacing-2);
}
.olx-ad-card__content--vertical {
--carousel-height: 180px;
gap: var(--spacing-2);
height: calc(100% - var(--carousel-height));
}
.olx-ad-card__top {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
@media screen and (min-width: 566px) {
.olx-ad-card__top {
flex-direction: row;
gap: var(--spacing-2);
}
}
.olx-ad-card__top--vertical {
flex-direction: column-reverse;
gap: var(--spacing-2);
-webkit-box-pack: end;
justify-content: flex-end;
}
.olx-ad-card__title {
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
display: -webkit-box;
font-size: 14px;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
.olx-ad-card__title--vertical {
-webkit-line-clamp: 2;
--two-lines-height: 37px;
height: var(--two-lines-height);
}
.olx-ad-card__title-link {
color: inherit;
text-decoration: none;
}
.olx-ad-card__badges-items {
display: flex;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-top: var(--spacing-1);
overflow: hidden;
padding: 0px;
position: relative;
}
.olx-ad-card__badges-item {
list-style: none;
}
.olx-ad-card__badges-item+.olx-ad-card__badges-item {
padding-left: var(--spacing-1);
}
.olx-ad-card__badges-item>span {
display: flex;
white-space: nowrap;
}
.olx-ad-card__old-price {
color: var(--color-neutral-100);
text-decoration-line: line-through;
width: max-content;
}
.olx-ad-card__price {
width: max-content;
}
.olx-ad-card__details-ads {
display: flex;
flex-direction: column;
}
.olx-ad-card__bottom {
-webkit-box-align: center;
align-items: center;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
width: 100%;
}
.olx-ad-card__bottom-content {
display: flex;
flex-direction: column;
overflow: hidden;
}
.olx-ad-card__location {
-webkit-box-align: center;
align-items: center;
display: flex;
flex-direction: row;
gap: var(--spacing-0-5);
margin-right: var(--spacing-6);
padding: 0px;
}
.olx-ad-card__location--vertical {
align-items: flex-start;
flex-direction: column;
}
.olx-ad-card__location svg {
color: var(--color-neutral-120);
min-width: 16px;
}
.olx-ad-card__location p {
color: var(--color-neutral-120);
line-height: normal;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.olx-ad-card__location-date-container {
align-items: flex-start;
display: flex;
gap: var(--spacing-0-5);
width: 100%;
}
.olx-alertbox {
--background-color: var(--color-neutral-80);
--color: var(--color-neutral-130);
--svg-color: var(--color-neutral-120);
background-color: var(--background-color);
border-radius: var(--border-radius-sm);
color: var(--color);
display: flex;
flex-direction: column;
font-family: var(--font-family);
padding: var(--spacing-2);
}
.olx-alertbox svg {
color: var(--svg-color);
}
.olx-alertbox__content-wrapper {
display: flex;
}
.olx-alertbox__icon-wrapper {
height: 24px;
width: 24px;
}
.olx-alertbox__content {
display: flex;
flex-direction: column;
margin-left: var(--spacing-2);
}
.olx-alertbox__description {
display: inline;
font-size: var(--font-size-xxs);
font-weight: var(--font-weight-regular);
}
@media screen and (min-width: 840px) {
.olx-alertbox__description {
font-size: var(--font-size-xs);
}
}
.olx-alertbox__title {
-webkit-box-align: center;
align-items: center;
display: flex;
font-size: var(--font-size-xxs);
font-weight: var(--font-weight-semibold);
line-height: 24px;
word-break: break-word;
}
@media screen and (min-width: 840px) {
.olx-alertbox__title {
font-size: var(--font-size-xs);
}
}
.olx-badge {
-webkit-box-align: center;
align-items: center;
background: var(--badge-background-color);
color: var(--badge-color);
display: inline-flex;
font-family: var(--font-family);
font-weight: var(--font-weight-semibold);
overflow: hidden;
white-space: nowrap;
}
.olx-badge:not(.olx-badge--no-gap) {
column-gap: var(--spacing-1);
}
.olx-badge--small {
border-radius: var(--border-radius-xs);
font-size: var(--font-size-xxxs);
}
.olx-badge--small {
padding: var(--spacing-0-5) var(--spacing-1);
}
.olx-badge--success {
--badge-background-color: var(--color-feedback-success-80);
--badge-color: var(--color-feedback-success-120);
}
.olx-badge--info {
--badge-background-color: var(--color-feedback-info-80);
--badge-color: var(--color-feedback-info-110);
}
.olx-badge svg {
max-height: 16px;
max-width: 16px;
}
.olx-autocomplete {
position: relative;
}
.olx-carousel {
position: relative;
}
.olx-carousel__viewport {
overflow: hidden;
}
.olx-carousel__content {
display: flex;
}
.olx-carousel__next {
right: -24px;
}
.olx-carousel__next {
-webkit-box-align: center;
align-items: center;
background-color: transparent;
border: 0px;
border-radius: var(--border-radius-circle);
color: var(--carousel-arrow-color);
cursor: pointer;
display: flex;
height: 48px;
-webkit-box-pack: center;
justify-content: center;
outline: 0px;
padding: var(--spacing-0-5);
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
z-index: var(--z-index-300-sticky, 300);
}
.olx-carousel__next:hover span {
background-color: var(--carousel-arrow-background-color-hover);
}
.olx-carousel__next--hide-on-mobile {
display: none;
}
@media screen and (min-width: 840px) {
.olx-carousel__next--hide-on-mobile {
display: flex;
}
}
.olx-carousel__arrow-icon {
-webkit-box-align: center;
align-items: center;
background-color: var(--carousel-arrow-background-color-base);
border-radius: var(--border-radius-circle);
box-shadow: var(--shadow-level-2);
}
.olx-carousel__arrow-icon,
.olx-modal {
display: flex;
height: 100%;
-webkit-box-pack: center;
justify-content: center;
width: 100%;
}
.olx-modal {
align-items: flex-end;
background-color: rgba(0, 0, 0, 0.333);
border: 0px;
opacity: 0;
pointer-events: none;
position: fixed;
right: 0px;
top: 0px;
transition: opacity var(--transition-timing-ease) var(--transition-duration-3);
visibility: hidden;
will-change: transform;
z-index: var(--z-index-900-modal, 900);
}
@media screen and (min-width: 840px) {
.olx-modal {
-webkit-box-align: center;
align-items: center;
}
}
.olx-modal__dialog {
background-color: var(--modal-background-color);
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
display: flex;
flex-direction: column;
max-height: var(--modal-max-height);
max-width: 100%;
min-height: 200px;
opacity: 0;
padding: var(--spacing-3) var(--spacing-4);
position: relative;
transform: translateY(100%) scale(0.9);
transition: all var(--transition-timing-ease) var(--transition-duration-3);
width: 100%;
}
@media screen and (min-width: 840px) {
.olx-modal__dialog {
border-radius: var(--border-radius-md);
max-width: var(--modal-max-width);
transform: translateY(10%) scale(0.9);
}
}
.olx-modal__content {
background-color: var(--color-neutral-70);
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden auto;
}
.olx-modal__content::-webkit-scrollbar {
width: 10px;
}
.olx-modal__content::-webkit-scrollbar-track {
background: var(--color-neutral-80);
border-radius: var(--border-radius-md);
}
.olx-modal__content::-webkit-scrollbar-thumb {
background: var(--color-neutral-90);
border-radius: var(--border-radius-md);
}
.olx-modal__content::-webkit-scrollbar-thumb:hover {
background: var(--color-neutral-110);
}
.olx-modal__close-button {
-webkit-box-align: center;
align-items: center;
align-self: flex-end;
background-color: transparent;
border: none;
border-radius: var(--border-radius-pill);
color: var(--modal-button-color);
cursor: pointer;
display: flex;
height: 48px;
-webkit-box-pack: center;
justify-content: center;
min-height: 48px;
width: 48px;
}
.olx-modal__close-button:hover {
background-color: var(--modal-button-background-color-hover);
}
.olx-logo-olx {
min-height: 12px;
min-width: 12px;
width: 100%;
}
.olx-logo-olx--o {
fill: var(--color-secondary-100);
}
.olx-logo-olx--l {
fill: var(--color-feedback-success-90);
}
.olx-logo-olx--x {
fill: var(--color-primary-100);
}
.olx-default-footer {
border-top: 1px solid var(--divider-default-background-color);
padding: var(--spacing-2) var(--spacing-2) var(--spacing-8);
}
@media screen and (min-width: 840px) {
.olx-default-footer {
padding: var(--spacing-2) var(--spacing-4) var(--spacing-3);
}
}
@media screen and (min-width: 1200px) {
.olx-default-footer {
padding: var(--spacing-2) var(--spacing-9) var(--spacing-3);
}
}
@media screen and (min-width: 1720px) {
.olx-default-footer {
display: grid;
grid-template-columns: 1576px;
-webkit-box-pack: center;
justify-content: center;
}
}
.olx-default-footer__links-container {
flex-direction: column;
gap: var(--spacing-2);
padding-bottom: var(--spacing-2);
}
@media screen and (min-width: 840px) {
.olx-default-footer__links-container {
flex-direction: row;
gap: var(--spacing-4);
}
}
.olx-static-footer__links-container {
display: flex;
flex-direction: column;
gap: var(--spacing-3);
padding-top: var(--spacing-2);
}
@media screen and (min-width: 1200px) {
.olx-static-footer__links-container {
display: grid;
grid-template-columns: 1fr auto;
}
}
.olx-static-footer__legal-container,
.olx-static-footer__legal-container-links {
display: flex;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
row-gap: var(--spacing-1-5);
}
@media screen and (min-width: 840px) {
.olx-static-footer__legal-container-links {
column-gap: var(--spacing-2);
flex-direction: row;
-webkit-box-pack: start;
justify-content: flex-start;
}
}
.olx-static-footer__social-container {
display: grid;
gap: var(--spacing-1);
grid-template-columns: repeat(3, 48px);
grid-template-rows: repeat(2, 48px);
-webkit-box-pack: center;
justify-content: center;
}
@media screen and (min-width: 600px) {
.olx-static-footer__social-container {
grid-template-columns: repeat(6, 48px);
grid-template-rows: 48px;
}
}
@media screen and (min-width: 1200px) {
.olx-static-footer__social-container {
-webkit-box-pack: end;
justify-content: flex-end;
}
}
.olx-static-footer__legal-container-address {
display: block;
text-align: center;
}
@media screen and (min-width: 840px) {
.olx-static-footer__legal-container-address {
text-align: left;
}
}
.olx-static-footer__icon-wrapper {
-webkit-box-align: center;
align-items: center;
display: inline-flex;
height: 48px;
-webkit-box-pack: center;
justify-content: center;
width: 48px;
}
.olx-static-footer__social-link {
border-radius: 100%;
padding: var(--spacing-1);
transition: all 0.3s ease 0s;
}
.olx-static-footer__social-link:active svg,
.olx-static-footer__social-link:hover svg {
color: var(--color-neutral-70);
}
.olx-static-footer__facebook-link:active,
.olx-static-footer__facebook-link:hover {
background-color: rgb(58, 89, 152);
}
.olx-static-footer__youtube-link:active,
.olx-static-footer__youtube-link:hover {
background-color: red;
}
.olx-static-footer__tiktok-link:active,
.olx-static-footer__tiktok-link:hover {
background-color: rgb(4, 0, 0);
}
.olx-static-footer__linkedin-link:active,
.olx-static-footer__linkedin-link:hover {
background-color: rgb(0, 132, 191);
}
.olx-static-footer__instagram-link:active,
.olx-static-footer__instagram-link:hover {
background-color: rgb(225, 48, 108);
}
.olx-static-footer__twitter-link:active,
.olx-static-footer__twitter-link:hover {
background-color: rgb(4, 0, 0);
}
.olx-header {
display: flex;
flex-direction: column;
font-family: var(--font-family);
-webkit-box-pack: center;
justify-content: center;
position: relative;
z-index: var(--z-index-400-header, 400);
}
.olx-header__skip-links {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.olx-header__skip-links:focus {
clip: auto;
background-color: var(--color-neutral-70);
box-shadow: 0 0 0 2px var(--color-neutral-70);
color: var(--color-neutral-130);
display: inline-block;
height: 50px;
left: 0px;
outline: var(--border-width-thin) solid var(--color-neutral-130);
overflow: initial;
top: 50%;
transform: translateY(-50%);
transition: none 0s ease 0s;
white-space: normal;
width: 60px;
z-index: 2;
}
.olx-header__main-menu {
background-color: var(--color-neutral-70);
border-bottom: 1px solid var(--color-neutral-90);
display: flex;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
min-height: 80px;
padding: var(--spacing-2) var(--spacing-2);
transition: transform var(--transition-duration-5) var(--transition-timing-ease-in-out);
}
@media screen and (min-width: 840px) {
.olx-header__main-menu {
padding: var(--spacing-2) var(--spacing-4);
}
}
@media screen and (min-width: 1200px) {
.olx-header__main-menu {
padding: var(--spacing-2) var(--spacing-9);
}
}
.olx-header__items {
-webkit-box-align: center;
align-items: center;
display: flex;
margin: 0px;
padding: 0px;
}
@media screen and (min-width: 1200px) {
.olx-header__items {
column-gap: var(--spacing-2);
}
}
@media screen and (min-width: 1500px) {
.olx-header__items {
column-gap: var(--spacing-3);
}
}
.olx-header__icon-button {
-webkit-box-align: center;
align-items: center;
background-color: transparent;
border: none;
color: var(--color-neutral-130);
cursor: pointer;
display: flex;
height: 48px;
-webkit-box-pack: center;
justify-content: center;
margin: 0px;
outline: none;
padding: 0px;
width: 48px;
}
.olx-header__icon-button :hover {
color: var(--link-color-main-hover);
}
.olx-header__icon-button :focus {
border-radius: var(--border-radius-xxs);
outline: var(--border-width-thin) solid var(--color-neutral-130);
}
.olx-header__item {
-webkit-box-align: center;
align-items: center;
display: flex;
list-style: none;
}
.olx-header__item[data-variant="anunciar"] {
margin-left: var(--spacing-1-5);
}
@media screen and (max-width: 1200px) {
.olx-header__item[data-myads="true"],
.olx-header__item[data-professional="true"] {
display: none;
}
}
@media screen and (min-width: 1200px) {
.olx-header__item[data-variant="anunciar"] {
margin-left: 0px;
}
}
.olx-header__link {
column-gap: var(--spacing-1);
}
@media screen and (max-width: 1200px) {
.olx-header__link {
padding: 12px;
}
}
.olx-header__link:hover {
text-decoration: none;
}
.olx-header__primary-menu {
display: flex;
flex-direction: row;
-webkit-box-pack: justify;
justify-content: space-between;
margin: 0px auto;
max-width: 1576px;
width: 100%;
}
.olx-header__burger-menu {
height: 48px;
-webkit-box-pack: start;
justify-content: flex-start;
width: 48px;
}
.olx-header__burger-menu:focus {
border-radius: var(--border-radius-xxs);
outline: var(--color-neutral-130) solid var(--border-width-thin);
}
@media screen and (max-width: 360px) {
.olx-header__burger-menu {
height: 44px;
width: 44px;
}
}
@media screen and (min-width: 840px) {
.olx-header__burger-menu {
display: none;
}
}
.olx-header__column-left {
-webkit-box-align: center;
align-items: center;
display: flex;
flex: 1 1 0%;
position: relative;
}
.olx-header__column-right {
display: flex;
transition: all var(--transition-duration-5) var(--transition-timing-ease);
}
.olx-header__olx-container {
-webkit-box-align: center;
align-items: center;
color: var(--color-neutral-130);
column-gap: 32px;
display: flex;
font-size: var(--font-size-xxs);
height: 48px;
width: 48px;
}
.olx-header__logo-wrapper {
height: 24px;
width: 24px;
}
@media screen and (max-width: 1200px) {
.olx-header__label {
clip: rect(1px, 1px, 1px, 1px);
display: flex;
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.olx-header__label[data-variant="chat"],
.olx-header__label[data-variant="notification"] {
clip: auto;
display: initial;
height: auto;
overflow: initial;
position: static;
white-space: normal;
width: auto;
}
}
@media screen and (max-width: 840px) {
.olx-header__label[data-variant="chat"],
.olx-header__label[data-variant="notification"] {
clip: rect(1px, 1px, 1px, 1px);
display: flex;
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
}
.olx-header__desapegar-button {
font-size: var(--font-size-xxs);
}
@media screen and (max-width: 840px) {
.olx-header__desapegar-button {
height: 36px;
padding: var(--spacing-1) var(--spacing-2);
}
}
.olx-header__profile-item {
-webkit-box-align: center;
align-items: center;
display: flex;
list-style: none;
}
.olx-header__profile-link {
-webkit-box-align: center;
align-items: center;
background-color: transparent;
border: 1px solid var(--color-neutral-90);
border-radius: var(--border-radius-pill);
color: var(--color-neutral-130);
cursor: pointer;
display: flex;
font-family: var(--font-family);
font-size: var(--font-size-xxs);
font-weight: var(--font-weight-semibold);
height: 40px;
-webkit-box-pack: center;
justify-content: center;
line-height: var(--font-lineheight-medium);
padding: var(--spacing-0-5);
transition: all ease var(--transition-duration-3);
width: 135px;
}
.olx-header__profile-link:hover {
border-color: var(--color-secondary-100);
color: var(--link-color-main-hover);
text-decoration: none;
}
.olx-header__profile-link:focus {
border-radius: var(--border-radius-pill);
box-shadow: none;
outline: var(--border-width-thin) solid var(--color-neutral-130);
}
@media screen and (max-width: 840px) {
.olx-header__profile-link {
display: none;
}
}
.olx-header__search {
margin-left: var(--spacing-3);
margin-right: var(--spacing-1-5);
width: 100%;
}
@media screen and (min-width: 840px) {
.olx-header__search {
margin-right: var(--spacing-3);
}
}
@media screen and (max-width: 840px) {
.olx-header__search[data-hasnavbar="false"],
.olx-header__search[data-hasnavbar="false"] .olx-text-input__input-field {
display: none;
}
}
.olx-header__search-fluid {
padding-left: var(--spacing-3);
padding-right: var(--spacing-3);
padding-top: var(--spacing-2);
width: 100%;
}
@media screen and (min-width: 840px) {
.olx-header__search-fluid,
.olx-header__search-fluid .olx-text-input__input-field {
display: none;
}
}
@media screen and (max-width: 840px) {
.olx-header__search-fluid {
padding-left: 0px;
padding-right: 0px;
}
}
.olx-header__overlay {
background: var(--color-neutral-130);
height: calc(-100% + 100svh);
left: 0px;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
transition: opacity 1s ease 0s;
width: 100%;
}
@media screen and (min-width: 840px) {
.olx-header__overlay {
display: none;
}
}
.olx-header__overflow {
background-color: var(--color-neutral-70);
box-shadow: var(--shadow-level-2);
height: 0px;
list-style: none;
opacity: 0;
padding-bottom: 2px;
padding-top: 2px;
pointer-events: none;
position: absolute;
scroll-behavior: smooth;
top: 64px;
transition: transform ease var(--transition-duration-3), opacity ease var(--transition-duration-3);
width: 280px;
z-index: var(--z-index-700-overlay);
}
@media screen and (min-width: 840px) {
.olx-header__overflow {
border-radius: var(--border-radius-sm);
}
.olx-header__overflow[data-islogged="false"] {
display: none;
}
}
@media screen and (max-width: 840px) {
.olx-header__overflow:not([data-hasnavbar="true"]) {
border-radius: 0px;
height: calc(-100% + 100svh);
left: 0px;
overflow: hidden;
padding-bottom: 50px;
top: 100%;
transform: translateX(-100%);
}
}
.olx-header__overflow-item[data-divider="true"] {
border-bottom: 1px solid var(--color-neutral-90);
margin-bottom: var(--spacing-0-5);
}
.olx-header__overflow-link {
color: var(--color-neutral-130);
column-gap: 16px;
cursor: pointer;
display: inline-flex;
font-size: var(--font-size-xxs);
-webkit-box-pack: start;
justify-content: flex-start;
padding: var(--spacing-2);
position: relative;
text-decoration: none;
transition: all ease var(--transition-duration-3);
width: 100%;
}
.olx-header__overflow-link:hover {
background: var(--color-neutral-80);
text-decoration: none;
}
.olx-header__overflow-link:focus {
transform: scale(0.98);
}
.olx-color-primary-100 {
color: var(--color-primary-100);
}
.olx-color-secondary-100 {
color: var(--color-secondary-100);
}
.olx-color-neutral-70 {
color: var(--color-neutral-70);
}
.olx-color-neutral-100 {
color: var(--color-neutral-100);
}
.olx-color-neutral-120 {
color: var(--color-neutral-120);
}
.olx-color-feedback-success-120 {
color: var(--color-feedback-success-120);
}
.olx-d-flex {
display: flex;
}
.olx-ai-flex-start {
align-items: flex-start;
}
.olx-ai-center {
-webkit-box-align: center;
align-items: center;
}
.olx-fd-row {
flex-direction: row;
}
.olx-fd-column {
flex-direction: column;
}
.olx-fd-column-reverse {
flex-direction: column-reverse;
}
.olx-jc-flex-start {
-webkit-box-pack: start;
justify-content: flex-start;
}
.olx-jc-center {
-webkit-box-pack: center;
justify-content: center;
}
.olx-jc-space-between {
-webkit-box-pack: justify;
justify-content: space-between;
}
.olx-ml-0-5 {
margin-left: var(--spacing-0-5);
}
.olx-ml-1 {
margin-left: var(--spacing-1);
}
.olx-ml-2 {
margin-left: var(--spacing-2);
}
.olx-mr-2 {
margin-right: var(--spacing-2);
}
.olx-mt-1 {
margin-top: var(--spacing-1);
}
.olx-mt-2 {
margin-top: var(--spacing-2);
}
.olx-mt-3 {
margin-top: var(--spacing-3);
}
.olx-mb-2 {
margin-bottom: var(--spacing-2);
}
.olx-mb-3 {
margin-bottom: var(--spacing-3);
}
.olx-mb-4 {
margin-bottom: var(--spacing-4);
}
.olx-pl-1 {
padding-left: var(--spacing-1);
}
.olx-pr-1 {
padding-right: var(--spacing-1);
}
.olx-pt-6 {
padding-top: var(--spacing-6);
}
.olx-pb-4 {
padding-bottom: var(--spacing-4);
}
.olx-mb-stack-quarck {
margin-bottom: var(--spacing-stack-quarck);
}
.ajfs2S {
-webkit-box-align: center;
align-items: center;
background: transparent;
border: none;
border-radius: var(--border-radius-lg);
cursor: pointer;
display: flex;
height: 44px;
-webkit-box-pack: center;
justify-content: center;
outline: none;
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
transition: var(--transition-duration-2);
width: 44px;
z-index: var(--z-index-1-default);
}
.ajfs2S svg {
color: var(--color-neutral-130);
}
.ajfs2S:active,
.ajfs2S:hover {
background: var(--color-neutral-90);
}
.ajfs2S:focus {
outline: var(--color-secondary-100) solid var(--border-width-thin);
}
._2dsuYh {
-webkit-box-align: center;
align-items: center;
display: flex;
height: 32px;
-webkit-box-pack: center;
justify-content: center;
width: 32px;
}
.S6FMF5 {
height: 48px;
margin: 0px;
position: relative;
}
.S6FMF5 input {
padding-right: var(--spacing-6);
}
.rec-gallery-galleries,
.rec-gallery-gallery {
display: flex;
flex-direction: column;
}
.rec-gallery-gallery+.rec-gallery-gallery {
margin-top: var(--spacing-6);
}
.rec-gallery-carousel__viewport {
margin-left: calc(var(--spacing-1)*-1);
padding-left: var(--spacing-0-25);
}
.rec-gallery-carousel__slide {
flex: 0 0 240px;
min-width: 0px;
padding-left: var(--spacing-2);
position: relative;
}
@media screen and (min-width: 840px) {
.rec-gallery-carousel__slide {
flex: 0 0 25%;
}
}
@media screen and (min-width: 1200px) {
.rec-gallery-carousel__slide {
flex: 0 0 20%;
}
}
@media screen and (min-width: 1500px) {
.rec-gallery-carousel__slide {
flex: 0 0 16.66%;
}
}
.rec-gallery-carousel__slide[data-reduced="true"] {
flex: 0 0 240px;
}
.rec-gallery-adcard {
height: 396px;
}
.rec-gallery-title__wrapper {
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
margin-bottom: var(--spacing-3);
width: 100%;
}
.dggish {
flex-direction: row;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: justify;
justify-content: space-between;
margin-bottom: var(--spacing-1);
}
@media (min-width: 52.5em) {
.dggish {
max-width: 330px;
}
}
.dRVOMM {
display: flex;
flex-direction: column;
}
.eIrngG {
text-decoration: underline;
}
@media (min-width: 52.5em) {
.liXIVx {
width: 330px;
}
}
.JPPzB {
z-index: 1;
position: absolute;
top: 0px;
right: 0px;
height: 48px;
width: 56px;
background-color: transparent;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
}
@media (min-width: 52.5em) {
.JPPzB {
height: 40px;
}
}
.jpvXFy {
position: relative;
width: 100%;
}
@media (min-width: 52.5em) {
.jpvXFy {
width: unset;
}
}
.iylYKg {
display: flex;
}
@media (min-width: 52.5em) {
.iylYKg {
display: none;
}
}
.jzHSCO {
display: none;
flex-direction: row;
-webkit-box-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
align-items: center;
}
@media (min-width: 52.5em) {
.jzHSCO {
display: flex;
}
}
.emZFka {
margin: 0px;
}
@media (min-width: 52.5em) {
.leAFmU {
height: 277.594px;
}
}
.dNnIOE {
display: flex;
margin-top: var(--spacing-1);
gap: var(--spacing-1);
}
.jxzxsG {
display: flex;
flex-direction: row;
gap: var(--spacing-1);
margin-top: var(--spacing-3);
}
.fRPkcW {
display: flex;
flex-direction: row;
gap: var(--spacing-1);
}
.iAjmOH {
border: 1px solid rgb(229, 229, 229);
border-radius: 8px;
padding: 16px 16px 8px;
background-color: rgb(249, 249, 249);
}
.eqAese {
margin-bottom: 8px;
}
.bkeCVY {
display: flex;
margin-bottom: 16px;
}
.iPanMd {
display: flex;
-webkit-box-pack: center;
justify-content: center;
}
.eiDnJG {
margin-right: 8px;
}
.mgOeD {
display: flex;
-webkit-box-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
align-items: center;
}
.gHOHKj {
display: flex;
-webkit-box-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
align-items: center;
}
.fldqIs {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.dmVzsi {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.eUuwVa {
display: flex;
cursor: pointer;
}
.jwSNhR {
display: flex;
margin-right: 8px;
-webkit-box-align: center;
align-items: center;
}
.iUJOli {
margin-top: var(--spacing-0-5);
padding: var(--spacing-0-5) 0;
}
.cVKnwm {
margin-top: 0px;
padding: var(--spacing-0-5) 0;
}
.bcmKlD {
margin-bottom: var(--spacing-2);
min-height: 96px;
}
@media (max-width: 480px) {
.bcmKlD {
margin: 0px auto;
}
}
.AerSA {
overflow-y: auto;
gap: var(--spacing-2);
}
.bLAmFD {
margin: 0px;
display: flex;
flex-direction: column;
gap: var(--spacing-0-5);
}
.cLuAeg {
display: flex;
gap: var(--spacing-1);
}
.kasWSD {
display: flex;
flex-direction: column;
background-color: var(--color-secondary-lightest);
padding: var(--spacing-stack-xxxs);
gap: var(--spacing-stack-xxs);
border-radius: var(--border-radius-sm);
}
.gNDsRI {
display: flex;
}
.cCkxId {
display: flex;
flex-direction: column;
}
.fWQvnR {
padding: 0px;
text-align: left;
font-size: 13px;
}
.kSFdbo {
margin-right: var(--spacing-inline-nano);
}
.hRKSON {
display: grid;
gap: var(--spacing-2);
grid-template-columns: 64px 1fr;
-webkit-box-align: center;
align-items: center;
}
.iKOnDg {
display: flex;
flex-direction: column;
gap: var(--spacing-2);
}
@media (max-width: 480px) {
.iKOnDg {
padding-bottom: 64px;
}
}
.vlJew {
display: flex;
gap: var(--spacing-stack-nano);
flex-wrap: wrap;
}
.UbaFz {
margin-top: var(--spacing-2);
}
.iFeCCh {
text-decoration: line-through;
}
@media (min-width: 52.5em) {
.iFeCCh {
font-size: var(--font-size-xxs);
}
}
.bVPwgc {
background-color: transparent;
}
@media (min-width: 52.5em) {
.bVPwgc {
flex-direction: column-reverse;
padding-bottom: 0px;
}
}
.iKICED {
flex-direction: column;
}
@media (min-width: 52.5em) {
.iKICED {
flex-direction: row;
-webkit-box-align: center;
align-items: center;
}
}
.ibUBVa {
margin: 0px;
}
.fBIVnd {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
padding: 10px 3px 10px 3px;
background-color: var(--color-secondary-100);
flex: 1 1 0%;
}
.dnbBJL {
font-weight: var(--font-weight-regular);
line-height: 44px;
}
@media (min-width: 52.5em) {
.dnbBJL {
margin-right: var(--spacing-0-5);
}
}
@media (min-width: 79.5em) {
.dnbBJL {
margin-right: var(--spacing-1);
}
}
@media (min-width: 52.5em) {
.kkAwSq {
flex-direction: row;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: start;
justify-content: flex-start;
}
}
.dLCxtV {
margin-block: 0px;
display: -webkit-box
}
.focuCb {
white-space: pre-line;
}
.fMgwdS {
word-break: break-word;
}
.lfYRqx {
width: 50%;
}
@media (min-width: 45em) {
.lfYRqx {
padding-left: 0px;
width: 100%;
font-size: var(--font-size-xxs);
color: var(--color-neutral-120);
}
}
.cpGpXB {
box-sizing: border-box;
padding-left: 16px;
width: 50%;
}
.cpGpXB::before {
display: none;
}
@media (min-width: 45em) {
.cpGpXB {
padding-left: 0px;
width: 100%;
}
}
.hakxne {
padding-left: var(--spacing-2);
outline: none;
width: 50%;
}
@media (min-width: 45em) {
.hakxne {
padding-left: 0px;
width: 100%;
}
}
.efnZpq {
flex-direction: row;
}
@media (min-width: 45em) {
.efnZpq {
flex-direction: column;
}
}
.jQLBWs {
margin-bottom: var(--spacing-0-5);
display: flex;
}
@media (min-width: 1em) and (max-width: 52.4375em) {
.jQLBWs {
display: block;
order: 1;
width: 100%;
margin: var(--spacing-1) 0 0 0;
}
}
.kClAQl {
display: flex;
flex-direction: column;
margin-right: var(--spacing-1);
-webkit-box-align: baseline;
align-items: baseline;
}
.dsBvGq {
margin-right: 4px;
margin-left: -2px;
}
.gQpQiy {
flex-wrap: wrap;
margin-bottom: -16px;
}
.jmFfeO {
height: 24px;
}
.bKbctQ {
display: flex;
flex-direction: column;
}
.bKCVhH {
margin-right: 4px;
margin-left: 4px;
}
.dWayMW {
font-weight: var(--font-weight-semibold);
}
}
@media (min-width: 52.5em) {
.dWayMW {
font-size: var(--font-size-xxxs);
}
}
.hjLLUR {
font-size: var(--font-size-xs);
}
@media (min-width: 52.5em) {
.hjLLUR {
font-size: var(--font-size-xxxs);
}
}
.IoqnP {
position: relative;
width: 100%;
display: flex;
flex-direction: row;
-webkit-box-pack: justify;
justify-content: space-between;
}
@media (min-width: 839px) {
.IoqnP {
flex-direction: row;
-webkit-box-pack: justify;
justify-content: space-between;
width: auto;
}
}
.dfQibb {
border: none;
background-color: transparent;
padding: 0px;
height: auto;
min-width: 16px;
margin-left: 4px;
margin-right: 4px;
}
.dfQibb:hover {
background-color: transparent;
}
.dfQibb:focus {
box-shadow: 0 0 0 var(--border-width-thick) var(--button-primary-color-outline);
}
.kxFGLZ {
height: 50px;
position: fixed;
top: -60px;
left: 0px;
width: 100vw;
text-align: center;
z-index: 10;
transition: all 0.3s ease 0s;
}
.kVvckl {
max-width: 100%;
max-height: 35px;
}
.ccAPWz {
background-color: var(--color-neutral-80);
padding-top: 0px;
overflow: hidden;
}
.djeeke {
display: block;
}
@media (min-width: 116.82em) {
.djeeke {
display: block;
vertical-align: top;
}
}
@media (min-width: 116.82em) {
.GYHge {
display: flex;
-webkit-box-pack: center;
justify-content: center;
}
}
.brSEGL {
display: none;
}
@media (min-width: 116.82em) {
.brSEGL {
display: block;
vertical-align: top;
min-width: 300px;
}
}
.fZtGUy {
padding: 0px 4px;
}
@media (min-width: 52.5em) {
.fZtGUy {
font-size: var(--font-size-xxxs);
line-height: var(--font-lineheight-supertight);
}
}
.OtLeB {
text-align: center;
flex: 1 1 0%;
margin-left: calc(var(--spacing-2) * -1);
margin-right: calc(var(--spacing-2) * -1);
}
@media (min-width: 45em) {
.OtLeB {
margin-left: calc(var(--spacing-3) * -1);
margin-right: calc(var(--spacing-3) * -1);
}
}
@media (min-width: 52.5em) {
.OtLeB {
margin-left: 0px;
margin-right: 0px;
}
}
.eXhSEm {
min-width: 100%;
background-color: var(--color-neutral-90);
position: relative;
font-size: 0px;
vertical-align: middle;
}
.fTdpFj {
white-space: nowrap;
overflow: scroll hidden;
transform: translateZ(0px);
scroll-snap-type: x mandatory;
transition: all 100ms ease-out 0s;
}
.fTdpFj::-webkit-scrollbar {
display: none;
width: 0px !important;
}
.eygyzf {
display: inline-block;
vertical-align: middle;
text-align: center;
width: 100%;
scroll-snap-align: center none;
}
.eygyzf img {
max-width: 100%;
margin: 0px auto;
}
.hVWGzL {
inset: auto auto 16px 50%;
transform: translateX(-50%);
border-radius: var(--spacing-0-5);
padding: 5px 10px;
position: absolute;
z-index: 0;
opacity: 0.3;
}
.hVWGzL * {
opacity: 0.3;
}
.bcZaJY {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 0px;
left: 0px;
}
.cNBrzd {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 0px;
right: 0px;
}
.cNBrzd svg {
filter: drop-shadow(rgb(180, 180, 180) 0px 1px 0px);
}
.hGbNNN {
position: absolute;
bottom: 0px;
z-index: 2;
right: 0px;
}
.hKoyyV {
user-select: none;
position: relative;
}
.kiJqwC {
text-align: center;
flex: 1 1 0%;
margin-left: calc(var(--spacing-2) * -1);
margin-right: calc(var(--spacing-2) * -1);
}
@media (min-width: 45em) {
.kiJqwC {
margin-left: calc(var(--spacing-3) * -1);
margin-right: calc(var(--spacing-3) * -1);
}
}
@media (min-width: 52.5em) {
.kiJqwC {
margin-left: 0px;
margin-right: 0px;
}
}
.gMavrr {
min-width: 100%;
max-height: 402px;
background-color: var(--color-neutral-90);
position: relative;
font-size: 0px;
vertical-align: middle;
border-radius: var(--spacing-1);
overflow: hidden;
}
.gKdhrF {
white-space: nowrap;
overflow: hidden;
transform: translateZ(0px);
transition: all 100ms ease-out 0s;
scroll-behavior: smooth;
min-height: 402px;
border-radius: var(--spacing-1);
}
.dTEHeu {
display: inline-block;
vertical-align: middle;
text-align: center;
overflow: hidden;
width: 100%;
max-height: 402px;
background-color: var(--color-neutral-100);
}
.dTEHeu .image {
width: 100%;
max-height: 402px;
object-fit: contain;
user-select: none;
position: absolute;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
}
.bsAwfV {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: var(--spacing-2);
}
.cpdQZT {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: var(--spacing-2);
}
.cewxen {
cursor: pointer;
width: var(--spacing-5);
height: var(--spacing-5);
border-radius: 50%;
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px;
background-color: var(--color-neutral-70);
}
.cewxen:hover {
background-color: var(--color-neutral-100);
}
.kPuCIR {
position: relative;
user-select: none;
}
.draTbt {
display: flex;
list-style: none;
flex-direction: column;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px;
margin-left: var(--spacing-1);
height: 402px;
overflow: hidden;
transition: all 450ms ease-out 0s;
scroll-behavior: smooth;
}
.dgkhgU {
position: relative;
line-height: 0;
padding: 0 0 var(--spacing-1);
}
.dgkhgU:last-child {
padding-bottom: 0px;
}
.jlljou {
height: var(--spacing-7);
width: var(--spacing-7);
border-radius: var(--spacing-0-5);
overflow: hidden;
position: relative;
will-change: opacity;
cursor: pointer;
transition: all 0.2s ease-in-out 0s;
opacity: 1;
}
.jrVMaH {
height: var(--spacing-7);
width: var(--spacing-7);
border-radius: var(--spacing-0-5);
overflow: hidden;
position: relative;
will-change: opacity;
cursor: pointer;
transition: all 0.2s ease-in-out 0s;
opacity: 0.64;
}
.fOBLLY {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: var(--spacing-0-);
height: 100%;
width: 100%;
object-fit: cover;
z-index: 2;
}
.hWeNGQ {
position: absolute;
left: 50%;
transform: translateX(-50%);
padding: 0px;
width: 100%;
text-align: center;
top: 0px;
}
.cSPhVH {
position: absolute;
left: 50%;
transform: translateX(-50%);
padding: 0px;
width: 100%;
text-align: center;
bottom: 0px;
}
.gFvSWv {
background-color: var(--color-neutral-70);
cursor: pointer;
line-height: 0;
}
.csPpVM {
background-image: url("https://img.olx.com.br/images/16/161466168739467.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% center;
filter: blur(32px);
position: fixed;
height: 120%;
width: 120%;
transform: translate(-32px, -32px);
}
.ckuAUr {
background-image: url("https://img.olx.com.br/images/16/160405404436999.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% center;
filter: blur(32px);
position: fixed;
height: 120%;
width: 120%;
transform: translate(-32px, -32px);
}
.kWJeEr {
background-image: url("https://img.olx.com.br/images/16/160419403685325.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% center;
filter: blur(32px);
position: fixed;
height: 120%;
width: 120%;
transform: translate(-32px, -32px);
}
.gtcngu {
background-image: url("https://img.olx.com.br/images/16/162455285827844.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% center;
filter: blur(32px);
position: fixed;
height: 120%;
width: 120%;
transform: translate(-32px, -32px);
}
.iJFeIe {
background-image: url("https://img.olx.com.br/images/16/167419408967814.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% center;
filter: blur(32px);
position: fixed;
height: 120%;
width: 120%;
transform: translate(-32px, -32px);
}
.kGMhQw {
background-image: url("https://img.olx.com.br/images/16/165480047250131.webp");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% center;
filter: blur(32px);
position: fixed;
height: 120%;
width: 120%;
transform: translate(-32px, -32px);
}
.PQyCd {
position: absolute;
bottom: 0px;
z-index: 2;
right: 64px;
}
.bixIoU {
background-color: var(--color-neutral-100);
width: 100%;
height: 100%;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
text-align: start;
}
.kAPCkC {
background-color: var(--color-neutral-70);
padding: var(--spacing-1);
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
align-items: flex-start;
height: 100%;
width: 100%;
max-width: 238px;
overflow-wrap: break-word;
white-space: normal;
display: inline-flex;
}
@media (min-width: 600px) {
.kAPCkC {
max-width: 364px;
}
}
@media (min-width: 1272px) {
.kAPCkC {
max-width: 480px;
}
}
.cmFKIN {
color: rgb(74, 74, 74);
line-height: 24px;
font-size: 16px;
font-weight: 400;
font-family: "Nunito Sans", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
margin: 0px;
}
.iwtnNi {
box-sizing: border-box;
}
.lkSSmZ {
font-size: 12px;
font-weight: 500;
color: rgb(153, 153, 153);
}
.cHkaSl {
margin-left: 8px;
position: relative;
}
.lhCjWO {
margin-left: 8px;
position: relative;
}
.hBtBBb {
margin-left: 8px;
position: relative;
}
.iLxMDK {
position: relative;
display: flex;
-webkit-box-align: center;
align-items: center;
flex-direction: row;
}
.cijItJ {
font-size: 14px;
color: rgb(74, 74, 74);
}
.cuZcdS {
text-align: center;
font-weight: 600;
font-size: 20px;
color: rgb(50, 50, 50);
line-height: 24px !important;
}
.fltvGW {
font-size: 12px;
font-weight: 500;
color: rgb(153, 153, 153);
display: flex;
-webkit-box-pack: center;
justify-content: center;
}
.TiUli {
position: relative;
display: flex;
-webkit-box-align: center;
align-items: center;
}
.ezXDmb {
position: relative;
display: flex;
-webkit-box-align: center;
align-items: center;
flex-direction: row;
}
.iMovUU {
display: inline-flex;
margin-right: 8px;
}
.kQoCjl {
display: flex;
flex-direction: column;
}
.kpaSEP {
display: flex;
margin-top: 4px;
margin-bottom: 12px;
}
.gBjgVF {
margin-bottom: 8px;
display: flex;
}
.chGUhu {
display: flex;
-webkit-box-pack: center;
justify-content: center;
margin-bottom: 4px;
margin-top: 8px;
width: 100%;
}
.bVXVQs {
text-overflow: ellipsis;
overflow: hidden;
}
.kCHSFM {
display: flex;
-webkit-box-pack: center;
justify-content: center;
margin-bottom: 8px;
}
.kJGzkt {
display: flex;
flex-direction: column;
width: 100%;
}
.cOBNwA {
border-bottom: 1px solid rgb(234, 234, 234);
width: 220px;
margin-bottom: 16px;
margin-top: 8px;
}
.fcDieZ {
background-color: rgb(249, 249, 249);
border: 1px solid rgb(216, 216, 216);
border-radius: 4px;
padding: 16px 0px;
display: flex;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
}
.ZIkpr {
display: flex;
flex-direction: column;
}
.gmYOGU {
margin-bottom: 12px;
}
.lkUxIJ {
margin-bottom: 4px;
}
.bzASAM {
display: flex;
-webkit-box-align: center;
align-items: center;
margin-left: 6px;
}
.cLiAaO {
display: inline-flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
height: auto;
border-radius: 24px;
align-self: flex-start;
flex-basis: auto;
white-space: nowrap;
cursor: pointer;
box-shadow: rgba(74, 74, 74, 0.2) 0px 3px 5px 0px;
background-color: var(--color-primary-100);
color: rgb(255, 255, 255);
padding: 12px;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
@media (min-width: 52.5em) {
.cLiAaO {
box-shadow: none;
}
}
@media (min-width: 52.5em) {
.cLiAaO {
padding: var(--spacing-1) var(--spacing-2);
}
}
.cLiAaO:active {
transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
transform: scale(0.96);
background-color: rgb(227, 118, 0);
}
.cLiAaO:not(:active) {
transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}
@media (min-width: 52.5em) {
.cLiAaO:hover {
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
background-color: rgb(227, 118, 0);
}
.cLiAaO:not(:hover) {
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}
}
.khBCdw {
display: inline-flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
height: auto;
border-radius: 24px;
align-self: flex-start;
flex-basis: auto;
white-space: nowrap;
cursor: pointer;
box-shadow: rgba(74, 74, 74, 0.2) 0px 3px 5px 0px;
background-color: rgb(253, 240, 226);
border: var(--border-width-hairline) solid var(--color-primary-100);
color: var(--color-primary-100);
padding: 11px;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
@media (min-width: 52.5em) {
.khBCdw {
box-shadow: none;
}
}
@media (min-width: 52.5em) {
.khBCdw {
padding: 7px 15px;
}
}
.khBCdw:active {
transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
transform: scale(0.96);
background-color: rgb(255, 225, 191);
}
.khBCdw:not(:active) {
transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}
@media (min-width: 52.5em) {
.khBCdw:hover {
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
background-color: rgb(255, 225, 191);
}
.khBCdw:not(:hover) {
transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}
}
.kHCjiu {
width: 12px;
}
@media (min-width: 52.5em) {
.kHCjiu {
width: var(--spacing-1);
}
}
.brGTsG {
margin-right: 8px;
}
@media (min-width: 52.5em) {
.brGTsG {
margin-right: 0px;
}
}
.lfjgSl {
background-color: transparent;
gap: var(--spacing-1);
}
.grIXNP {
height: 40px;
background-color: var(--color-neutral-80);
box-shadow: var(--color-neutral-90) 0px -1px 3px 0px;
}
.bpUaRp {
text-overflow: ellipsis;
max-width: 50%;
overflow: hidden;
white-space: nowrap;
}
.shnO {
position: relative;
}
@media (min-width: 1em) and (max-width: 52.4375em) {
.shnO {
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 4;
}
}
.imJiRw {
padding: var(--spacing-1);
border: solid var(--border-width-hairline) var(--color-neutral-100);
border-radius: var(--border-radius-xs);
}
.kBAeeE {
line-height: var(--font-lineheight-supertight);
height: 14px;
}
.hEMZqE {
padding: var(--spacing-4) var(--spacing-2);
display: flex;
margin-right: var(--spacing-2);
margin-left: var(--spacing-2);
border-radius: var(--border-radius-sm);
border: 1px solid var(--color-neutral-100);
background-color: var(--color-neutral-80);
}
.fUlPzh {
position: relative;
margin-bottom: 32px;
}
.fUlPzh .carousel.carousel-slider {
overflow: initial;
}
.fUlPzh .carousel .slide {
background-color: initial;
}
.fUlPzh .carousel .control-dots {
padding-inline-start: 0px;
bottom: -32px;
}
.fUlPzh .carousel .control-dots .dot {
box-shadow: none;
background: var(--color-neutral-130);
}
.fUlPzh .carousel .control-dots .dot.selected,
.fUlPzh .carousel .control-dots .dot:hover {
background: var(--color-secondary-100);
}
.carousel {
position: relative;
width: 100%;
}
.carousel * {
box-sizing: border-box;
}
.carousel.carousel-slider {
position: relative;
margin: 0px;
overflow: hidden;
}
.carousel .slider-wrapper {
overflow: hidden;
margin: auto;
width: 100%;
transition: height 0.15s ease-in 0s;
}
.carousel .slider-wrapper.axis-horizontal .slider {
display: flex;
}
.carousel .slider-wrapper.axis-horizontal .slider .slide {
flex-flow: column;
}
.carousel .slider {
margin: 0px;
padding: 0px;
position: relative;
list-style: none;
width: 100%;
}
.carousel .slider.animated {
transition: all 0.35s ease-in-out 0s;
}
.carousel .slide {
min-width: 100%;
margin: 0px;
position: relative;
text-align: center;
background: rgb(0, 0, 0);
}
.carousel .control-dots {
position: absolute;
bottom: 0px;
margin: 10px 0px;
text-align: center;
width: 100%;
}
@media (min-width: 960px) {
.carousel .control-dots {
bottom: 0px;
}
}
.carousel .control-dots .dot {
transition: opacity 0.25s ease-in 0s;
opacity: 0.3;
box-shadow: rgba(0, 0, 0, 0.9) 1px 1px 2px;
background: rgb(255, 255, 255);
border-radius: 50%;
width: 8px;
height: 8px;
cursor: pointer;
display: inline-block;
margin: 0px 8px;
}
.carousel .control-dots .dot.selected,
.carousel .control-dots .dot:hover {
opacity: 1;
}
.bUfxEj {
margin-left: -16px;
margin-right: -16px;
}
.dOMSbE {
height: 8px;
}
.bIWRYE {
cursor: pointer;
margin-left: -18px;
}
.cTaiLm {
-webkit-line-clamp: 2;
overflow: hidden;
-webkit-box-orient: vertical;
display: -webkit-inline-box;
}
.jEQdXP {
border-radius: var(--border-radius-sm);
border: solid var(--border-width-hairline) var(--color-neutral-90);
padding: var(--spacing-2) var(--spacing-3);
background-color: var(--color-neutral-80);
}
.dnuXGn {
border-radius: 50%;
background-color: var(--color-neutral-80);
padding: 10px;
}
@media (min-width: 52.5em) {
.dnuXGn {
padding: var(--spacing-1);
}
}
.igTPsH {
color: var(--color-neutral-130);
height: 20px;
width: 20px;
}
@media (min-width: 52.5em) {
.igTPsH {
height: 16px;
width: 16px;
}
}
.bruiFy {
margin-left: var(--spacing-1);
}
@media (min-width: 52.5em) {
.bruiFy {
margin-left: 12px;
}
}
.ccFvpT {
background-color: var(--color-neutral-80);
border: none;
padding: var(--spacing-2);
position: relative;
}
.hqZrfZ {
border-radius: 2px;
background-color: var(--color-neutral-80);
height: 32px;
width: 32px;
transform: rotate(45deg) translate(20px, -10px);
margin-bottom: -24px;
}
.ixznNN {
display: block;
width: 100%;
}
@media (min-width: 52.5em) {
.ixznNN {
display: none;
}
}
.jHHMfv {
cursor: pointer;
color: var(--color-secondary-100);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-xxs);
outline: none;
}
.jHHMfv:focus {
box-shadow: 0 0 0 2px var(--color-secondary-80);
border-radius: var(--border-radius-xxs);
}
.liCkqS {
margin-top: var(--spacing-1);
}
.dCywhT {
display: inline;
}
@media (min-width: 52.5em) {
.dCywhT {
font-size: var(--font-size-xxs);
}
}
.fSnvRW {
font-weight: var(--font-weight-bold);
color: var(--color-feedback-success-100);
}
@media (min-width: 52.5em) {
.fSnvRW {
font-size: var(--font-size-xxs);
}
}
.DXPmK .ds-drawer {
width: 100%;
outline: none;
position: fixed;
top: 0px;
bottom: 0px;
z-index: 100;
transform: translateY(9999px);
}
@media (min-width: 52.5em) {
.DXPmK .ds-drawer {
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
flex-direction: column;
inset: 0px;
}
}
.DXPmK .ds-drawer .ds-drawer-mask {
opacity: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-color: rgb(0, 0, 0);
}
.DXPmK .ds-drawer .ds-drawer-content-wrapper {
width: 100%;
max-height: calc(-16px + 100vh);
position: absolute;
top: auto;
bottom: 0px;
overflow: hidden;
display: flex;
flex-direction: column;
border-radius: 16px 16px 0px 0px;
background-color: var(--color-neutral-70);
}
@media (min-width: 52.5em) {
.DXPmK .ds-drawer .ds-drawer-content-wrapper {
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.22) 0px 4px 24px, rgba(0, 0, 0, 0.2) 0px 24px 24px;
}
}
@media (min-width: 52.5em) {
.DXPmK .ds-drawer .ds-drawer-content-wrapper {
height: auto;
width: 600px;
max-height: 80vh;
inset: auto;
}
@media only screen and (min-height: 200px) {
.DXPmK .ds-drawer .ds-drawer-content-wrapper {
min-height: 200px;
}
}
}
.DXPmK .ds-drawer .ds-drawer-element {
display: flex;
height: 100%;
}
.DXPmK .ds-drawer .ds-drawer-content {
width: 100%;
height: 100%;
z-index: 1;
position: relative;
-webkit-box-flex: 1;
flex-grow: 1;
overflow: auto;
}
.DXPmK .ds-drawer {
transition: transform 0.25s cubic-bezier(0.42, 0, 1, 1) 0.25s;
}
.DXPmK .ds-drawer .ds-drawer-mask {
transition: opacity 0.25s cubic-bezier(0, 0, 0.58, 1) 0s;
}
.DXPmK .ds-drawer .ds-drawer-content-wrapper {
transition: transform 0.25s cubic-bezier(0.42, 0, 1, 1) 0s;
}
.DXPmK .ds-drawer .ds-drawer-content {
transition: transform 0.25s cubic-bezier(0.42, 0, 1, 1) 0s;
}
.htWpRo .ds-drawer {
width: 100%;
outline: none;
position: fixed;
top: 0px;
bottom: 0px;
z-index: 100;
transform: translateY(9999px);
}
@media (min-width: 52.5em) {
.htWpRo .ds-drawer {
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
flex-direction: column;
inset: 0px;
}
}
.htWpRo .ds-drawer .ds-drawer-mask {
opacity: 0;
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-color: rgb(0, 0, 0);
}
.htWpRo .ds-drawer .ds-drawer-content-wrapper {
width: 100%;
max-height: calc(-16px + 100vh);
position: absolute;
top: auto;
bottom: 0px;
overflow: hidden;
display: flex;
flex-direction: column;
border-radius: 16px 16px 0px 0px;
background-color: var(--color-neutral-70);
}
@media (min-width: 52.5em) {
.htWpRo .ds-drawer .ds-drawer-content-wrapper {
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.22) 0px 4px 24px, rgba(0, 0, 0, 0.2) 0px 24px 24px;
}
}
@media (min-width: 52.5em) {
.htWpRo .ds-drawer .ds-drawer-content-wrapper {
height: auto;
width: 800px;
max-height: 80vh;
inset: auto;
}
@media only screen and (min-height: 200px) {
.htWpRo .ds-drawer .ds-drawer-content-wrapper {
min-height: 200px;
}
}
}
.htWpRo .ds-drawer .ds-drawer-element {
display: flex;
height: 100%;
}
.htWpRo .ds-drawer .ds-drawer-content {
width: 100%;
height: 100%;
z-index: 1;
position: relative;
-webkit-box-flex: 1;
flex-grow: 1;
overflow: auto;
}
.htWpRo .ds-drawer {
transition: transform 0.25s cubic-bezier(0.42, 0, 1, 1) 0.25s;
}
.htWpRo .ds-drawer .ds-drawer-mask {
transition: opacity 0.25s cubic-bezier(0, 0, 0.58, 1) 0s;
}
.htWpRo .ds-drawer .ds-drawer-content-wrapper {
transition: transform 0.25s cubic-bezier(0.42, 0, 1, 1) 0s;
}
.htWpRo .ds-drawer .ds-drawer-content {
transition: transform 0.25s cubic-bezier(0.42, 0, 1, 1) 0s;
}
.bwrWbg {
align-self: flex-end;
padding-bottom: var(--spacing-2);
}
@media (min-width: 52.5em) {
.bwrWbg {
padding-bottom: var(--spacing-1);
}
}
.fIeUxH {
background-color: var(--color-neutral-70);
position: sticky;
top: 0px;
padding: var(--spacing-3) 0;
}
@media (min-width: 52.5em) {
.fIeUxH {
padding-top: var(--spacing-4);
}
}
.gDAxRz {
display: flex;
flex: 1 1 0%;
flex-direction: column;
}
.kuLCig {
cursor: pointer;
}
.bxegPI {
display: flex;
flex: 1 1 0%;
flex-direction: column;
min-height: 189px;
padding: 0 var(--spacing-3) var(--spacing-3) var(--spacing-3);
}
@media (min-width: 52.5em) {
.bxegPI {
min-height: auto;
padding-top: 0px;
}
}
.fZvZjF {
display: flex;
flex: 1 1 0%;
}
@media (min-width: 52.5em) {
.fZvZjF {
padding-bottom: var(--spacing-2);
}
}
.lfCyKC {
width: 100%;
min-height: 48px;
padding: 8px;
border-radius: 4px;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: justify;
justify-content: space-between;
}
.hMxsdK {
width: 100%;
-webkit-box-align: center;
align-items: center;
flex-direction: column;
}
.byfXzK {
-webkit-box-pack: justify;
flex-direction: column;
width: 100%;
}
@media (min-width: 52.5em) {
.bFqvpB {
margin-bottom: 8px;
}
}
.krAlvT {
cursor: pointer;
border-width: 0px;
padding: 4px 8px;
font-family: "Nunito Sans";
font-size: 12px;
line-height: 16px;
color: var(--color-neutral-70);
background-color: var(--color-secondary-100);
border-radius: 4px;
text-transform: uppercase;
position: absolute;
bottom: 16px;
right: 16px;
height: auto;
min-width: auto;
}
.krAlvT:focus {
outline: none;
}
.krAlvT:hover {
background-color: var(--color-secondary-100);
}
.giMena {
display: none;
}
@media (min-width: 71.19em) {
.giMena {
display: block;
}
}
.glvOvk {
border-radius: 50%;
background-color: var(--color-neutral-80);
width: 40px;
height: 40px;
}
.kySTeR {
overflow: hidden;
}
.bklcRt {
margin-left: 8px;
white-space: nowrap;
max-width: 200px;
text-align: right;
display: inline;
}
@media (min-width: 52.5em) {
.bklcRt {
font-size: var(--font-size-xs);
}
}
.joFrXy {
margin-left: 8px;
white-space: nowrap;
max-width: 200px;
text-align: right;
display: inline;
font-weight: var(--font-weight-bold);
color: var(--color-feedback-success-100);
}
@media (min-width: 52.5em) {
.joFrXy {
font-size: var(--font-size-xs);
}
}
.exRDe {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
@media (min-width: 52.5em) {
.exRDe {
font-size: var(--font-size-xs);
}
}
.hlhAKE {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
@media (min-width: 52.5em) {
.hlhAKE {
font-size: var(--font-size-xxs);
}
}
.bLkPBq {
width: 100%;
margin-left: 16px;
overflow: hidden;
}
.kOcpyi {
width: 100%;
height: 1px;
background-color: var(--color-neutral-80);
margin: var(--spacing-2) 0;
}
.gGjonz {
display: flex;
}
.ekmhza {
margin-right: var(--spacing-0-5);
text-decoration: line-through;
color: var(--color-neutral-100);
display: inline;
}
@media (min-width: 52.5em) {
.ekmhza {
font-size: var(--font-size-xs);
}
}
.gDCssy {
flex: 1 1 0%;
}
.lkXMNS {
margin-left: -1rem;
}
@media (min-width: 52.5em) {
.lkXMNS {
margin-left: 0px;
}
}
.iSULFY {
flex-shrink: 1;
box-sizing: border-box;
flex-wrap: wrap;
background-color: transparent;
align-content: center;
}
@media (min-width: 1201px) {
.iSULFY {
width: 1140px;
}
}
@media (min-width: 701px) and (max-width: 1200px) {
.iSULFY {
width: 632px;
}
}
@media (max-width: 701px) {
.iSULFY {
width: 316px;
}
}
.lnCrpH {
flex-basis: 150px;
background-color: var(--color-neutral-80);
box-sizing: border-box;
margin-bottom: var(--spacing-1);
margin-right: var(--spacing-1);
}
.hLpjwU {
background-color: var(--color-neutral-80);
padding: 0 var(--spacing-2);
}
.hcmLgx {
-webkit-box-flex: 0;
flex-grow: 0;
background-color: transparent;
width: 100%;
}
.giadtl {
text-align: left;
-webkit-line-clamp: 2;
overflow: hidden;
-webkit-box-orient: vertical;
display: -webkit-inline-box;
font-size: var(--font-size-xxxs);
}
.faOAuq {
display: flex;
flex-direction: column;
}
.gRffJZ {
margin-top: var(--spacing-3);
margin-bottom: var(--spacing-2);
}
.bOqIXI {
margin-top: -34px;
}
.jdyRVD {
position: relative;
z-index: 0;
}
.jHiBXE {
position: relative;
z-index: 300;
}
.dNsour {
background-color: var(--color-neutral-80);
margin-left: -1rem;
margin-right: -1rem;
padding-top: 32px;
-webkit-box-pack: center;
justify-content: center;
}
@media (min-width: 52.5em) {
.dNsour {
background-color: transparent;
padding-top: 0px;
margin-left: 0px;
margin-right: 0px;
justify-content: left;
}
}
.hplqOl {
display: flex;
}
.eoZZuW {
display: block;
margin: 0px;
padding: 0px;
font-family: var(--font-family);
word-break: break-word;
color: var(--text-color);
font-weight: var(--font-weight-regular);
line-height: var(--font-lineheight-distant);
font-size: var(--font-size-xxs);
font-style: normal;
}
.fxfeXq {
display: block;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
font-family: var(--font-family);
word-break: break-word;
color: var(--text-color);
font-weight: var(--font-weight-semibold);
line-height: var(--font-lineheight-superdistant);
font-size: var(--font-size-xs);
font-style: normal;
margin-top: var(--font-size-xxxs);
}
.fDNJHX {
display: block;
margin: 0px;
padding: 0px;
font-style: normal;
font-family: var(--font-family);
word-break: break-word;
color: var(--text-color);
font-weight: var(--font-weight-regular);
line-height: var(--font-lineheight-medium);
font-size: var(--font-size-xxxs);
}
.isGkDG {
margin-top: var(--spacing-2);
justify-content: center;
align-items: center;
background: var(--color-neutral-80);
border: 1px solid var(--color-neutral-90);
border-radius: var(--spacing-0-5);
}
.culsWI {
max-width: 328px;
max-height: 217px;
padding: 12px;
background: var(--color-neutral-80);
}
.fEPFJw {
display: flex;
flex-grow: 1;
flex-shrink: 1;
width: 82px;
height: 128px;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
border-right-width: var(--border-width-hairline);
border-right-style: solid;
border-right-color: var(--color-neutral-100);
}
.dAarSr {
display: flex;
flex-grow: 1;
flex-shrink: 1;
width: 82px;
height: 128px;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.jemGPt {
display: flex;
flex-wrap: wrap;
justify-content: center;
place-items: center;
margin-bottom: var(--spacing-2);
}
.erd_scroll_detection_container>div::-webkit-scrollbar {
display: none;
}
.erd_scroll_detection_container_animation_active {
-webkit-animation-duration: 0.1s;
animation-duration: 0.1s;
-webkit-animation-name: erd_scroll_detection_container_animation;
animation-name: erd_scroll_detection_container_animation;
}
.iwtnNi {
box-sizing: border-box;
}
@-webkit-keyframes erd_scroll_detection_container_animation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes erd_scroll_detection_container_animation {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tCKQ.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tCKQ.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tCKQ.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tCKQ.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-s.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tCKQ.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tCKQ.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tCKQ.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tCKQ.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-s.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tCKQ.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tCKQ.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tCKQ.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tCKQ.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-s.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tCKQ.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tCKQ.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tCKQ.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tCKQ.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-s.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tCKQ.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tCKQ.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tCKQ.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tCKQ.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-s.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tCKQ.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tCKQ.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tCKQ.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tCKQ.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-s.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tCKQ.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tCKQ.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tCKQ.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tCKQ.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-s.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t4R-tCKQ.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7txR-tCKQ.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t6R-tCKQ.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t7R-tCKQ.woff2) format('woff2');
unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe0TMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp7t1R-s.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.tobii {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.tobii__btn--close {
position: absolute;
top: 20px;
right: 20px;
background: transparent;
border: none;
cursor: pointer;
color: white;
}
.tobii__slider {
width:100%;
max-width:900px;
padding-right:30px;
padding-left:30px;
}
.tobii-iframe iframe {
width: 100%;
height:500px;
}
/* REMOVER SETAS ANTIGAS */
.ad__sc-28oze1-7,
.ad__sc-lkx530-6 {
display: none !important;
}
/* BADGE DA CÂMERA (CONTADOR) */
.camera-badge {
position: absolute;
bottom: 16px;
left: 16px;
background: rgba(0, 0, 0, 0.6);
color: white;
padding: 4px 8px;
border-radius: 4px;
display: flex;
align-items: center;
font-size: 12px;
font-weight: 600;
z-index: 10;
pointer-events: none;
}
.camera-badge svg {
width: 16px;
height: 16px;
margin-right: 4px;
fill: white;
}
/* --- ESTILOS DO MODAL AMPLIADO (LIGHTBOX) --- */
.custom-lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000; /* Fundo preto conforme app */
z-index: 9999;
flex-direction: column;
}
/* Header do Modal */
.lightbox-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10001;
color: white;
}
.lightbox-close {
background: #e0e0e0;
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 20px;
color: #000;
}
/* Corpo da Galeria no Modal */
.lightbox-body {
flex: 1;
display: flex;
align-items: center;
overflow-x: auto;
scroll-snap-type: x mandatory;
height: 100%;
}
.lightbox-item {
min-width: 100%;
height: 100%;
scroll-snap-align: center;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.lightbox-item img {
max-width: 100%;
max-height: 80vh; /* Deixa espaço para o footer */
object-fit: contain;
}
/* Footer do Modal (Preço e Botão) */
.lightbox-footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: white;
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
z-index: 10001;
}
.lightbox-price {
font-size: 24px;
font-weight: 700;
color: #1a1d23;
}
.lightbox-btn-buy {
background-color: #f28000;
color: white;
border: none;
padding: 12px 24px;
border-radius: 24px;
font-weight: 700;
font-size: 16px;
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
.lightbox-btn-buy:hover {
background-color: #d97300;
}
/* --- LAYOUT GRID DESKTOP (Igual OLX Original) --- */
@media (min-width: 840px) {
/* Esconde a estrutura antiga de rolagem no desktop */
.gallery-scroll-container, .camera-badge {
display: none !important;
}
/* Container Principal da Galeria Desktop */
.desktop-gallery-grid {
display: flex;
width: 100%;
height: 500px; /* Altura fixa para alinhar */
gap: 8px; /* Espaço entre a foto grande e as pequenas */
position: relative;
}
/* Área da Foto Grande (Esquerda) */
.desktop-main-stage {
flex: 3; /* Ocupa 75% do espaço */
position: relative;
height: 100%;
background-color: #f2f2f2;
border-radius: 4px;
overflow: hidden;
cursor: zoom-in;
}
.desktop-main-stage img {
width: 100%;
height: 100%;
object-fit: cover; /* Preenche tudo */
display: block;
}
/* Badge de contagem (1/4) na foto grande */
.desktop-photo-counter {
position: absolute;
bottom: 16px;
left: 16px;
background: rgba(0,0,0,0.6);
color: white;
padding: 4px 10px;
border-radius: 4px;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
gap: 5px;
}
/* Coluna de Miniaturas (Direita) */
.desktop-thumb-rail {
flex: 1; /* Ocupa 25% do espaço */
display: flex;
flex-direction: column;
gap: 8px;
height: 100%;
}
.desktop-thumb-item {
flex: 1; /* Divide a altura igualmente */
position: relative;
cursor: pointer;
border-radius: 4px;
overflow: hidden;
background: #f2f2f2;
border: 2px solid transparent; /* Borda invisível para seleção */
}
.desktop-thumb-item.active-thumb {
border-color: #f28000; /* Borda laranja na selecionada */
}
.desktop-thumb-item img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.8;
transition: opacity 0.2s;
}
.desktop-thumb-item:hover img,
.desktop-thumb-item.active-thumb img {
opacity: 1;
}
}
/* Garante que isso não apareça no mobile */
@media (max-width: 839px) {
.desktop-gallery-grid {
display: none !important;
}
}
/* --- ESTILO CABEÇALHO MOBILE (Coloque no final do CSS) --- */
@media (max-width: 839px) {
/* 1. Esconde Menu Hamburguer, Busca e Coluna Direita antiga */
.olx-header__burger-menu,
.olx-header__search,
.olx-header__column-right {
display: none !important;
}
/* 2. Ajusta o container para os itens ficarem nos cantos */
.olx-header__primary-menu {
display: flex !important;
justify-content: space-between !important; /* Um na ponta esquerda, outro na direita */
align-items: center !important;
width: 100% !important;
}
/* 3. Ajusta a coluna do logo para ocupar só o espaço necessário */
.olx-header__column-left {
flex: 0 0 auto !important;
width: auto !important;
}
/* 4. Exibe os novos ícones (Coração e Compartilhar) */
.mobile-header-icons {
display: flex !important;
align-items: center;
gap: 20px;
padding-right: 16px;
}
/* Estilo dos botões transparentes */
.header-mob-btn {
background: none;
border: none;
padding: 0;
cursor: pointer;
display: flex;
color: #1a1d23;
}
}
/* ESCONDE NO DESKTOP */
@media (min-width: 840px) {
.mobile-header-icons {
display: none !important;
}
}
@media (max-width: 768px) {
.gallery-item {
min-width: 100%;
height: 420px; /* altura padrão mobile */
overflow: hidden;
position: relative;
background: #f2f2f2;
}
.gallery-item img {
width: 100%;
height: auto;
display: block;
object-fit: cover; /* ou contain */
}
}
/* --- REMOVER BARRA DE PESQUISA EXTRA NO MOBILE --- */
@media (max-width: 839px) {
.olx-header__search-fluid {
display: none !important;
}
}
/* --- REMOVER LINHA DO HEADER NO MOBILE --- */
@media (max-width: 839px) {
.olx-header__main-menu {
border-bottom: none !important;
box-shadow: none !important; /* Garante que não tenha sombra também */
}
}
.ad__sc-45jt43-0 {
margin-right: 20px; /* margem do lado direito */
margin-bottom: 5px; /* margem de baixo */
}
/* --- AJUSTE DO PREÇO (MAIS GROSSO / BOLD) --- */
@media (max-width: 839px) {
.ad__sc-1wimjbb-1.hoHpcC {
font-family: 'Nunito Sans', sans-serif !important;
font-size: 40px !important;
font-weight: 700 !important;
color: #1a1d23 !important;
line-height: 100% !important;
letter-spacing: -1px !important;
margin-bottom: 8px !important;
display: block !important;
margin-top: 15px;
}
}
/* --- ÍCONES DE PAGAMENTO --- */
.payment-methods-row {
display: flex;
align-items: center;
gap: 6px; /* Espaço entre os ícones */
margin-top: 4px; /* Espaço logo abaixo do preço */
margin-bottom: 8px; /* Espaço antes do texto de parcelamento */
flex-wrap: wrap; /* Garante que não quebre em telas muito pequenas */
}
/* Estilo do Modal de Pagamento */
.payment-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 99999;
justify-content: center;
align-items: flex-end; /* Mobile: bottom sheet */
}
/* Desktop: Centralizado */
@media (min-width: 840px) {
.payment-modal-overlay {
align-items: center;
}
.payment-modal-container {
border-radius: 8px !important;
max-width: 480px !important;
height: auto !important;
max-height: 90vh;
}
}
.payment-modal-container {
background: white;
width: 100%;
max-width: 100%;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
padding: 0;
display: flex;
flex-direction: column;
height: 85vh; /* Mobile height */
box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.payment-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px;
border-bottom: 1px solid #eee;
}
.payment-modal-header h3 {
font-family: 'Nunito Sans', sans-serif;
font-size: 20px;
font-weight: 600;
color: #1a1d23;
margin: 0;
}
.payment-modal-header button {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #1a1d23;
}
.payment-modal-content {
padding: 24px;
overflow-y: auto;
}
/* Cards de Método de Pagamento */
.payment-method-card {
border: 1px solid #cfd4dd;
border-radius: 8px;
padding: 16px;
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 12px;
}
.pm-icon {
width: 24px;
height: 24px;
display: flex;
justify-content: center;
align-items: center;
}
.pm-info {
display: flex;
flex-direction: column;
}
.pm-title {
font-size: 10px;
font-weight: 700;
color: #6e6e6e;
text-transform: uppercase;
margin-bottom: 4px;
font-family: 'Nunito Sans', sans-serif;
}
.pm-desc {
font-size: 14px;
color: #1a1d23;
margin-bottom: 8px;
font-family: 'Nunito Sans', sans-serif;
font-weight: bold;
}
.pm-flags {
display: flex;
gap: 8px;
align-items: center;
}
/* AJUSTE PARA OS SVGS DAS BANDEIRAS */
.pm-flags svg {
height: 24px; /* Altura padrão para alinhar todos */
width: auto;
}
/* Tabela de Parcelas */
.installments-title {
font-size: 16px;
font-weight: 600;
color: #1a1d23;
margin: 24px 0 16px 0;
font-family: 'Nunito Sans', sans-serif;
}
.installment-row {
display: flex;
justify-content: space-between;
padding: 12px;
border-radius: 4px;
margin-bottom: 4px;
}
.installment-row:nth-child(odd) {
background-color: #f5f6f7;
}
.inst-left {
font-size: 14px;
color: #1a1d23;
font-weight: 400;
}
.inst-left small {
font-size: 12px;
color: #6e6e6e;
margin-left: 4px;
}
.inst-right {
font-size: 14px;
color: #6e6e6e;
}
/* --- ESTILO DA DESCRIÇÃO (VER MAIS) --- */
/* Estado fechado (truncado) */
.desc-collapsed span {
display: -webkit-box;
-webkit-line-clamp: 3; /* Mostra apenas 3 linhas */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/* Estado aberto (texto completo) */
.desc-expanded span {
display: block;
overflow: visible;
}
/* Botão "Ver descrição completa" */
.btn-ver-descricao {
background: none;
border: none;
color: #6e0ad6; /* Cor roxa padrão OLX */
font-family: 'Nunito Sans', sans-serif;
font-size: 14px;
font-weight: 600;
padding: 8px 0;
cursor: pointer;
display: block;
margin-top: 4px;
outline: none;
}
.btn-ver-descricao:hover {
text-decoration: underline;
}
/* --- REMOVER MARGEM DO TÍTULO "DESCRIÇÃO" --- */
/* 1. Ataca o H2 específico dentro da caixa de descrição */
.ad__sc-h3us20-3.dFeJTI h2.olx-text--title-small.olx-text--block {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
line-height: 1.2 !important; /* Reduz a altura da linha do título */
}
/* 2. Remove o padding da div que envolve esse título */
.ad__sc-h3us20-3.dFeJTI {
padding-bottom: 0 !important;
margin-bottom: 5px !important; /* Deixa apenas 5px de respiro para o texto */
min-height: auto !important;
}
/* 3. (Garantia) Se o espaçador ainda existir, mata ele de vez */
.ad__sc-h3us20-3.dFeJTI .hnWKZq {
display: none !important;
height: 0 !important;
}
/* --- ESTILO DOS DETALHES (CARDS) --- */
.details-grid {
display: grid;
grid-template-columns: 1fr 1fr; /* 2 colunas */
gap: 16px; /* Espaço entre os cards */
margin-top: 16px;
margin-bottom: 24px;
}
.detail-card {
border: 1px solid #cfd4dd;
border-radius: 8px;
padding: 16px;
display: flex;
flex-direction: column;
align-items: flex-start;
background-color: #fff;
min-height: 88px;
}
.detail-icon {
margin-bottom: 12px;
color: #1a1d23;
display: flex;
align-items: center;
}
.detail-label {
font-family: 'Nunito Sans', sans-serif;
font-size: 12px;
color: #6e6e6e;
margin-bottom: 4px;
line-height: 1;
}
.detail-value {
font-family: 'Nunito Sans', sans-serif;
font-size: 16px;
font-weight: 600; /* Semibold */
color: #1a1d23;
line-height: 1.2;
}
/* Responsividade: Em telas muito pequenas, mantém 2 colunas ou ajusta se necessário */
@media (max-width: 360px) {
.details-grid {
grid-template-columns: 1fr; /* 1 coluna em telas minúsculas */
}
}
/* --- NOVA SEÇÃO DE LOCALIZAÇÃO --- */
.ad__sc-o5hdud-0.gUDmOk {
display: flex;
align-items: center;
gap: 16px; /* Espaço entre o ícone e o texto */
margin-top: 16px;
margin-bottom: 24px;
}
/* Ajuste do tamanho do Ícone SVG */
.ad__sc-o5hdud-0.gUDmOk svg {
width: 64px;
height: 64px;
flex-shrink: 0; /* Impede o ícone de amassar */
}
/* Coluna de texto */
.ad__sc-o5hdud-0.gUDmOk .flex.flex-col {
display: flex;
flex-direction: column;
justify-content: center;
}
/* Texto Principal (Bairro/Cidade) */
.typo-body-medium.font-semibold {
font-family: 'Nunito Sans', sans-serif;
font-size: 20px;
font-weight: 600;
color: #1a1d23;
line-height: 1.2;
margin-bottom: 4px;
display: block;
}
/* Texto Secundário (CEP/Detalhes) */
.typo-body-small.font-semibold.text-neutral-110 {
font-family: 'Nunito Sans', sans-serif;
font-size: 14px;
font-weight: 400;
color: #6e6e6e;
display: block;
}
/* --- ESTILO NOVO: SOBRE O ANUNCIANTE --- */
/* Container Principal do Card */
.ad__sc-18pfc7g-0.fMpeZL {
border: 1px solid #cfd4dd;
border-radius: 8px;
padding: 24px;
background-color: #fff;
margin-bottom: 24px;
font-family: 'Nunito Sans', sans-serif;
}
/* Utilitários de Layout (Flexbox) */
.flex { display: flex !important; }
.flex-col { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.items-center { align-items: center !important; }
.items-start { align-items: flex-start !important; }
.justify-between { justify-content: space-between !important; }
.justify-center { justify-content: center !important; }
.flex-1 { flex: 1 1 0% !important; }
.w-full { width: 100% !important; }
/* Espaçamentos (Gaps e Margins) */
.gap-1 { gap: 8px !important; }
.gap-0-5 { gap: 4px !important; }
.gap-2 { gap: 16px !important; }
.mb-1-5 { margin-bottom: 12px !important; }
.mb-2 { margin-bottom: 16px !important; }
.mr-1 { margin-right: 8px !important; }
.mt-0-25 { margin-top: 2px !important; }
.mr-0-25 { margin-right: 2px !important; }
/* Tipografia */
.typo-body-large { font-size: 24px; font-weight: 600; color: #1a1d23; }
.typo-body-medium { font-size: 16px; color: #1a1d23; line-height: 1.5; }
.typo-body-small { font-size: 14px; color: #1a1d23; }
.typo-caption { font-size: 12px; color: #6e6e6e; }
.typo-overline { font-size: 10px; text-transform: uppercase; font-weight: 700; color: #6e6e6e; }
.font-semibold { font-weight: 600 !important; }
.font-regular { font-weight: 400 !important; }
.text-neutral-110, .text-neutral-120 { color: #6e6e6e !important; }
.text-neutral-130 { color: #1a1d23 !important; }
/* Badges e Botões */
.olx-core-badge--pill {
background-color: #f0e6ff;
color: #6e0ad6;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 4px;
}
.olx-core-button--neutral {
width: 100%;
padding: 8px;
border: 1px solid #1a1d23;
background: transparent;
border-radius: 20px;
color: #1a1d23;
font-weight: 600;
text-align: center;
cursor: pointer;
margin-top: 16px;
margin-bottom: 24px;
display: block;
text-decoration: none;
}
/* Barras de Reputação (Coloridas) */
.ad__sc-19sejo7-0 { height: 4px; flex: 1; border-radius: 2px; }
.eOaiKP { background-color: #c599ff; } /* Roxo claro */
.bVylla { background-color: #994dfa; } /* Roxo médio */
.cXEafm { background-color: #6e0ad6; } /* Roxo forte */
.kyAABJ { background-color: #37056b; } /* Roxo escuro */
/* Estrelas */
.ad__sc-7hykp4-3 img { width: 14px; height: 14px; }
/* Ícones de verificação */
.ad__sc-jmgac1-0 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
/* --- ESTILO NOVO: SOBRE O ANUNCIANTE --- */
/* Container Principal do Card */
.ad__sc-18pfc7g-0.fMpeZL {
border: 1px solid #cfd4dd;
border-radius: 8px;
padding: 24px;
background-color: #fff;
margin-bottom: 24px;
font-family: 'Nunito Sans', sans-serif;
}
/* Utilitários de Layout (Flexbox) */
.flex { display: flex !important; }
.flex-col { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.items-center { align-items: center !important; }
.items-start { align-items: flex-start !important; }
.justify-between { justify-content: space-between !important; }
.justify-center { justify-content: center !important; }
.flex-1 { flex: 1 1 0% !important; }
.w-full { width: 100% !important; }
/* Espaçamentos (Gaps e Margins) */
.gap-1 { gap: 8px !important; }
.gap-0-5 { gap: 4px !important; }
.gap-2 { gap: 16px !important; }
.mb-1-5 { margin-bottom: 12px !important; }
.mb-2 { margin-bottom: 16px !important; }
.mr-1 { margin-right: 8px !important; }
.mt-0-25 { margin-top: 2px !important; }
.mr-0-25 { margin-right: 2px !important; }
/* Tipografia */
.typo-body-large { font-size: 24px; font-weight: 600; color: #1a1d23; }
.typo-body-medium { font-size: 16px; color: #1a1d23; line-height: 1.5; }
.typo-body-small { font-size: 14px; color: #1a1d23; }
.typo-caption { font-size: 12px; color: #6e6e6e; }
.typo-overline { font-size: 10px; text-transform: uppercase; font-weight: 700; color: #6e6e6e; }
.font-semibold { font-weight: 600 !important; }
.font-regular { font-weight: 400 !important; }
.text-neutral-110, .text-neutral-120 { color: #6e6e6e !important; }
.text-neutral-130 { color: #1a1d23 !important; }
/* Badges e Botões */
.olx-core-badge--pill {
background-color: #f0e6ff;
color: #6e0ad6;
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 4px;
}
.olx-core-button--neutral {
width: 100%;
padding: 8px;
border: 1px solid #1a1d23;
background: transparent;
border-radius: 20px;
color: #1a1d23;
font-weight: 600;
text-align: center;
cursor: pointer;
margin-top: 16px;
margin-bottom: 24px;
display: block;
text-decoration: none;
}
/* Barras de Reputação (Coloridas) */
.ad__sc-19sejo7-0 { height: 4px; flex: 1; border-radius: 2px; }
.eOaiKP { background-color: #c599ff; } /* Roxo claro */
.bVylla { background-color: #994dfa; } /* Roxo médio */
.cXEafm { background-color: #6e0ad6; } /* Roxo forte */
.kyAABJ { background-color: #37056b; } /* Roxo escuro */
/* Estrelas */
.ad__sc-7hykp4-3 img { width: 14px; height: 14px; }
/* Ícones de verificação */
.ad__sc-jmgac1-0 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ad__sc-lkx530-1 {
width: 100%;
background: none;
}
/* Adicione isso ao seu CSS em index.php */
/* --- 1. EFEITO DE TRAVAR (SNAP) --- */
/* Container que rola */
.gallery-scroll-container {
display: flex;
overflow-x: auto;
width: 100%;
height: 100%;
/* Configuração obrigatória para travar */
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
/* Esconde a barra de rolagem */
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.gallery-scroll-container::-webkit-scrollbar {
display: none;
}
/* Item individual (Foto) */
.gallery-item {
min-width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
background: #f2f2f2;
/* Onde a imagem deve parar */
scroll-snap-align: center;
scroll-snap-stop: always; /* Força a parada, não deixa passar direto */
}
/* --- 2. EFEITO DE BORRADO NAS LATERAIS --- */
/* Precisamos aplicar isso no PAI do container de scroll para o efeito ficar fixo */
.ad__sc-lkx530-1 {
position: relative; /* Garante que os efeitos fiquem presos aqui */
}
/* Cria as camadas laterais */
.ad__sc-lkx530-1::before,
.ad__sc-lkx530-1::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 15%; /* Largura do borrado (aumente se quiser maior) */
z-index: 5; /* Fica acima da foto */
pointer-events: none; /* Permite clicar/arrastar através do efeito */
}
/* --- BARRA FIXA DE COMPRA (MOBILE) --- */
.mobile-sticky-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #ffffff;
border-top: 1px solid #cfd4dd;
padding: 12px 16px;
display: flex;
align-items: center;
gap: 16px; /* Espaço entre o botão comprar e os ícones */
z-index: 999; /* Fica acima de tudo */
box-shadow: 0 -2px 6px rgba(0,0,0,0.08);
}
/* Botão Comprar Laranja */
.sticky-buy-btn {
flex: 1; /* Ocupa todo o espaço disponível */
background-color: #f28000;
color: #ffffff !important;
height: 48px;
border-radius: 24px;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Nunito Sans', sans-serif;
font-weight: 700;
font-size: 16px;
text-decoration: none;
border: none;
cursor: pointer;
gap: 8px;
transition: background-color 0.2s;
}
.sticky-buy-btn:hover {
background-color: #d97300;
text-decoration: none;
}
/* Container dos botões redondos */
.sticky-actions {
display: flex;
gap: 12px; /* Espaço entre o chat e o telefone */
}
/* Botões Redondos (Chat e Telefone) */
.sticky-icon-btn {
width: 48px;
height: 48px;
border: 1px solid #f28000;
border-radius: 50%;
background: transparent;
display: flex;
justify-content: center;
align-items: center;
color: #f28000;
cursor: pointer;
padding: 0;
}
.sticky-icon-btn svg {
width: 24px;
height: 24px;
}
/* Espaço extra no final da página para o conteúdo não ficar escondido atrás da barra */
body {
padding-bottom: 80px;
}
/* ESCONDER NO COMPUTADOR (Aparece só no celular) */
@media (min-width: 840px) {
.mobile-sticky-footer {
display: none !important;
}
body {
padding-bottom: 0;
}
}
/* --- CORREÇÃO DE ESPAÇAMENTO DO RODAPÉ --- */
/* 1. Ajuste do container do rodapé para ficar "rente" */
.olx-seo-footer {
background-color: #f9f9f9;
/* Topo: 32px | Laterais: 16px | Base: 16px (Bem curto para ficar rente) */
padding: 32px 16px 16px 16px !important;
text-align: center;
font-family: 'Nunito Sans', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
}
/* 2. Garante que a barra fixa não esconda o conteúdo, mas sem criar buraco extra */
body {
padding-bottom: 70px !important; /* Apenas a altura da barra fixa */
}
/* 3. Links do Rodapé */
.olx-static-footer__legal-container-links {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
width: 100%;
}
.olx-core-link {
text-decoration: none;
font-size: 14px;
color: #4a4a4a;
font-weight: 400;
}
/* 4. Linha Divisória */
.olx-divider {
width: 100%;
height: 1px;
background-color: #e5e5e5;
border: none;
margin: 24px 0;
}
/* 5. Copyright */
.olx-static-footer__legal-container-address span {
font-size: 12px;
color: #6e6e6e;
line-height: 1.5;
display: block;
margin-bottom: 24px;
max-width: 90%;
margin-left: auto;
margin-right: auto;
}
.olx-static-footer__icon-wrapper svg {
width: 24px;
height: 24px;
fill: #1a1d23;
}
/* Overlay (Fundo Escuro) */
.level-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999999;
/* Alinha no fundo da tela (efeito gaveta) */
align-items: flex-end;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
/* O Card/Gaveta */
.level-modal-content {
background-color: #ffffff;
width: 100%;
/* Limita a largura em telas grandes para não ficar gigante */
max-width: 600px;
/* Bordas arredondadas apenas em cima */
border-top-left-radius: 16px;
border-top-right-radius: 16px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
/* Padding interno */
padding: 16px 24px 32px 24px;
position: relative;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
font-family: 'Nunito Sans', sans-serif;
color: #1a1d23;
/* Começa escondido para baixo */
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
max-height: 90vh;
overflow-y: auto;
}
/* Estado Aberto */
.level-modal-overlay.open {
display: flex;
opacity: 1;
}
.level-modal-overlay.open .level-modal-content {
transform: translateY(0);
}
/* A "Pílula" cinza no topo (Handle) */
.level-handle-bar {
width: 32px;
height: 4px;
background-color: #cfd4dd;
border-radius: 2px;
margin: 0 auto 24px auto;
/* Centraliza e dá espaço pro texto */
display: block;
}
/* Botão Fechar (X) */
.level-close-btn {
position: absolute;
top: 16px;
right: 16px;
background: transparent;
border: none;
cursor: pointer;
padding: 4px;
color: #1a1d23;
z-index: 10;
}
/* Tipografia */
.level-text {
font-size: 16px;
line-height: 1.5;
color: #1a1d23;
margin-bottom: 16px;
}
.level-text strong {
font-weight: 700;
}
/* Lista (Bullets) */
.level-list {
padding-left: 20px;
/* Ajuste fino do alinhamento */
margin-bottom: 32px;
margin-left: 4px;
/* Pequeno ajuste para alinhar visualmente com o parágrafo */
}
.level-list li {
font-size: 16px;
line-height: 1.6;
color: #4a4a4a;
margin-bottom: 4px;
}
/* Link Roxo */
.level-link {
display: block;
text-align: center;
color: #6e0ad6;
font-weight: 600;
text-decoration: none;
font-size: 16px;
margin-bottom: 24px;
}
.level-link:hover {
text-decoration: underline;
}
/* Box Azul */
.level-info-box {
background-color: #e0fbfd;
border-radius: 8px;
padding: 16px;
display: flex;
align-items: center;
/* Centraliza icone e texto verticalmente */
gap: 16px;
}
.level-trophy-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
color: #005662;
/* Cor escura do ícone */
}
.level-info-text {
font-size: 14px;
line-height: 1.4;
color: #1a1d23;
font-weight: 400;
}
/* Overlay e Gaveta (Reutilizando lógica ou criando nova para isolar) */
.garantia-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999999;
align-items: flex-end;
/* Gaveta no fundo */
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.garantia-modal-content {
background-color: #ffffff;
width: 100%;
max-width: 600px;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 40px 24px 24px 24px;
position: relative;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
font-family: 'Nunito Sans', sans-serif;
color: #1a1d23;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
max-height: 90vh;
overflow-y: auto;
}
/* Estados de Abertura */
.garantia-modal-overlay.open {
display: flex;
opacity: 1;
}
.garantia-modal-overlay.open .garantia-modal-content {
transform: translateY(0);
}
/* Botão Fechar */
.garantia-close-btn {
position: absolute;
top: 16px;
right: 16px;
background: transparent;
border: none;
cursor: pointer;
padding: 4px;
color: #1a1d23;
}
/* Ícone Principal (Cadeado) */
.garantia-icon-wrapper {
display: flex;
justify-content: center;
margin-bottom: 24px;
}
.garantia-icon-wrapper svg {
width: 80px;
height: 80px;
}
/* Títulos e Textos */
.garantia-title {
font-size: 20px;
font-weight: 700;
margin-bottom: 16px;
line-height: 1.3;
color: #1a1d23;
}
.garantia-text {
font-size: 16px;
line-height: 1.5;
color: #4a4a4a;
margin-bottom: 24px;
}
.garantia-subtitle {
font-size: 16px;
font-weight: 700;
margin-bottom: 16px;
color: #1a1d23;
}
/* Lista de Cobertura */
.garantia-list {
padding: 0;
margin-bottom: 24px;
}
.garantia-list li {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
font-size: 16px;
color: #4a4a4a;
line-height: 1.4;
}
.garantia-list li svg {
flex-shrink: 0;
color: #6e0ad6;
/* Roxo OLX */
margin-top: 2px;
}
.garantia-list li small {
display: block;
font-size: 14px;
color: #6e6e6e;
margin-top: 4px;
}
/* Box Cinza (Rodapé) */
.garantia-info-box {
background-color: #f5f6f7;
border-radius: 8px;
padding: 16px;
display: flex;
align-items: flex-start;
gap: 12px;
}
.garantia-info-box svg {
flex-shrink: 0;
color: #5e6a82;
margin-top: 2px;
}
.garantia-info-title {
font-weight: 600;
color: #1a1d23;
display: block;
font-size: 14px;
margin-bottom: 4px;
}
.garantia-info-desc {
font-size: 14px;
color: #4a4a4a;
line-height: 1.4;
}
/* ============================================================
FIX: Foto circular do vendedor protegida contra img global
============================================================ */
.seller-photo-img {
width: 56px !important;
height: 56px !important;
border-radius: 50% !important;
object-fit: cover !important;
display: block !important;
max-width: 56px !important;
}